layui项目如何进行模块化设计

538 阅读1分钟

一、layui.define | layui.config | layui.extend | layui.use


 1、layui.define  //模块定义(新 js 文件)
 
 layui.define([mods], function(exports){
 //……
 exports('mod', api);
 });

2、layui.config  //config的设置是全局的

 layui.config({
 base: '/res/js/' //假设这是你存放拓展模块的根目录
 }).extend({ //设定模块别名
 mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
 });
 
 3、layui.extend //我的理解是当拓展模块所在目录过长时,为了方便layui.use直接加载,不用写这么长的目录,这里就搞了一个别名
 
 //你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增)
 layui.extend({
 mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径,即不跟随 base 路径
 })
 
 4、layui.use
 //加载(使用)拓展模块
 layui.use(['mymod', 'mod1'], function(){
 var mymod = layui.mymod
 ,mod1 = layui.mod1
 ,mod2 = layui.mod2;
 mymod.hello('World!'); //弹出 Hello World!
 });

二、实战

001.png

000.jpg