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的方法，我们终于实现了$()传入参数的不同，生成不同的对象，公用一套方法。
原型链图
- 虽然已经这种方法已经实现了，你也就应该知道了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博大精深，自己只是懂了最最简单的实现，今后还要认真学习和分析它的源码
