最近公司的后台管理系统,我选用了layui来开发:
一,自定义模块部分
首先我们自定义一个bodyTab模块bodyTab.js:它依赖Jquery和element模块:
layui.define(['element','jquery'],function(exports){ var el = layui.element; var $ = layui.$; function tellName(){ alert('以冬'); } exports('bodyTab',function(){ return tellName }); });
,exports是一个函数,它接受两个参数,第一个参数为模块名,第二个参数为模块接口,当你声明了上述的一个模块后,你就可以在外部使用了。这里的bodyTab模块给外部
的接口是一个匿名函数。而这个匿名函数返回值也是一个函数所以我们在调用bodyTab时候,如下:
<script src="./layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.config({ base:'./static/js/' }); layui.use(['form','element','bodyTab'], function(){ var Tab = layui.bodyTab; Tab()();
});
</script>
二,exports模块接口是一个函数:
layui.define(['element','jquery'],function(exports){ var el = layui.element; var $ = layui.$; function tellName(){ alert('以冬'); } exports('bodyTab',tellName); });
调用:
<script src="./layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.config({ base:'./static/js/' }); layui.use(['form','element','bodyTab'], function(){ var Tab = layui.bodyTab; Tab(); });
三,exports输出的模块接口是一个对象:
layui.define(['element','jquery'],function(exports){ var el = layui.element; var $ = layui.$; var obj = { name:'我的一个道姑朋友', age:'18', tellName:function(){ alert(this.name); } }; exports('bodyTab',obj); });
调用如下:
<script src="./layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.config({ base:'./static/js/' }); layui.use(['form','element','bodyTab'], function(){ var Tab = layui.bodyTab; Tab.tellName(); alert(Tab.age); }); </script>