jQuery 源码分析

发布时间:2019-05-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了jQuery 源码分析脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

这篇文章可以说是读这篇文章这篇文章后的总结。

jQuery最基本的构成结构:

VAR jquery = window.jQuery = window.$ = function(a,b){
  return new jQuery.fn.inIT(a, b);  // 1
};

jQuery.fn = jQuery.PRototyPE = {
  init: function (s) {
    this[0] = s;
    this.length = 1;
    this.context = s;
    return this;  // 2
  },
  age: function () {
    return this;
  }
};

jQuery.fn.init.prototype = jQuery.fn;  // 3

jQuery.extend = jQuery.fn.extend = function () {
  // 4
}

这是jQuery码一个最基本的概要实现,但从这个实现中已经能弄并学到很多东西了。

( 1 ) 首先 $ 也就是 jQuery 本身是一个函数, 但它又不是一个普通的构造函数,这从 $('div') 的这种实例直接产生不需要 new 就可以知道,也就是它隐藏了实例 new 的过程, jQuery 自身只是一个工厂函数,它产出由它的原型上定义的 init 方法的实例,因为拥有了 new 的过程,所以实例化中的 this 都是指向了 最终产生的实例本身,于是这样便实现了无new构建

( 2 ) 这里在 init 函数中有一个 return this; 的操作,一般构造函数不会这样写,但这样写并不会影响 new 的结果,这参照之前new 的分解,便可以推出结果的一致( 只是返回了不同但值相同的变量 )。而jQuery之所以在这里要返回 this 是有用处的,这样最开始实例的 this 便得以保存,$('div').ready() 这样的链式调用便能得到前方的实例对象,也就是说就是 return this; 实现了链式调用。

( 3 ) 那既然是原型上的 init 构造器方法构建的实例,又怎么能获取到 jQuery 的原型方法呢,这就需要将 init 方法的原型用 jQuery 的原型对象覆盖。也就是 3 部分的操作。

( 4 ) 最后 $.extend$.fn.extend 之所以会不一样,只是调用时分别是jQuery对象或jQuery.prototype(jQuery.prototype = jQuery.fn)导致了 this 的不同,实际定义是是用的同一个函数。

脚本宝典总结

以上是脚本宝典为你收集整理的jQuery 源码分析全部内容,希望文章能够帮你解决jQuery 源码分析所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。