在使用layui模块的时候,我们可以遵循它的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用layui</title> <link rel="stylesheet" href="F:/layui/layui-v2.5.5/layui/css/layui.css"> </head> <body> <!-- 你的HTML代码 --> <script src="F:/layui/layui-v2.5.5/layui/layui.js"></script> <script> layui.config({ base: 'F:/layui/myTest/' //你存放新模块的目录,注意,不是layui的模块目录 }).use('index'); //加载入口 </script> </body> </html>上述的 index 即为你F:/layui/myTest/ 目录下的 index.js,它的内容应该如下:
/** 项目JS主入口 以依赖layui的layer和form模块为例 **/ layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致 });注:事实上 layui 的「模块化加载」十分适用于开发环境,它方便团队开发和代码调试。但对于「线上环境」我们一般采用「全模块加载」,即直接引入 layui.all.js,它包含了 layui 所有的内置模块,且无需再通过 layui.use() 方法加载模块,直接调用即可。