说在开头 

前面博客写了一个模拟select的组件，文中还说到了一个问题；那天晚上想了一个方案第二天试了一下，是可以的；前几天一直赶进度，乘着周末分享出来。

重点，重点

自己仔细分享了出问题的原因有2个

1.缺少一个组件（组件被初始化1次，就需要标示一下）的唯一标示；

2.没有在子类中重写handlers，即实例化；导致on,fire时，this指针指向出错；

下面分别就上面提出解决方案。

缺少唯一标示：

这个问题让我自己想到以前解决ajax缓存时的方案，即在请求的url中加一个时间戳。

所以，通过时间戳给每一次组件加一个时间戳作为自己的唯一id；

重点代码如下：

  function Uselect() {if(this instanceof Uselect) {this.config = {container:null,//组件的父容器skin:null,//皮肤readOnly: true,//输入框是否只读maxCount:5,//最大展示数量，超过时，出现滚动条selectHandler:null,//选中回调dataType:0,//数据类型0,1data:"",//数据,如果自定义拼装，请使用li标签top:15,//下拉距顶位置，主要用于微调width:120,//input，以及下拉的宽度liHeight:30//下拉li的高度};this.isShow = false;//局部变量，仅限组件内部使用this.id = new Date().getTime(); } else {return new Uselect();}

组件被new一次，就有一个唯一的id,而且不会重复；

然后就是widget类绑定和执行自定义事件时，通过id进行区分

重点代码如下：

    //绑定自定义事件on:function(type,handler) {if ("undefined" === typeof this.handlers[type + this.id]) {this.handlers[type + this.id] = [];}this.handlers[type + this.id].push(handler);return this;},//依次触发自定义事件fire:function(type, data) {if ("[object Array]" === Object.prototype.toString.call(this.handlers[type + this.id])){var handlers = this.handlers[type + this.id];var len = handlers.length;for (var i = 0; i < len; i++) {handlers[i](data);}return this;}}

给每一个绑定事件的type这样处理一下：type + this.id

这样相同事件在on绑定时的事件type实际上时，type + this.id，永远不会重复；

同理，执行自定义事件也是按照type + this.id的事件类型执行！

当然，这里的type + this.id只是简单的拼唯一字符串的方式，你也可以通过type+"-"+ this.id,或者type+"_"+ this.id等等。

重写handlers

这个比较好理解，当我们在uselect构造函数中重写this.handlers后，name当注册和执行事件时，this就指向当前的对象，handlers就实例化。代码比较简单，在构造函数重写handlers就可以了；

代码如下：

  function Uselect() {if(this instanceof Uselect) {this.config = {container:null,//组件的父容器skin:null,//皮肤readOnly: true,//输入框是否只读maxCount:5,//最大展示数量，超过时，出现滚动条selectHandler:null,//选中回调dataType:0,//数据类型0,1data:"",//数据,如果自定义拼装，请使用li标签top:15,//下拉距顶位置，主要用于微调width:120,//input，以及下拉的宽度liHeight:30//下拉li的高度};this.isShow = false;//局部变量，仅限组件内部使用// this.id = new Date().getTime(); this.handlers = {};} else {return new Uselect();}}

闲扯

周末，公司真安静；一个人在公司写写博客，听听歌，真好。