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

2017-10-19 本文已影响0人 _月光临海

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

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

简化框架

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

框架核心 ![image.png](https://img.haomeiwen.com/i5408683/c34d310254f40268.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
实现原理：
- 因为 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 时的冲突问题

防冲突

<script type="text/javascript">
  var $ = 10;      //  如果没有这句，_$ 则会被赋值 undefined，因为 window.$ 并没有定义
</script>
<script type="text/javascript" src="jquery-2.0.3.js"></script>  // 如果注释掉，则下面 $ 为 10
<script type="text/javascript">
  console.log($)  // 依然是 jquery 对象
</script>

关于实现方式
实现方式
- 常规的面向对象程序写法
```
  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 加载成功时触发的回调函数

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

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

简化框架

2017 - 10 - 19 周四

2017 - 10 - 20 周五

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

2017 - 10 - 23 周一

2017 - 10 - 25 周三

猜你喜欢

热点阅读

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

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

简化框架

2017 - 10 - 19 周四

2017 - 10 - 20 周五

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

2017 - 10 - 23 周一

2017 - 10 - 25 周三

猜你喜欢

热点阅读

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