feat: 新增 component.removeInst() 基础方法，用于移除缓存中的组件实例 (#2597)

docs/component/index.md

@@ -61,7 +61,8 @@ layui.define('component', function(exports) {
 | [component.reload(id, options)](#reload) | 组件重载 |
 | [component.set(options)](#set) | 设置组件渲染时的全局配置项 |
 | [component.on(\'event(filter)\', callback)](#on) | 组件的自定义事件 |
-| [component.getThis(id)](#getThis) | 获取指定组件的实例对象 |
+| [component.getInst(id)](#getInst) | 获取组件指定的实例对象 |
+| [component.removeInst(id)](#removeInst) <sup>2.10.2+</sup> | 删除组件指定的实例对象 |
 | component.index | 获得组件的自增索引 |
 | component.config | 获得组件渲染时的全局配置项。一般通过 `set` 方法设置 |
 | component.cache | 获得组件的缓存数据集。如组件实例 ID 集 |
@@ -153,9 +154,9 @@ tabs.on('afterRender(id)', function(data) {
 });
 ```
 
-<h3 id="getThis" lay-toc="{level: 2}">获取实例</h3>
+<h3 id="getInst" lay-toc="{level: 2}">获取实例</h3>
 
-`component.getThis(id)`
+`component.getInst(id)`
 
 - 参数 `id` : 组件的实例 ID。
 
@@ -163,11 +164,24 @@ tabs.on('afterRender(id)', function(data) {
 
 ```js
 // 以 tabs 组件为例
-var tabInstance = tabs.getThis('id');
+var tabInstance = tabs.getInst('id');
 // 调用内部的标签滚动方法
 tabInstance.roll();
 ```
 
+<h3 id="removeInst" lay-toc="{level: 2}">删除实例 <sup>2.10.2+</sup></h3>
+
+`component.removeInst(id)`
+
+- 参数 `id` : 组件的实例 ID。
+
+该方法可删除组件渲染时对应的实例，*一般在完全移除组件时使用，否则可能造成组件相关方法失效*。
+
+```js
+// 以 tabs 组件为例
+tabs.removeInst('id');
+```
+
 <h3 id="CONST" lay-toc="{level: 2}">基础常量</h3>
 
 `component.CONST`
@@ -207,7 +221,7 @@ layui.define('component', function(exports) {
   layui.$.extend(component, {
     // 以扩展一个关闭组件面板的接口为例
     close: function(id) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       if(!that) return this;
       that.remove(obj); // 调用原型中的 remove 方法
     }

src/modules/component.js

@@ -133,7 +133,7 @@ layui.define(['jquery', 'lay'], function(exports) {
 
       // 若重复执行 render，则视为 reload 处理
       if (!rerender && elem.attr(MOD_ID)) {
-        var newThat = instance.getThis(elem.attr(MOD_ID));
+        var newThat = component.getInst(elem.attr(MOD_ID));
         if (!newThat) return;
         return newThat.reload(options, type);
       }
@@ -214,16 +214,26 @@ layui.define(['jquery', 'lay'], function(exports) {
     };
 
     // 缓存所有实例对象
-    instance.that = {};
+   instance.that = {};
 
-    // 获取当前实例对象
-    instance.getThis = component.getThis = function(id) {
+    // 获取指定的实例对象
+    component.getInst = component.getThis = function(id) {
       if (id === undefined) {
         throw new Error('ID argument required');
       }
       return instance.that[id];
     };
 
+    // 获取所有实例
+    component.getAllInst = function() {
+      return instance.that;
+    };
+
+    // 移除指定的实例对象
+    component.removeInst = function(id) {
+      delete instance.that[id];
+    };
+
     // 组件缓存
     component.cache = {
       id: {}
@@ -239,7 +249,7 @@ layui.define(['jquery', 'lay'], function(exports) {
      * @returns
      */
     component.reload = function(id, options) {
-      var that = instance.getThis(id);
+      var that = component.getInst(id);
       if (!that) return;
 
       that.reload(options);

src/modules/tabs.js

@@ -145,7 +145,7 @@ layui.define('component', function(exports) {
           clearTimeout(timer);
           timer = setTimeout(function(){
             layui.each(component.cache.id, function(key) {
-              var that = component.getThis(key);
+              var that = component.getInst(key);
               if(!that) return;
               that.roll('init');
             });
@@ -694,7 +694,7 @@ layui.define('component', function(exports) {
      * @param {Object} opts - 添加标签的配置项，详见 Class.prototype.add
      */
     add: function(id, opts) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       if(!that) return;
       that.add(opts);
     },
@@ -706,7 +706,7 @@ layui.define('component', function(exports) {
      * @param {boolean} [force=false] - 是否强制关闭
      */
     close: function(id, index, force) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       if(!that) return;
       if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签
       that.close(that.findHeaderItem(index), force);
@@ -719,7 +719,7 @@ layui.define('component', function(exports) {
      * @param {number} index - 活动标签的索引，默认取当前选中标签的索引。一般用于标签右键事件
      */
     closeMult: function(id, mode, index, force) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       if(!that) return;
       that.closeMult(mode, index, force);
     },
@@ -730,7 +730,7 @@ layui.define('component', function(exports) {
      * @param {number} index - 标签索引
      */
     change: function(id, index, force) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       if(!that) return;
       that.change(that.findHeaderItem(index), force);
     },
@@ -740,7 +740,7 @@ layui.define('component', function(exports) {
      * @param {string} id - 渲染时的实例 ID
      */
     data: function(id) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       return that ? that.data() : {};
     },
 
@@ -751,7 +751,7 @@ layui.define('component', function(exports) {
      * @returns
      */
     getHeaderItem: function(id, index) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       if(!that) return;
       return that.findHeaderItem(index);
     },
@@ -763,7 +763,7 @@ layui.define('component', function(exports) {
      * @returns
      */
     getBodyItem: function(id, index) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       if(!that) return;
       return that.findBodyItem(index);
     },
@@ -773,7 +773,7 @@ layui.define('component', function(exports) {
      * @param {string} id - 渲染时的实例 ID
      */
     refresh: function(id) {
-      var that = component.getThis(id);
+      var that = component.getInst(id);
       if (!that) return;
       that.roll('auto');
     }