标签 扩展 下的文章

如何扩展 layui 模块

layui 官方提供的模块有时可能还无法满足你,或者你试图按照 layui 的模块规范来扩展一个模块。那么你有必要认识layui.define() 方法。下面就让我们一起扩展一个 layui 模块吧:

第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:可以不用放入layui目录,当然如果你非要放也是可以的),我把 mymod.js 放置于 /public/static/js/module/ 目录下;

第二步:编辑mymod.js的内容,假设是下面这样

/**
  扩展一个 mymod 模块
**/      
 
layui.define(function(exports){ // 提示:模块也可以依赖其它模块,如:layui.define(['layer', 'form'], callback);
  var obj = {
    hello: function(str){
      alert('Hello ' + (str || 'mymod'));
    }
  };
  
  // 输出 mymod 接口
  exports('mymod', obj);
});

第三步:在需要使用到该拓展模块的页面(比如 index.html),通过以下方法调用

layui.config({
    base: '/public/static/js/module/'  // 这是你存放拓展模块的根目录
  }).extend({
    mymod: 'mymod' // 如果 mymod.js 是在根目录,也可以不用设定别名

    // 假如你在 module 目录下有个子目录 test,里面有一个 mod1.js 文件(除exports语句,其他内容和mymod.js一致),而且执行了 exports('mod1', callback),那么这里可以扩展一个别名
    ,mod1 = 'test/mod1'
  });

layui.use(['element', 'mymod', 'mod1'], function(){
  var element = layui.element
  ,mymod = layui.mymod
  ,mod1 = layui.mod1;

  mymod.hello('World!');
  mod1.hello();

});