自定义下拉框插件

一、定义组件

定义一个下拉框组件，需要支持以下几个基本功能模块，多实例初始化，基本属性设置和获取，绑定响应事件和提供基本操作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();
//使用，实例化组件
<div id="select" name="select" options=
"[{'name':'one',value:1},{'name':'two',value:2}]">

三、事件

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

//对象实例化
let select = new Select({
  id:'select',
  onSelect:function(data){
    console.log(1);
    select.onSelect = () => {
      console.log(2);
    }
  };
});
//标签实例化
<input type="text" id="test4" ctype="select" onSelect="onSelect">
<script type="text/javascript">
  var onSelect = function(value,data){
      console.log(arguments);
  }
</script>

四、标签事件重写

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

<input type="text" id="test4" ctype="select" onSelect="onSelect">
<script type="text/javascript">
  var onSelect = () => (value,data){
      console.log(1);
  }
  //组件的方法重新定义
  $('#test4').onSelect = () => { };
</script>

五、结尾

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