Layui模块的扩展

zhgc

在使用layui的时候，总有官方自带模块不够用想自己扩展的时候，这时候我们就需要扩展模块了。

模块扩展有两种：

　　（一）普通地扩展

1. layui.define( function (exports) {
   
2. 
   
3. });

复制代码

　（二）依赖其他模块扩展

1. layui.define( [ 'xxx', 'xxx', 'xxx' ], function (exports) {　　
   
2.       // xxx代表其他模块的名称，例如 'jquery', 'layer'
   
3. });   

复制代码

当我们想定义模块中的方法时，可以使用以下代码：

1. var object = {
   
2.      f1 : function (obj) {    //方法1
   
3.          ...
   
4.      }
   
5.      , f2 : function (obj) {    //方法2
   
6.          ...
   
7.      }
   
8. };

复制代码

在结束的时候需要加上：

1. //exports('key', value);
   
2. //key是该扩展模块的名字，模块名必须和layui.use时的模块名一致
   
3. //通过layui.key来获取该模块，例：var func = layui.key;
   
4. //value须与该模块内定义的对象名一致，此处为object
   
5. exports('key', object);  //输出接口

复制代码

做完以上步骤后就可以在别的JS文件中使用了，

使用时输入以下代码：

1. layui.config({
   
2.     base: '...'    //设置模块的根目录
   
3. }).extend({
   
4.     key : 'xx'    //当扩展的模块xx.js存放于base设置的根目录，也可以不用设置别名
   
5.     //key: '../../..'    //当扩展模块xx.js存放于根目录下的子目录中时这样写
   
6. });
   
7. 
   
8. layui.use('key', function() {
   
9.     var key  = layui.key;   
   
10. 
    
11.     ...    //方法内容
    
12. });

复制代码

即可使用扩展模块中的方法了

扩展模块xx.js的完整代码

1. /**
   
2. * layui的扩展模块xx.js
   
3. */
   
4. 
   
5. layui.define(function (exports) {
   
6.        var object = {
   
7.             f1: function (obj) {
   
8.                 ...
   
9.             }
   
10.             , f2: function (obj) {
    
11.                 ...
    
12.             }
    
13.         };
    
14.     exports('key', object);
    
15. });

复制代码