引入
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js">
本地使用
<!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="./layui/css/layui.css">
</head>
<body>
<!-- 你的 HTML 代码 -->
<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
layui 模块的定义(新js)
新的js文件定义
//layui 模块的定义(新 js 文件)
layui.define([mods], function(exports){
//……
exports('mod', api);
});
模块使用
在需要使用的html页面使用
//layui 模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
//……
});
建立模块入口
- 遵循layui模块规范建立
<!-- 你引入的 layui.js 建议是通过官网首页下载的。当然也可以由 github 或 gitee clone -->
<script src="./layui/layui.js"></script>
<script>
layui.config({
base: '/res/js/modules/' //你存放新模块的目录,注意,不是 layui 的模块目录
}).use('index'); //加载入口
</script>
上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下
/**
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 2.6 开始,如果你引入的是构建后的 layui.js,里面即包含了 layui 所有的内置模块,无需再指定内置模块。
/**
index.js 项目 JS 主入口
**/
layui.define(function(){ // 需确保您的 layui.js 是引入的构建后的版本(即官网下载或 git 平台的发行版)
//直接可得到各种内置模块
var layer = layui.layer
,form = layui.form
,table = layui.table;
//…
layer.msg('Hello World');
exports('index', {}); //注意,这里是模块输出的核心,模块名必须和 use 时的模块名一致
});
管理扩展模块
//mod1.js
layui.define('layer', function(exports){
//…
exports(mod1, {});
});
//mod2.js,假设依赖 mod1 和 form
layui.define(['mod1', 'form'], function(exports){
//…
exports(mod2, {});
});
//mod3.js
//…
//main.js 主入口模块
layui.define('mod2', function(exports){
//…
exports('main', {});
});
- 上述扩展模块在经过了一定的模块依赖关系后,同样可以合并为一个文件来加载。我们可以借助 Gulp 将上述的 mod1、mod2、mod3、main 等扩展模块构建合并到一个模块文件中:main.js,此时你只需要加载它即可:
<script src="./layui/layui.js"></script>
<script>
layui.config({
base: '/res/js/modules/' //你的扩展模块所在目录
}).use('main'); //这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块
</script>
- 最多只需要加载两个 JS 文件:layui.js、main.js。这将大幅度减少静态资源的请求