jquery源码解析

• 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博大精深，自己只是懂了最最简单的实现，今后还要认真学习和分析它的源码