在前两章，为了方便调试，我们写了一个非常简单的 jQuery.fn.init 方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
jQuery.fn.init = function (selector, context, root) { if (!selector) { return this; } else { var elem = document.querySelector(selector); if (elem) { this[0] = elem; this.length = 1; } return this; } }; |
因此我们在 demo 里执行 $(‘div’) 时可以取得这么一个类数组对象：
在完整的 jQuery 中通过 $(selector) 的形式获取的对象也基本如此 —— 它是一个对象而非数组，但可以通过下标（如 $div[index] ）或 .get(index) 接口来获取到相应的 DOM 对象，也可以直接通过 .length 来获取匹配到的 DOM 对象总数。
这么实现的原因是 —— 方便，该对象毕竟是 jQuery 实例，继承了所有的实例方法，同时又直接是所检索到的DOM集合（而不需要通过 $div.getDOMList() 之类的方法来获取），简直一石二鸟。
如下图所示便是一个很寻常的 JQ 类数组对象（初始化执行的代码是 $(‘div’) ）：
1. Sizzle 引入
在 jQuery 中，检索DOM的能力来自于 Sizzle 引擎，它是 JQ 最核心也是最复杂的部分，在后续有机会我们再对其作详细介绍，当前阶段，我们只需要直接“获取”并“使用”它即可。
Sizzle 是开源的选择器引擎，其官网是 http://sizzlejs.com/ ，直接在首页便能下载到最新版本。
我们在 src 目录下新增一个 /sizzle 文件夹，并把下载到的 sizzle.js 放进去（即存放为 src/sizzle/sizzle.js ），接着得对其做点小修改，使其得以适应我们 rollup 的打包模式。
其原先代码为：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
(function( window ) { var i, support, //...省略一大堆有的没的<br> Sizzle.noConflict = function() { if ( window.Sizzle === Sizzle ) { window.Sizzle = _sizzle; } return Sizzle; }; if ( typeof define === "function" && define.amd ) { define(function() { return Sizzle; }); // Sizzle requires that there be a global window in Common-JS like environments } else if ( typeof module !== "undefined" && module.exports ) { module.exports = Sizzle; } else { window.Sizzle = Sizzle; } // EXPOSE })( window ); |
将这段代码的头和尾替换为：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var i, support, //...省略 Sizzle.noConflict = function() { if ( window.Sizzle === Sizzle ) { window.Sizzle = _sizzle; } return Sizzle; }; export default Sizzle; |
同时新增一个初始化文件 src/sizzle/init.js ，用于把 Sizzle 赋予静态接口 jQuery.find：
|
1 2 3 4 5 6 7 8 9 |
import Sizzle from './sizzle.js'; var selectorInit = function(jQuery){ jQuery.find = Sizzle; lass="crayon-sy">{ jQuery.find = Sizzle; x; margin-bottom: 12px; font-size: 13px !important; line-height: 15px !important;">
因此我们在 demo 里执行 $(‘div’) 时可以取得这么一个类数组对象：
在完整的 jQuery 中通过 $(selector) 的形式获取的对象也基本如此 —— 它是一个对象而非数组，但可以通过下标（如 $div[index] ）或 .get(index) 接口来获取到相应的 DOM 对象，也可以直接通过 .length 来获取匹配到的 DOM 对象总数。 这么实现的原因是 —— 方便，该对象毕竟是 jQuery 实例，继承了所有的实例方法，同时又直接是所检索到的DOM集合（而不需要通过 $div.getDOMList() 之类的方法来获取），简直一石二鸟。 如下图所示便是一个很寻常的 JQ 类数组对象（初始化执行的代码是 $(‘div’) ）：
1. Sizzle 引入 在 jQuery 中，检索DOM的能力来自于 Sizzle 引擎，它是 JQ 最核心也是最复杂的部分，在后续有机会我们再对其作详细介绍，当前阶段，我们只需要直接“获取”并“使用”它即可。 Sizzle 是开源的选择器引擎，其官网是 http://sizzlejs.com/ ，直接在首页便能下载到最新版本。 我们在 src 目录下新增一个 /sizzle 文件夹，并把下载到的 sizzle.js 放进去（即存放为 src/sizzle/sizzle.js ），接着得对其做点小修改，使其得以适应我们 rollup 的打包模式。 其原先代码为：
将这段代码的头和尾替换为：
同时新增一个初始化文件 src/sizzle/init.js ，用于把 Sizzle 赋予静态接口 jQuery.find： |
