jquery源码解析

2017-01-01 本文已影响0人 GarenWang

jquery是前端常用的库，它的源码也是十分的精妙，我本着敬畏之心来分析它，jquery 代码未压缩总共有11009行，这么多的代码一行一行的看下去不知道要看到猴年马月，为何不换一种方式，我们先掌握它的主干，以后有时间再去研究它的各个分支，在此，我们采用猜想实验法
第一个问题：$(),$.each(),$('body')等，为什么他们这样写就有效果，大家可以想到了 $肯定是个函数，$('body')就是执行这个函数,那么所谓的$.each,$.ajax 应该是这个函数的属性或是方法，那么来尝试写一个最简单的构造函数
```
var hQuery =function (selector, context){
    
}
hQuery.prototype=  {
    sayHello:function(){
        console.log('hello world')
    }
}
window.$= hQuery //将函数hQuery绑定全局对象window的属性
```

这样 $()就等同于执行函数 hQuery(),但是这时还是不行，我们只能用 new $('div')来生成不同的实例对象来操作，那怎么才能把new 给去调，那么我们肯定是想到的思路是我让 hQuery 返回一个新的对象，不就不用 new 来生成了新的对象，好吧，我们来试一试，
var hQuery =function (selector, context){
return this
}
hQuery.prototype= {
sayHello:function(){
console.log('hello world')
}
}

return this 执行后发现失败了，原来this指向的不是函数构造函数本身，this 指向的是全局对象window,怎么办才能让它返回一个新的对象，要不试一试返回对象的原型，于是我们继续尝试
var hQuery =function (selector, context){
return hQuery.prototype
}
hQuery.prototype= {
sayHello:function(){
console.log('hello world')
}
}
这样执行后虽然返回了一个对象，但是生成的所有对象都是继承hQuery.prototype，对象都是一样的，这不是我们的通过构造函数返回不同的对象的目标，又失败了，怎么办，于是我们想到能不能在原型里绑定个方法函数（构造函数也能生产实例），并返回函数方法的原型，
var hQuery= function(selector,context){
return new hQuery.prototype.init.(selector,context)
};
```
hQuery.prototype = {
    init:function(selector,context){
      console.log(this === hQuery.prototype);//false
        return this //此时this指向init{}
  },
    sayHello:function (){
      console.log('hello world')
    }
};
window.hQuery= window.$= hQuery
```

执行后还是不行，不同的对象是生成了，可是不能调用hQuery的原型的方法，怎么才能让生成的init属性的构造函数生成的对象继承hQuery.prototype里的方法了，于是让前者继者后者的原型试一试
var hQuery= function(selector,context){

   return new hQuery.prototype.init(selector,context)
 };
 hQuery.prototype = {
 constructor:hQuery,
 init:function(selector,context){
     this.selector= selector;
     this.context=context;
   }，
       sayHello:function(){
           console.log('hello')
       }
 };
 hQuery.prototype.init.prototype = hQuery.prototype
 window.hQuery= window.$= hQuery

执行后成功了，成功的生成不同的对象，这是因为init 方法构造函数经过new 后生成了不同的函数，同时它的原型此时指向了hQuery.prototype,也继承了hQuery的方法，我们终于实现了$()传入参数的不同，生成不同的对象，公用一套方法。
原型链图

1.png

虽然已经这种方法已经实现了，你也就应该知道了jquery链式调用的原理了把，就是给我往hQuery.prototype上添加公用的方法，再用return this,把对象返回出来，然后按这样的流程执行下个方法
var hQuery= function(selector,context){
return new hQuery.prototype.init(selector,context)
};
hQuery.prototype = {
constructor:hQuery,
init:function(selector,context){
this.selector= selector;
this.context=context;
},
sayHello:function(){
console.log('hello')
return this;
},
addClass:function(el){
console.log('addClass: '+el)
return this;
}
};
hQuery.prototype.init.prototype = hQuery.prototype
所以每个方法必须要return this（init构造函数生成的对象）后才能让下一个方法继续执行。
但是到现在还没有实现$.ajax,$.each,这种形式的调用，不过现在实现这个太简单了，我直接在函数上添加方法不就行了
hQuery.ajax =function (){
console.log('ajax execute!')
};
$.ajax()
可是感觉太丑了，不美观，必须一个一个方法这样把它添加上，参考jquery的拷贝extend,做个超级简单版本
hQuery.extend = hQuery.prototype.extend =function (obj){
for( var key in obj){
this[key]=obj[key]
}
};
此时extend方法遍历了传递参数0bj的所有属性，并把obj的属性属性赋值给 hQuery.prototype或hQuery.extend，我们直接使用extend 的方法添加方法和属性
hQuery.extend({
isArray: Array.isArray,
ajax:function(){}
});
hQuery.prototype.extend({
addClass:function(){console.log('add class....')},
sayHello:function(){
console.log('hello'+this.selector)
}
})
到此为止，我们终于实现了jquery的超级简单傻瓜版，全部代码如下：
var hQuery= function(selector,context){
return new hQuery.prototype.init(selector,context)
};
hQuery.prototype = {
constructor:hQuery,
init:function(selector,context){
this.selector= selector;
this.context=context;
},
sayHello:function(){
console.log('hello')
return this;
},
addClass:function(el){
console.log(this)
console.log('addClass: '+el)
return this;
}
};
hQuery.prototype.init.prototype = hQuery.prototype
hQuery.extend = hQuery.prototype.extend =function (obj){
for( var key in obj){
this[key]=obj[key]
}
};
hQuery.extend({
isArray: Array.isArray,
ajax:function(){}
});
hQuery.prototype.extend({
saySelector:function(){
console.log(this.selector)
}
})
后记：jquery博大精深，自己只是懂了最最简单的实现，今后还要认真学习和分析它的源码

jquery源码解析

猜你喜欢

热点阅读