refactor(transfer): 使用 component 模块重构组件 (#2862)

docs/transfer/index.md

@@ -2,7 +2,7 @@
 title: 穿梭框组件 transfer
 toc: true
 ---
- 
+
 # 穿梭框组件
 
 > 穿梭框组件 `transfer` 以左右栏 `checkbox` 列表为表现形式，可对列表进行选择并移动到另一栏。
@@ -18,10 +18,10 @@ toc: true
 | API | 描述 |
 | --- | --- |
 | var transfer = layui.transfer | 获得 `transfer` 模块。 |
+| [基础接口](../component/#export) <sup>2.13+</sup> | 该组件由 `component` 构建，因此继承其提供的基础接口。|
 | [transfer.render(options)](#render) | transfer 组件渲染，核心方法。 |
 | [transfer.reload(id, options)](#reload) | 重载实例 |
 | [transfer.getData(id)](#getData) | 获得右侧数据 |
-| [transfer.set(options)](#set) | 设定全局默认属性 |
 
 <h3 id="render" lay-toc="{level: 2}">渲染</h3>
 
@@ -83,20 +83,3 @@ transfer.render({
 // 获得右侧数据
 var getData = transfer.getData('test');
 ```
-
-
-<h3 id="set" lay-pid="api" class="ws-anchor ws-bold">设置全局默认属性</h3>
-
-`transfer.set(options);`
-
-- 参数 `options` : 基础属性选项。[#详见属性](#options)
-
-该方法对所有的 `transfer` 实例有效，设置的属性优先级低于 `transfer.render(options)`
-
-```
-// 设置 transfer 全局默认属性
-transfer.set({
-  height: 'auto', // 所有穿梭框默认高度为自动
-  // …
-});
-```

src/modules/transfer.js

@@ -1,203 +1,161 @@
 /**
- * transfer 穿梭框组件
+ * transfer
+ * 穿梭框组件
  */
 
-layui.define(['i18n', 'laytpl', 'form'], function(exports) {
+layui.define(['i18n', 'laytpl', 'component', 'form'], function(exports) {
   "use strict";
 
-  var $ = layui.$;
-  var laytpl = layui.laytpl;
-  var form = layui.form;
   var i18n = layui.i18n;
+  var laytpl = layui.laytpl;
+  var $ = layui.$;
+  var form = layui.form;
 
-  // 模块名
-  var MOD_NAME = 'transfer';
+  var component = layui.component({
+    name: 'transfer',
 
-  // 外部接口
-  var transfer = {
-    config: {},
-    index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
-
-    // 设置全局项
-    set: function(options) {
-      var that = this;
-      that.config = $.extend({}, that.config, options);
-      return that;
+    // 默认配置
+    config: {
+      width: 200,
+      height: 360,
+      data: [], // 数据源
+      value: [], // 选中的数据
+      showSearch: false, // 是否开启搜索
+      id: '', // 唯一索引，默认自增 index
     },
 
-    // 事件
-    on: function(events, callback) {
-      return layui.onevent.call(this, MOD_NAME, events, callback);
-    }
-  };
+    CONST: {
+      ELEM: 'layui-transfer',
+      ELEM_BOX: 'layui-transfer-box',
+      ELEM_HEADER: 'layui-transfer-header',
+      ELEM_SEARCH: 'layui-transfer-search',
+      ELEM_ACTIVE: 'layui-transfer-active',
+      ELEM_DATA: 'layui-transfer-data',
+      BTN_DISABLED: 'layui-btn-disabled'
+    },
 
-  // 操作当前实例
-  var thisModule = function(){
-    var that = this;
-    var options = that.config;
-    var id = options.id || that.index;
-
-    thisModule.that[id] = that; // 记录当前实例对象
-    thisModule.config[id] = options; // 记录当前实例配置项
-
-    return {
-      config: options,
-      // 重置实例
-      reload: function(options){
-        that.reload.call(that, options);
-      },
-      // 获取右侧数据
-      getData: function(){
-        return that.getData.call(that);
-      }
-    }
-  };
-
-  // 获取当前实例配置项
-  var getThisModuleConfig = function(id){
-    var config = thisModule.config[id];
-    if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance');
-    return config || null;
-  };
-
-  // 字符常量
-  var ELEM = 'layui-transfer';
-  var HIDE = 'layui-hide';
-  var DISABLED = 'layui-btn-disabled';
-  var NONE = 'layui-none';
-  var ELEM_BOX = 'layui-transfer-box';
-  var ELEM_HEADER = 'layui-transfer-header';
-  var ELEM_SEARCH = 'layui-transfer-search';
-  var ELEM_ACTIVE = 'layui-transfer-active';
-  var ELEM_DATA = 'layui-transfer-data';
-
-  // 穿梭框模板
-  var TPL_BOX = function(obj) {
-    obj = obj || {};
-    return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">',
-      '<div class="layui-transfer-header">',
-        '<input type="checkbox" name="'+ obj.checkAllName +'" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{= d.data.title['+ obj.index +'] || \'list'+ (obj.index + 1) +'\' }}">',
-      '</div>',
-      '{{# if(d.data.showSearch){ }}',
-      '<div class="layui-transfer-search">',
-        '<i class="layui-icon layui-icon-search"></i>',
-        '<input type="text" class="layui-input" placeholder="'+ i18n.$t('transfer.searchPlaceholder') +'">',
-      '</div>',
-      '{{# } }}',
-      '<ul class="layui-transfer-data"></ul>',
-    '</div>'].join('');
-  };
-
-  // 构造器
-  var Class = function(options) {
-    var that = this;
-    that.index = ++transfer.index;
-    that.config = $.extend({
-      title: i18n.$t('transfer.title'),
-      text: {
-        none: i18n.$t('transfer.noData'),
-        searchNone: i18n.$t('transfer.noMatch')
-      }
-    }, that.config, transfer.config, options);
-    that.render();
-  };
-
-  // 默认配置
-  Class.prototype.config = {
-    width: 200,
-    height: 360,
-    data: [], // 数据源
-    value: [], // 选中的数据
-    showSearch: false, // 是否开启搜索
-    id: '', // 唯一索引，默认自增 index
-  };
-
-  // 重载实例
-  Class.prototype.reload = function(options){
-    var that = this;
-    that.config = $.extend({}, that.config, options);
-    that.render();
-  };
-
-  // 渲染
-  Class.prototype.render = function(){
-    var that = this;
-    var options = that.config;
-
-    // 主模板
-    var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{= d.index }}">',
-      TPL_BOX({
-        index: 0,
-        checkAllName: 'layTransferLeftCheckAll'
-      }),
-      '<div class="layui-transfer-active">',
-        '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">',
-          '<i class="layui-icon layui-icon-next"></i>',
-        '</button>',
-        '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">',
-          '<i class="layui-icon layui-icon-prev"></i>',
-        '</button>',
-      '</div>',
-      TPL_BOX({
-        index: 1,
-        checkAllName: 'layTransferRightCheckAll'
-      }),
-    '</div>'].join('');
-
-    // 解析模板
-    var thisElem = that.elem = $(laytpl(TPL_MAIN, {
-      open: '{{', // 标签符前缀
-      close: '}}', // 标签符后缀
-      tagStyle: 'legacy'
-    }).render({
-      data: options,
-      index: that.index // 索引
-    }));
-
-    var othis = options.elem = $(options.elem);
-    if(!othis[0]) return;
-
-    // 初始化属性
-    options.data = options.data || [];
-    options.value = options.value || [];
-
-    // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
-    options.id = 'id' in options ? options.id : (
-      elem.attr('id') || that.index
-    );
-    that.key = options.id;
-
-    // 插入组件结构
-    othis.html(that.elem);
-
-    // 各级容器
-    that.layBox = that.elem.find('.'+ ELEM_BOX)
-    that.layHeader = that.elem.find('.'+ ELEM_HEADER)
-    that.laySearch = that.elem.find('.'+ ELEM_SEARCH)
-    that.layData = thisElem.find('.'+ ELEM_DATA);
-    that.layBtn = thisElem.find('.'+ ELEM_ACTIVE + ' .layui-btn');
-
-    // 初始化尺寸
-    that.layBox.css({
-      width: options.width,
-      height: options.height
-    });
-    that.layData.css({
-      height: function(){
-        var height = options.height - that.layHeader.outerHeight();
-        if(options.showSearch){
-          height -= that.laySearch.outerHeight();
+    beforeRender: function(options) {
+      var that = this;
+      that.config = $.extend({
+        title: i18n.$t('transfer.title'),
+        text: {
+          none: i18n.$t('transfer.noData'),
+          searchNone: i18n.$t('transfer.noMatch')
         }
-        return height - 2;
-      }()
-    });
+      }, that.config, options);
+    },
 
-    that.renderData(); // 渲染数据
-    that.events(); // 事件
-  };
+    // 渲染
+    render: function() {
+      var that = this;
+      var options = that.config;
+
+      // 穿梭框模板
+      var TPL_BOX = function(obj) {
+        obj = obj || {};
+        return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">',
+          '<div class="layui-transfer-header">',
+            '<input type="checkbox" name="'+ obj.checkAllName +'" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{= d.data.title['+ obj.index +'] || \'list'+ (obj.index + 1) +'\' }}">',
+          '</div>',
+          '{{ if(d.data.showSearch){ }}',
+          '<div class="layui-transfer-search">',
+            '<i class="layui-icon layui-icon-search"></i>',
+            '<input type="text" class="layui-input" placeholder="'+ i18n.$t('transfer.searchPlaceholder') +'">',
+          '</div>',
+          '{{ } }}',
+          '<ul class="layui-transfer-data"></ul>',
+        '</div>'].join('');
+      };
+
+      // 主模板
+      var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{= d.index }}">',
+        TPL_BOX({
+          index: 0,
+          checkAllName: 'layTransferLeftCheckAll'
+        }),
+        '<div class="layui-transfer-active">',
+          '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">',
+            '<i class="layui-icon layui-icon-next"></i>',
+          '</button>',
+          '<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">',
+            '<i class="layui-icon layui-icon-prev"></i>',
+          '</button>',
+        '</div>',
+        TPL_BOX({
+          index: 1,
+          checkAllName: 'layTransferRightCheckAll'
+        }),
+      '</div>'].join('');
+
+      // 解析模板
+      var thisElem = that.elem = $(laytpl(TPL_MAIN, {
+        open: '{{', // 标签符前缀
+        close: '}}', // 标签符后缀
+        tagStyle: 'modern'
+      }).render({
+        data: options,
+        index: that.index // 索引
+      }));
+
+      var othis = options.elem;
+      if (!othis[0]) return;
+
+      // 初始化属性
+      options.data = options.data || [];
+      options.value = options.value || [];
+
+      // 插入组件结构
+      othis.html(that.elem);
+
+      // 各级容器
+      that.layBox = that.elem.find('.'+ CONST.ELEM_BOX)
+      that.layHeader = that.elem.find('.'+ CONST.ELEM_HEADER)
+      that.laySearch = that.elem.find('.'+ CONST.ELEM_SEARCH)
+      that.layData = thisElem.find('.'+ CONST.ELEM_DATA);
+      that.layBtn = thisElem.find('.'+ CONST.ELEM_ACTIVE + ' .layui-btn');
+
+      // 初始化尺寸
+      that.layBox.css({
+        width: options.width,
+        height: options.height
+      });
+      that.layData.css({
+        height: function() {
+          var height = options.height - that.layHeader.outerHeight();
+          if(options.showSearch){
+            height -= that.laySearch.outerHeight();
+          }
+          return height - 2;
+        }()
+      });
+
+      that.renderData(); // 渲染数据
+      that.events(); // 事件
+    },
+
+    // 扩展实例方法
+    extendsInstance: function() {
+      var that = this;
+      var options = that.config;
+      return {
+        // 获取右侧数据
+        getData: function() {
+          return that.getData.call(that);
+        }
+      };
+    }
+  });
+
+  var CONST = component.CONST;
+
+  /**
+   * 扩展组件原型方法
+   */
+
+  var Class = component.Class;
 
   // 渲染数据
-  Class.prototype.renderData = function(){
+  Class.prototype.renderData = function() {
     var that = this;
     var options = that.config;
 
@@ -211,7 +169,7 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
     }];
 
     // 解析格式
-    that.parseData(function(item){
+    that.parseData(function(item) {
       // 标注为 selected 的为右边的数据
       var _index = item.selected ? 1 : 0
       var listElem = ['<li>',
@@ -219,8 +177,8 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
       '</li>'].join('');
       // 按照 options.value 顺序排列右侧数据
       if(_index){
-        layui.each(options.value, function(i, v){
-          if(v == item.value && item.selected){
+        layui.each(options.value, function(i, v) {
+          if (v == item.value && item.selected) {
             arr[_index].views[i] = listElem;
           }
         });
@@ -237,28 +195,28 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
   };
 
   // 渲染表单
-  Class.prototype.renderForm = function(type){
+  Class.prototype.renderForm = function(type) {
     form.render(type, 'LAY-transfer-'+ this.index);
   };
 
   // 同步复选框和按钮状态
-  Class.prototype.renderCheckBtn = function(obj){
+  Class.prototype.renderCheckBtn = function(obj) {
     var that = this;
     var options = that.config;
 
     obj = obj || {};
 
-    that.layBox.each(function(_index){
+    that.layBox.each(function(_index) {
       var othis = $(this);
-      var thisDataElem = othis.find('.'+ ELEM_DATA);
-      var allElemCheckbox = othis.find('.'+ ELEM_HEADER).find('input[type="checkbox"]');
+      var thisDataElem = othis.find('.'+ CONST.ELEM_DATA);
+      var allElemCheckbox = othis.find('.'+ CONST.ELEM_HEADER).find('input[type="checkbox"]');
       var listElemCheckbox =  thisDataElem.find('input[type="checkbox"]');
 
       // 同步复选框和按钮状态
       var nums = 0;
       var haveChecked = false;
 
-      listElemCheckbox.each(function(){
+      listElemCheckbox.each(function() {
         var isHide = $(this).data('hide');
         if(this.checked || this.disabled || isHide){
           nums++;
@@ -269,11 +227,11 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
       });
 
       allElemCheckbox.prop('checked', haveChecked && nums === listElemCheckbox.length); // 全选复选框状态
-      that.layBtn.eq(_index)[haveChecked ? 'removeClass' : 'addClass'](DISABLED); // 对应的按钮状态
+      that.layBtn.eq(_index)[haveChecked ? 'removeClass' : 'addClass'](CONST.BTN_DISABLED); // 对应的按钮状态
 
       // 无数据视图
-      if(!obj.stopNone){
-        var isNone = thisDataElem.children('li:not(.'+ HIDE +')').length
+      if (!obj.stopNone) {
+        var isNone = thisDataElem.children('li:not(.'+ CONST.CLASS_HIDE +')').length
         that.noneView(thisDataElem, isNone ? '' : options.text.none);
       }
     });
@@ -282,21 +240,21 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
   };
 
   // 无数据视图
-  Class.prototype.noneView = function(thisDataElem, text){
+  Class.prototype.noneView = function(thisDataElem, text) {
     var createNoneElem = $('<p class="layui-none">'+ (text || '') +'</p>');
-    if(thisDataElem.find('.'+ NONE)[0]){
-      thisDataElem.find('.'+ NONE).remove();
+    if (thisDataElem.find('.'+ CONST.CLASS_NONE)[0]) {
+      thisDataElem.find('.'+ CONST.CLASS_NONE).remove();
     }
     text.replace(/\s/g, '') && thisDataElem.append(createNoneElem);
   };
 
   // 同步 value 属性值
-  Class.prototype.setValue = function(){
+  Class.prototype.setValue = function() {
     var that = this;
     var options = that.config;
     var arr = [];
 
-    that.layBox.eq(1).find('.'+ ELEM_DATA +' input[type="checkbox"]').each(function(){
+    that.layBox.eq(1).find('.'+ CONST.ELEM_DATA +' input[type="checkbox"]').each(function() {
       var isHide = $(this).data('hide');
       isHide || arr.push(this.value);
     });
@@ -306,12 +264,12 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
   };
 
   // 解析数据
-  Class.prototype.parseData = function(callback){
+  Class.prototype.parseData = function(callback) {
     var that = this;
     var options = that.config;
     var newData = [];
 
-    layui.each(options.data, function(index, item){
+    layui.each(options.data, function(index, item) {
       // 解析格式
       item = (typeof options.parseData === 'function'
         ? options.parseData(item)
@@ -332,15 +290,15 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
   };
 
   // 获得右侧面板数据
-  Class.prototype.getData = function(value){
+  Class.prototype.getData = function(value) {
     var that = this;
     var options = that.config;
     var selectedData = [];
 
     that.setValue();
 
-    layui.each(value || options.value, function(index, item){
-      layui.each(options.data, function(index2, item2){
+    layui.each(value || options.value, function(index, item) {
+      layui.each(options.data, function(index2, item2) {
         delete item2.selected;
         if(item == item2.value){
           selectedData.push(item2);
@@ -359,18 +317,18 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
 
     if (!elem) {
       // 通过按钮触发找到选中的进行移动
-      thisBoxElem.each(function(_index){
+      thisBoxElem.each(function(_index) {
         var othis = $(this);
-        var thisDataElem = othis.find('.'+ ELEM_DATA);
+        var thisDataElem = othis.find('.'+ CONST.ELEM_DATA);
 
-        thisDataElem.children('li').each(function(){
+        thisDataElem.children('li').each(function() {
           var thisList = $(this);
           var thisElemCheckbox = thisList.find('input[type="checkbox"]');
           var isHide = thisElemCheckbox.data('hide');
 
           if(thisElemCheckbox[0].checked && !isHide){
             thisElemCheckbox[0].checked = false;
-            thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
+            thisBoxElem.siblings('.'+ CONST.ELEM_BOX).find('.'+ CONST.ELEM_DATA).append(thisList.clone());
             thisList.remove();
 
             // 记录当前穿梭的数据
@@ -386,7 +344,7 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
       var thisElemCheckbox = thisList.find('input[type="checkbox"]');
 
       thisElemCheckbox[0].checked = false;
-      thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
+      thisBoxElem.siblings('.'+ CONST.ELEM_BOX).find('.'+ CONST.ELEM_DATA).append(thisList.clone());
       thisList.remove();
 
       // 记录当前穿梭的数据
@@ -398,7 +356,7 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
     that.renderCheckBtn();
 
     // 穿梭时，如果另外一个框正在搜索，则触发匹配
-    var siblingInput = thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_SEARCH +' input')
+    var siblingInput = thisBoxElem.siblings('.'+ CONST.ELEM_BOX).find('.'+ CONST.ELEM_SEARCH +' input')
     siblingInput.val() === '' ||  siblingInput.trigger('keyup');
 
     // 穿梭时的回调
@@ -406,21 +364,21 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
   }
 
   // 事件
-  Class.prototype.events = function(){
+  Class.prototype.events = function() {
     var that = this;
     var options = that.config;
 
     // 左右复选框
-    that.elem.on('click', 'input[lay-filter="layTransferCheckbox"]+', function(){
+    that.elem.on('click', 'input[lay-filter="layTransferCheckbox"]+', function() {
       var thisElemCheckbox = $(this).prev();
       var checked = thisElemCheckbox[0].checked;
-      var thisDataElem = thisElemCheckbox.parents('.'+ ELEM_BOX).eq(0).find('.'+ ELEM_DATA);
+      var thisDataElem = thisElemCheckbox.parents('.'+ CONST.ELEM_BOX).eq(0).find('.'+ CONST.ELEM_DATA);
 
-      if(thisElemCheckbox[0].disabled) return;
+      if (thisElemCheckbox[0].disabled) return;
 
       // 判断是否全选
-      if(thisElemCheckbox.attr('lay-type') === 'all'){
-        thisDataElem.find('input[type="checkbox"]').each(function(){
+      if (thisElemCheckbox.attr('lay-type') === 'all') {
+        thisDataElem.find('input[type="checkbox"]').each(function() {
           if(this.disabled) return;
           this.checked = checked;
         });
@@ -432,14 +390,14 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
     });
 
     // 双击穿梭
-    that.elem.on('dblclick', '.' + ELEM_DATA + '>li', function(event){
+    that.elem.on('dblclick', '.' + CONST.ELEM_DATA + '>li', function(event) {
       var elemThis = $(this);
       var thisElemCheckbox = elemThis.children('input[type="checkbox"]');
       var thisDataElem = elemThis.parent();
       var thisBoxElem = thisDataElem.parent();
       var index = thisBoxElem.data('index');
 
-      if(thisElemCheckbox[0].disabled) return;
+      if (thisElemCheckbox[0].disabled) return;
 
       // 根据 dblclick 回调函数返回值决定是否执行穿梭 --- 2.9.3+
       var ret = typeof options.dblclick === 'function' ? options.dblclick({
@@ -448,74 +406,60 @@ layui.define(['i18n', 'laytpl', 'form'], function(exports) {
         index: index
       }) : null;
 
-      if(ret === false) return;
+      if (ret === false) return;
 
       that.transfer(index, elemThis);
     })
 
     // 穿梭按钮事件
-    that.layBtn.on('click', function(){
+    that.layBtn.on('click', function() {
       var othis = $(this);
       var _index = othis.data('index');
 
-      if(othis.hasClass(DISABLED)) return;
+      if (othis.hasClass(CONST.BTN_DISABLED)) return;
       that.transfer(_index);
     });
 
     // 搜索
-    that.laySearch.find('input').on('keyup', function(){
+    that.laySearch.find('input').on('keyup', function() {
       var value = this.value;
-      var thisDataElem = $(this).parents('.'+ ELEM_SEARCH).eq(0).siblings('.'+ ELEM_DATA);
+      var thisDataElem = $(this).parents('.'+ CONST.ELEM_SEARCH).eq(0).siblings('.'+ CONST.ELEM_DATA);
       var thisListElem = thisDataElem.children('li');
 
-      thisListElem.each(function(){
+      thisListElem.each(function() {
         var thisList = $(this);
         var thisElemCheckbox = thisList.find('input[type="checkbox"]');
         var title = thisElemCheckbox[0].title;
 
         // 是否区分大小写
-        if(options.showSearch !== 'cs'){
+        if (options.showSearch !== 'cs') {
           title = title.toLowerCase();
           value = value.toLowerCase();
         }
 
         var isMatch = title.indexOf(value) !== -1;
 
-        thisList[isMatch ? 'removeClass': 'addClass'](HIDE);
+        thisList[isMatch ? 'removeClass': 'addClass'](CONST.CLASS_HIDE);
         thisElemCheckbox.data('hide', isMatch ? false : true);
       });
 
       that.renderCheckBtn();
 
       // 无匹配数据视图
-      var isNone = thisListElem.length === thisDataElem.children('li.'+ HIDE).length;
+      var isNone = thisListElem.length === thisDataElem.children('li.'+ CONST.CLASS_HIDE).length;
       that.noneView(thisDataElem, isNone ? options.text.searchNone : '');
     });
   };
 
-  // 记录所有实例
-  thisModule.that = {}; // 记录所有实例对象
-  thisModule.config = {}; // 记录所有实例配置项
+  // 扩展组件接口
+  $.extend(component, {
+    // 获得选中的数据（右侧面板）
+    getData: function(id) {
+      var that = component.getInst(id);
+      if(!that) return;
+      return that.getData();
+    }
+  });
 
-  // 重载实例
-  transfer.reload = function(id, options){
-    var that = thisModule.that[id];
-    that.reload(options);
-
-    return thisModule.call(that);
-  };
-
-  // 获得选中的数据（右侧面板）
-  transfer.getData = function(id){
-    var that = thisModule.that[id];
-    return that.getData();
-  };
-
-  // 核心入口
-  transfer.render = function(options){
-    var inst = new Class(options);
-    return thisModule.call(inst);
-  };
-
-  exports(MOD_NAME, transfer);
+  exports(CONST.MOD_NAME, component);
 });