select 组件-bug解决方案

 说在开头 

前面博客写了一个模拟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,1
        data:"",//数据,如果自定义拼装，请使用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,1
        data:"",//数据,如果自定义拼装，请使用li标签
        top:15,//下拉距顶位置，主要用于微调
        width:120,//input，以及下拉的宽度
        liHeight:30//下拉li的高度
      };
      this.isShow = false;//局部变量，仅限组件内部使用
     // this.id = new Date().getTime(); 
      this.handlers = {};
    } else {
      return new Uselect();
    }
  }

闲扯

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