chore: 优化 component 接口扩展的方式等细节

src/modules/component.js

@@ -25,8 +25,8 @@ layui.define(['jquery', 'lay'], function(exports) {
 
     // 组件基础对外接口
     var component = {
-      config: settings.global || {},
+      config: {}, // 全局配置项，一般通过 component.set() 设置
-      index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
+      index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0, // 组件索引
 
       // 通用常量集，一般存放固定字符，如类名等
       CONST: $.extend(true, {
@@ -54,9 +54,6 @@ layui.define(['jquery', 'lay'], function(exports) {
       }
     };
 
-    // 扩展对外接口
-    $.extend(true, component, settings.exports);
-
     // 操作当前实例
     var instance = function() {
       var that = this;
@@ -74,9 +71,9 @@ layui.define(['jquery', 'lay'], function(exports) {
         }
       };
 
-      // 扩展实例对象
+      // 扩展实例对象的回调
-      if (typeof settings.inst === 'function') {
+      if (typeof settings.extendsInstance === 'function') {
-        $.extend(true, inst, settings.inst.call(that));
+        $.extend(true, inst, settings.extendsInstance.call(that));
       }
 
       // 返回实例对象
@@ -212,7 +209,12 @@ layui.define(['jquery', 'lay'], function(exports) {
     // 用于扩展原型
     component.Class = Class;
 
-    // 完整重载实例
+    /**
+     * 组件完整重载
+     * @param {string} id - 实例 id
+     * @param {Object} options - 配置项
+     * @returns
+     */
     component.reload = function(id, options) {
       var that = instance.getThis(id);
       if (!that) return;
@@ -233,7 +235,11 @@ layui.define(['jquery', 'lay'], function(exports) {
       if (!that) return;
     } */
 
-    // 核心入口
+    /**
+     * 组件渲染
+     * @param {Object} options - 配置项
+     * @returns
+     */
     component.render = function(options) {
       var inst = new Class(options);
       return instance.call(inst);

src/modules/tabs.js

@@ -150,73 +150,22 @@ layui.define('component', function(exports) {
         });
         inner.onresize = true;
       }
-    },
-
-    // 实例接口
-    inst: {},
-
-    // 扩展接口
-    exports: {
-      // 增加标签
-      add: function(id, obj) {
-        var that = component.getThis(id);
-        if(!that) return this;
-        that.add(obj);
-      },
-
-      // 关闭单个标签
-      close: function(id, index) {
-        var that = component.getThis(id);
-        if(!that) return this;
-        if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签
-        that.close(that.findHeaderItem(index));
-      },
-
-      // 关闭多个标签。若传 index，则按 index 所在标签为事件执行关闭操作
-      closeMore: function(id, type, index) {
-        var that = component.getThis(id);
-        if(!that) return this;
-        that.closeMore(type, index);
-      },
-
-      // 切换标签
-      change: function(id, index) {
-        var that = component.getThis(id);
-        if(!that) return this;
-        that.change(that.findHeaderItem(index));
-      },
-
-      // 获取标签信息
-      data: function(id) {
-        var that = component.getThis(id);
-        return that ? that.data() : {};
-      },
-
-      // 获取标签指定头部项
-      headerItem: function(id, index) {
-        var that = component.getThis(id);
-        return that ? that.findHeaderItem(index) : this;
-      },
-
-      // 获取标签指定头部项
-      bodyItem: function(id, index) {
-        var that = component.getThis(id);
-        return that ? that.findBodyItem(index) : this;
-      },
-
-      // 调整视图结构
-      setView: function(id) {
-        var that = component.getThis(id);
-        if (!that) return this;
-        that.roll('auto');
-      }
     }
   });
 
+  // 内部变量集
   var inner = {};
+
+  /**
+   * 扩展组件原型方法
+   */
+
   var Class = component.Class;
 
-  // 增加标签
+  /**
+   * 增加标签
+   * @param {*} obj
+   */
   Class.prototype.add = function(obj){
     var that = this;
     var options = that.config;
@@ -613,6 +562,63 @@ layui.define('component', function(exports) {
     }
   };
 
+  // 扩展组件接口
+  $.extend(component, {
+    // 增加标签
+    add: function(id, obj) {
+      var that = component.getThis(id);
+      if(!that) return this;
+      that.add(obj);
+    },
+
+    // 关闭单个标签
+    close: function(id, index) {
+      var that = component.getThis(id);
+      if(!that) return this;
+      if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签
+      that.close(that.findHeaderItem(index));
+    },
+
+    // 关闭多个标签。若传 index，则按 index 所在标签为事件执行关闭操作
+    closeMore: function(id, type, index) {
+      var that = component.getThis(id);
+      if(!that) return this;
+      that.closeMore(type, index);
+    },
+
+    // 切换标签
+    change: function(id, index) {
+      var that = component.getThis(id);
+      if(!that) return this;
+      that.change(that.findHeaderItem(index));
+    },
+
+    // 获取标签信息
+    data: function(id) {
+      var that = component.getThis(id);
+      return that ? that.data() : {};
+    },
+
+    // 获取标签指定头部项
+    headerItem: function(id, index) {
+      var that = component.getThis(id);
+      return that ? that.findHeaderItem(index) : this;
+    },
+
+    // 获取标签指定头部项
+    bodyItem: function(id, index) {
+      var that = component.getThis(id);
+      return that ? that.findBodyItem(index) : this;
+    },
+
+    // 调整视图结构
+    setView: function(id) {
+      var that = component.getThis(id);
+      if (!that) return this;
+      that.roll('auto');
+    }
+  });
+
   // 初始化渲染
   $(function() {
     component.render();