读书人

jquery 源码初探一步步兑现自己的jq

发布时间: 2012-11-25 11:44:31 作者: rapoo

jquery 源码初探,一步步实现自己的jquery(二)
一般的情况下,假如你创建一个js类的实例,需要这样调用构造函数,比如

       (function(){      TestClass=function (param1,param2){      this.result='start';      this.attr1=param1;      this.attr2=param2;    }      TestClass.fn=TestClass.prototype={        add:function(){        this.result=parseInt(this.attr1)+parseInt(this.attr2);        alert(this.result);    },      equals:function(){        if(this.attr1==this.attr2){        this.result=true;      }else{        this.result=false;      }    alert(this.result); }}})()var test=new TestClass(1,2);test.add();test.equals();//TestClass(1,2).add();

此时你不能像jquery一样用jQuery("x").add()或者$("").add(),那么这个是怎么办到的呢很简单,改版如下:
     (function(){TestClass=function (param1,param2){  return new TestClass.fn.init(param1,param2);}TestClass.fn=TestClass.prototype={ add:function(){   this.result=parseInt(this.attr1)+parseInt(this.attr2);   alert(this.result); }, equals:function(){  if(this.attr1==this.attr2){    this.result=true;  }else{    this.result=false;  }   alert(this.result); }, init:function(param1,param2){  this.result='start';  this.attr1=param1;  this.attr2=param2;  return this; }}TestClass.fn.init.prototype=TestClass.fn;})()TestClass(1,5).equals();



改动很简单:

1,构造函数变成return new TestClass.fn.init(param1,param2); 2,在TestClass.fn里面加init方法,完成初始化 3,加上TestClass.fn.init.prototype=TestClass.fn;这句话,表示让init方法的prototype指向TestClass的prototype,这样构造函数返回的对象就具有了TestClass.prototype里面定义的方法。
此时,你就可以直接 TestClass(1,5).equals();这样调用了,当然了,把TestClass换成$也是可行的,只要加上这句
var $=TestClass;window.$=$;window.TestClass=TestClass; 

下篇讲解稍微进阶一点的知识。





读书人网 >Web前端

热点推荐