layui自定义模块的使用总结
2019-11-28 本文已影响0人
菜菜___
一、自定义模块
首先创建一个myModule.js文件，它依赖layer模块,如下所示：
layui.define(['layer'],function(exports){
var layer = layui.layer;
function tellName(){
layer.msg('这是我的自定义模块1');
}
exports('myModule',function(){
return tellName
});
});
exports是一个函数，它接受两个参数，第一个参数为模块名，第二个参数为模块接口，当你声明了上述的一个模块后，你就可以在外部使用了。这里的myModule模块给外部的接口是一个匿名函数。而这个匿名函数返回值也是一个函数所以我们在调用myModule时候，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<!--您的Layui代码start-->
<script type="text/javascript">
layui.config({
base:'js/'//myModule.js所在目录
}).use(['form','myModule'], function(){
var Tab = layui.myModule;
Tab()();
});
</script>
</body>
</html>
二、exports的第二个参数模块接口是一个函数。
mymodule.js定义如下：
layui.define(['layer'],function(exports){
var layer = layui.layer;
function tellName(){
layer.msg('这是我的自定义模块1');
}
exports('myModule',tellName);
});
调用自定义模块：
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<!--您的Layui代码start-->
<script type="text/javascript">
layui.config({
base:'js/'//myModule.js所在目录
}).use(['form','element','myModule'], function(){
var Tab = layui.myModule;
Tab();
});
</script>
三、exports输出的模块接口是一个对象：
layui.define(['layer'],function(exports){
var layer = layui.layer;
var obj = {
name:'我的自定义模块2',
age:'18',
tellName:function(){
layer.msg(this.name);
}
}
exports('myModule',obj);
});
调用自定义模块：
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<!--您的Layui代码start-->
<script type="text/javascript">
layui.config({
base:'js/'//myModule.js所在目录
}).use(['form','element','myModule'], function(){
var Tab = layui.myModule;
Tab.tellName();
layer.msg(Tab.age)
});
</script>
tips:当自定义模块里引用了layer的时候，在调用页面无需重复引入，可直接使用。
