jQuery 学习笔记（源码）- 2.0.3 版本

---

1.x 版本与 2.x 版本的区别

• 2.x 版本不再支持 IE6，7，8

---

简化框架

• 2.0.3 版本的 jQuery 框架主要由以下部分组成
  

  

  框架核心 

• 实现原理：

  • 因为 jQuery 中所有的属性和方法都是加在 jQuery 对象上的。而整个 jQuery 代码是被包在一个匿名函数中，此时 jQuery 对象是一个局部对象，如果外界想要调用 jQuery 上的方法，就需要 jQuery 向外界提供接口。
  • 第 8826 行就是 jQuery 向外界提供接口，这样外界就可以调用 jQuery 上的方法了
    window.jQuery = window.$ = jQuery;

• jQuery 是以面向对象的思想实现的

    $("#div1").css();
    $("#div1").html();
  
    var arr = new Array();
    arr.push();
    arr.sort();
  

  上面代码中，arr 为一个数组对象，可以直接调用 push() 方法，而对比 jQuery 写法，$("#div1") 要么本身就是对象，要么就是一个函数，这个函数调用后返回一个对象

  
  
  

  返回结果是一个 jQuery 对象

• jQuery 有两种使用方法
  1.$().css()：之前说过，$() 是一个对象，因此 .css() 是这个对象构造函数上的方法。这个 实例方法 只能给 jQuery 对象使用。
  2.$.trim()：$ 是个函数，因此 .trim() 是这个函数上的 静态方法（工具方法）。既可以给 jQuery 对象使用，也可以给原生 js 使用

• （21 - 94） 定义了一些变量和函数 jQuery = function(){}

• （96 - 283） 给 jQuery 对象，添加一些方法和属性

• （349 - 817） jQuery.extend()：扩展一些工具方法

• （877 - 2856） Sizzle：复杂选择器的实现

  • Sizzle 也是一个独立的插件，可以在不使用 jQuery 的时候，单独去下载一个 Sizzle 文件使用

• （2880 - 3042） Callbacks：回调对象：函数的一个统一管理

    // Demo
    function fn1(){
        alert(1)
    }
    function fn2(){
        alert(2)
    }
    var cb = $.Callbacks();      //  创建回调对象
    // $.Callbacks 是函数
    // 添加到 cb 上
    cb.add(fn1);
    cb.add(fn2);
    
    cb.fire();    //  1,2
    // 也可以删除    
    cb.remove(fn1);
    cb.fire();    //  2
  

• （2880 - 3042）3043 - 3183 Deferred：延迟对象：对异步的统一管理

    // Demo
    var dfd = $.Deferred();     // 1.创建延迟对象
  
    dfd.done(function(){        // 2.设置需要延迟执行的回调函数
        alert(2);
    })
  
    setTimeout(function(){
        alert(1);
        dfd.resolve();          // 3.调用
    },1000);                    // 4.结果：刷新后等 1 秒弹 1，紧接再着弹 2
  

• （2880 - 3042）3184 - 3295 support：功能检测：

2017 - 10 - 19 周四

• （3308 - 3652） data()：数据缓存：

    $('div').data('name','1123');
    alert($('div').data("name"));  //   注意，name 并没有直接加在 div 元素上
  

• （3653 - 3797）queue：队列管理：

  • .queue() 入队，.dequeue() 出队
  • .animate() 是异步操作的，如何保证下面代码按顺序执行？实际上就是通过 queue 实现，先让 left 入队，执行完 left 后，让 left 出队，top 入队

    $("div").animate({left:100});
    $("div").animate({top:100});
    $("div").animate({width:100});
  

• （3803 - 4299） attr() prop() val() addClass() 等：对元素属性的操作

• （4300 - 5128） on() trigger()：事件操作的相关方法

• （5140 - 6057） DOM 操作：添加 / 删除 / 获取 / 包装 / DOM 筛选

• （6058 - 6620） css()：样式的操作

• （6621 - 7854） 提交的数据和 ajax()：ajax() / load() / getJson() 等

• （7855 - 8584） animate()：运动的方法

• （8585 - 8792） offset() scrollTop()：位置和尺寸的方法

• （8804 - 8821） jQuery 支持模块化的模式

• （8826） window.jQuery = window.$ = jQuery ：对外提供的接口

---

2017 - 10 - 20 周五

（21 - 94） 定义了一些变量和函数 jQuery = function(){}

• jQuery 源码中会有 #13335 这种注释代码，可以在 https://bugs.jquery.com 中搜素相应的代码查找到具体的问题
  

  

  关于 # 代码

• jQuery 最外层会把 window 作为参数传到函数中，主要是基于以下两个原因：

  1. 查找速度快。如果不传 window，当 jQuery 内部某个函数调用 window 对象时，需从自身向外一层一层查找 window 对象，虽然最终也会查找到顶层函数外的 window，但速度会受到影响。因此直接传 window 使得内部函数想调用 window 对象时可以直接定位
  2. 方便压缩。 window 作为形参时，只是一个标识，在函数体内可以被压缩。

    (function(window,undefined){
        ...
        window
        ...
    })(window)   // window 作为实参
  

• 严格模式，以下两种写法在严格模式下会报错

  "use strict"
  a = 2;          // 不写 var
  var b = 010;    // 八进制
  

---

2017 - 10 - 23 周一

• window.location 等对象的存储，便于压缩。window.location 最终被压缩为一个 i

    location = window.location,
    document = window.document,
    docElem = document.documentElement,  // html 标签
  

压缩版

• 防冲突机制：解决当其他库调用 $ 或者 jQuery 时的冲突问题

  
  
  

  防冲突

  
    // 如果注释掉，则下面 $ 为 10
  
  

• 关于实现方式
  
  

  实现方式
  • 常规的面向对象程序写法

    function Aaa(){};   //  1.创建构造函数
    Aaa.prototype.init = function(){};  //  2.一般会在原型上添加一个初始化方法
    Aaa.prototype.css = function(){};   //  3.添加原型上的其他方法
  
    var a1 = new Aaa();   // 4.实例化
    a1.init();      // 5.调用
    a1.css();
  

  • 简化的 jQuery 面向对象写法（注意，这里 fn 与 prototype 相同）

    
    
    

    fn 与 prototype 的关系

    function jQuery(){
      return new jQuery.fn.init();
    }
    jQuery.prototype.init = function(){};
    jQuery.prototype.css = function(){};
    jQuery().css();
  

  如果直接是这样的话会有个问题：css 方法明明是加在 jQuery 的原型上，为什么 jQuery()，即 new jQuery.fn.init() 可以调用?
  

  因为：
  

  原因
  
  可以看出， jQuery.fn.init.prototype 与 jQuery.prototype 是一样的，因此，加在 jQuery 上的方法 jQuery()，即 new jQuery.fn.init() 也可以调用

2017 - 10 - 25 周三

• 匹配数字
  

  

  匹配数字

• 匹配单词
  

  

  匹配单词

• 匹配标签及 ID（防 XSS 攻击）
  

  

  匹配标签及 ID

• 匹配空标签
  

  

  空标签

• 浏览器前缀处理

  • 常规浏览器进行驼峰处理 -webkit-margin-left => webkitMarginLeft
  • IE 浏览器进行驼峰处理 -ms-margin-left => MsMarginLeft
    
    

    浏览器前缀处理

• 驼峰回调函数
  

  

  驼峰回调函数

• DOM 加载成功时触发的回调函数
  

  

  DOM 加载成功时触发的回调函数