一个组件开发的例子：

来源：http://www.cnblogs.com/uedqd/archive/2013/02/23/2923099.html

先上代码：

     
     
    
          
          
          
      
       111
      
    
      
       222
      
    
      
       333
      
     
     
    
          
          
          
      
       111
      
    
      
       222
      
    
      
       333
      
     
     
    
          
          
          
      
       111
      
    
      
       222
      
    
      
       333
      
     
     
    
          
          
          
      
       111
      
    
      
       222
      
    
      
       333
      
     

 

有几个部分：

1  init : function(options){ 2         var This = this;                //将当前作用域的this(实例对象t1,t2...)赋予This，下面调用时在另一个函数内，this的值改变 3         options = $.extend(this.defaults,options);      //extend使options对象的内容覆盖this.defaults的内容，events与delay有初始值 4          //console.log(this);           输出id为null的对象t1,t2... 5         this.id = '#' + options.id; 6           //console.log(this);          id为对应的值 7         $(this.id).find('input').on(options.events,function(){ 8             var obj = this;                                         //指代input元素 9             if(options.events=='mouseover' && options.delay){       //event事件为mouseover且有delay时10                 obj.timer = setTimeout(function(){11                     This.change(obj);                   //相当于t1.change,t2.change....下面的change方法实现选项卡功能12                 },options.delay);

init方法传递参数给对象

1、第2行中，将this的值赋予This，防止下面的函数中this的值改变，通过在该行添加console.log观察this的值，可知：

 

 

第5行给没有id的对象赋值，重新打印出结果，发现id不为null：

2、第8行，this的值为input元素，因为作用域的问题，This仍可以在其子函数中使用，且这里的This id不为空，调用方法change

 

 

1 change : function(obj){2         3         $(this).trigger('toBeforeChange');              //触发上面使用on绑定的event4         //console.log(this);            输出id有值5         $(this.id).find('input').attr('class','');6         $(this.id).find('div').css('display','none');

change方法中的this指向对象的实例，t1,t2....，init方法已经传递参数给对象，方法取得对象都是有id值的：

 

$.extend(CreateTab.prototype,{   //插件扩展        currentTitle : function(){            return $(this.id).find('input').eq( this.iNow ).val();        }    });    /*CreateTab.prototype.currentTitle= function(){        return $(this.id).find("input").eq(this.iNow).val();    }*/

插件扩展部分例子中采用了jquery的方法，也可以使用注释中的源生js添加原型方法