jQuery 源码学习 - 01 - 简洁的 $('...')

  首先贴上学习参考资料:【深入浅出jQuery】源码浅析--整体架构,备用地址:chokcoco/jQuery-

  jQuery 库,js 开发的一个里程碑,它的出现,让网页开发者们告别荒蛮的上古时代,初步解放生产力,正式进入黄铜时代。

  虽然如今 Angular/React/Vue 三驾马车驰骋畋猎,jQuery的时代渐行渐远,但是它的思想它的设计都有着里程碑式的作用。当然,我是拿它来补基础的,逃...

1.自执行函数

(function(params) {
  // ...
})(Variable)

  好处很多,就不介绍,感兴趣的请移步 google/baidu。

2.为什么没有 new ?

  js 与 java 很像,都是面向对象的语言,因此,这意味这在 js 中我们需要通过 new 运算符来新建一个对象。当年面试的时候有一个问题是 jQuery 对象与普通的 dom 对象有什么不同,jQuery 对象不需要显式地 new 出来也是一个答案。

  为什么不需要 new 呢?

var jQuery = function(selector, context) {
  // 这里是为什么使用时无须 new 的原因
  return new jQuery.fn.init(selector, context, rootjQuery);
},

  因为在内部已经帮我们 new 了。

  我们通常是 $(‘xxx‘) 来获取一个 jQuery 对象,其实内部执行的就是 jQuery() 函数,这个函数返回一个对象,即 new jQuery.fn.init(selector, context, rootjQuery) 。

var jQuery.fn = jQuery.prototype = {
  // 实例化方法,也是所有 jQuery 对象的构造器
  init: function(selector, context, rootjQuery) {
    // ....
  }
}

  这一句,手动指定 jQuery 的 prototype(关于 js 函数的 prototype,请移步 google/baidu, 或者 JS 中的原型 -- prototype、__proto__ 以及原型链),同时,声明一个jQuery.fn 对象,缓存也好,定义也好,以待后用。

jQuery.fn.init.prototype = jQuery.fn;

  这一句很关键,也很重要,作用是传递原型,确保 jQuery 对象中的 this 指向正确。接下来一步一步分析思想。

  在分析之前我们先进行一下扩写,方便理解:

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype;

  这里手动指定 jQuery.fn.init 函数的原型是 jQuery.fn,而因为上一句 jQuery.fn = jQuery.prototype ,所以,就确保了 jQuery.fn.init 函数的原型就是 jQuery 的原型,这意味着, jQuery.fn.init 与 jQuery 是等价的,因此,先不管具体实现,通过 new jQuery.fn.init(selector, context, rootjQuery) 出来的对象本质上就是 jQuery 对象,这样,就能够通过 this 访问到 jQuery.fn(或者 jQuery 原型)上的所有方法和属性。

套用大佬的总结:

(1)首先要明确,使用 $(‘xxx‘) 这种实例化方式,其内部调用的是 return new jQuery.fn.init(selector, context, rootjQuery) 这一句话,也就是构造实例是交给了 jQuery.fn.init() 方法去完成。

(2)将 jQuery.fn.init 的 prototype 属性设置为 jQuery.fn,那么使用 new jQuery.fn.init() 生成的对象的原型对象就是 jQuery.fn ,所以挂载到 jQuery.fn 上面的函数就相当于挂载到 jQuery.fn.init() 生成的 jQuery 对象上,所有使用 new jQuery.fn.init() 生成的对象也能够访问到 jQuery.fn 上的所有原型方法。

(3)也就是实例化方法存在这么一个关系链:

  jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;

  new jQuery.fn.init() 相当于 new jQuery() ;

  jQuery() 返回的是 new jQuery.fn.init(),而 var obj = new jQuery(),所以这 2 者是相当的,所以我们可以无 new 实例化 jQuery 对象。

最后,不要忘了把 jQuery 挂到 window 上:

window.jQuery = window.$ = jQuery;

贴一个简单的实践:

(function(window, undefined) {
  var jQuery = function() {
    return new jQuery.fn.init();
  }
  jQuery.fn = jQuery.prototype = {
    init: function() { console.log(‘init‘, this); return this;},
    add: function() { console.log(‘add‘); },
    remove: function() { console.log(‘remove‘); }
  }
  jQuery.fn.init.prototype = jQuery.prototype;

  window.jQuery = window.$ = jQuery;

})(window)

jQuery 源码学习 - 01 - 简洁的 $('...')

原文地址:https://www.cnblogs.com/cc-freiheit/p/10749636.html

时间: 2024-10-13 02:33:45

jQuery 源码学习 - 01 - 简洁的 $('...')的相关文章

jQuery源码学习:常用正则表达式

常用的数字正则(严格匹配) 正则 含义 ^[1-9]\d*$ 匹配正整数 ^-[1-9]\d*$ 匹配负整数 ^-?[1-9]\d*$ 匹配整数 /^(([1-9]\d*)|(0+))$/; 匹配非负整数(正整数 + 0) ^-[1-9]\d*|0$ 匹配非正整数(负整数 + 0) /^(([1-9]\d*)|0)\.\d+$/ 匹配正浮点数 ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 匹配负浮点数 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\

【iScroll源码学习01】准备阶段 - 叶小钗

[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3496369.html 主题 iScroll HTML JavaScript ① viewport相关知识点(device-width等) ②  CSS3硬件加速 ③ 如何暂停CSS动画 ④ e.preventDefault导致文本不能获取焦点解决方案 ...... 当然,我们写的demo自然不能和

jquery源码学习

jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jquery-2.0.3的代码结构如下 首先最外层为一个闭包, 代码执行的最后一句为window.$ = window.jquery = jquery 让闭包中的变量暴露倒全局中. 传参传入window是为了便于压缩 传入undefined是为了undifined被修改,他是window的属性,可以被修

菜鸟的jQuery源码学习笔记(二)

jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: 1 jQuery.fn = jQuery.prototype = { 2 //成员变量和方法 3 } 这里给原型对象起了一个别名叫做jQuery.fn.要注意的是这个jQuery.fn可不是jQuery对象的属性,而是jQuery构造方法本身的属性,它是不会传给它所创建的对象的.如果你在控制台敲$().fn的话输出的结果会是undefined.接下来看看原型对象里面有些

jquery源码学习(一)core部分

这一部分是jquery的核心 jquery的构造器 jquery的核心工具函数 构造器 jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQu

jquery源码学习(二)sizzle部分 【转】

一,sizzle的基本原理 sizzle是jquery选择器引擎模块的名称,早在1.3版本就独立出来,并且被许多其他的js库当做默认的选择器引擎.首先,sizzle最大的特点就是快.那么为什么sizzle当时其他引擎都快了,因为当时其他的引擎都是按照从左到右逐个匹配的方式来进行查找的,而sizzle刚好相反是从右到左找的. 举个简单的例子 “.a .b .c”来说明为什么sizzle比较快.这个例子如果按照从左到右的顺序查找,很明显需要三次遍历过程才能结束,即先在document中查找.a,然后

jquery源码学习-构造函数(2)

最近几天一直在研究jquery源码,由于水平太低看得昏头转向.本来理解的也不是很深刻,下面就用自己的想法来说下jquery是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出.  一般写构造函数如下 function Aaa(){} Aaa.prototype.init = function(){}; Aaa.prototype.css = function(){}; var a1 = new Aaa(); a1.init(); //初始化 a1.css(); jQuery写法如下

jquery源码学习-初始(1)

最近几天一直在研究jquery源码,由于水平太低看得昏头转向.本来理解的也不是很深刻,下面就用自己的想法来说下jquery是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出. 首先要了解下什么时候自执行匿名函数 ,它的用途就是 相当于创建一个命名空间,只要把自己所有的代码写在这个特殊的函数包装内,外部不能访问,除非你允许. 基本格式 (function(){ //代码 })(); (function(){ var a = 10; function $(){ alert(a); }

jQuery源码学习笔记:总体架构

1.1.自调用匿名函数: (function( window, undefined ) { // jquery code })(window); 这是一个自调用匿名函数,第一个括号内是一个匿名函数,第二个括号立即执行,传参是window. 1.为什么有自调用匿名函数? 通过定义匿名函数,创建了一个"私有"空间,jQuery必须保证创建的变量不能和导入它的程序发生冲突. 2.为什么传入window? 传入window使得window由全局变量变成局部变量,jQuery访问window时,