深圳全飞鸿

标题: Layui模块的扩展 [打印本页]
作者: zhgc    时间: 2023-3-30 00:03
标题: Layui模块的扩展
在使用layui的时候，总有官方自带模块不够用想自己扩展的时候，这时候我们就需要扩展模块了。
模块扩展有两种：
　　（一）普通地扩展
  1. layui.define( function (exports) {

  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. });

  8. layui.use('key', function() {
  9.     var key  = layui.key;   

  11.     ...    //方法内容
  12. });
复制代码
即可使用扩展模块中的方法了

扩展模块xx.js的完整代码
  1. /**
  2. * layui的扩展模块xx.js
  3. */

  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. });
复制代码






欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2