自定义下拉框插件

一、定义组件

定义一个下拉框组件，需要支持以下几个基本功能模块，多实例初始化，基本属性设置和获取，绑定响应事件和提供基本操作API。如下：

class Select {
  constructor(p){

  };
  onInit(){
    this.component.onInit.apply(this);
  };
  setValue(){

  };

二、组件初始化

定义两种用户使用入口，实例化组件对象和标签实例化。以下分别实现两种方式实例化。
1、对象

//实现
class Select {
  constructor(p){
    let component = {

    }
    this.component = $.extend({},component,parameter);
    this.initSelect();
  }
}
//使用，实例化组件
let select = new Select({
  id:'',
  onSelect:function(data){

  }
});

2、标签

//实现
class Common{
    static initComponent(type){
      require([type],Component => {
          var obj = {};
          Common.setOptions.call(this,obj);
          new Component(obj);
        })
      }
    }
$.fn.initComponent = function () {
  this.each(function () {
  const node = $(this);
  const type = node.attr('ctype');
  Common.initComponent.call(node,type);
      })
};
$('[ctype]').initComponent();
//使用，实例化组件

三、事件

比如说onSelect事件，可以在实例化组件时要对该属性赋值，或者实例化之后通过对象属性重写,如下所示。

//对象实例化
let select = new Select({
  id:'select',
  onSelect:function(data){
    console.log(1);
    select.onSelect = () => {
      console.log(2);
    }
  };
});
//标签实例化

四、标签事件重写

关于这一点暂时还没有头绪，如何实现以下这种标签的事件重新绑定？难道要把所有实例化的对象全都全局保存，后面再重写对象方法？
例如这样定义了一个组件，并实现了onSelect方法，然后取到dom节点重新定义onSelect方法

五、结尾

目前还在继续码代码，欢迎指点不足，或者提需求改进。项目开源在：GitHub