第二章 jQuery技术解密 (三)

Biegral 2020/8/7 5:47:03 2421

2.3 破解 jQuery 选择器接口

jQuery 选择器功能强大，但是用法简单，它仅仅提供了一个接口：jQuery()，也可以简写为 $() 。用法如此简单，但又具有如此强大的处理能力，使 jQuery 必然成为众人追捧的对象。

在上一节中，我们重点分析了 jQuery 框架的雏形，而对于选择器并没有深入分析，仅仅提供了一个简单的 DOM 元素选择作为演示，目的是方便读者理解该框架的架设思路和过程。本节将重点研究 jQuery 选择器的设计思路、实现过程和工作原理。

2.3.1 简单但很复杂的黑洞

前面说到，jQuery 提供了惟一的接口 (jQuery() 或者 $()) 使选择器与外界进行交流。那么这个对象是如何生成的呢？

jQuery 框架的基础是查询，即查询文档元素对象，因此我们可以认为 jQuery 对象就是一个选择器，并在此基础上构建和运行查询过滤器。

jQuery 查询的结果是获取 DOM 元素，这些查询到的 DOM 元素又是如何存储的呢？

根据前面的介绍，我们初步了解到它把查询的结果存储到 jQuery 对象内。由于查询的结果可能是单个元素，也可能是集合，因此，jQuery 对象内应该定义了一个集合。这个集合专门负责存放查询到的 DOM 元素。这正如 JavaScript 中的 Function 对象一样，其内部也构建了一个集合对象 Arguments ，专门负责存储函数的参数。

但是，Functiono 对象和 Arguments 是两个相互独立的概念，仅通过 arguments 属性联系在一起。也就是说 Arguments 对象并非是 Function 对象的子对象，或者是它的内部组成部分。而 jQuery 对象与查询结果的数据集合就不同了，它是完全作为 jQuery 对象的一部分而存在的。

另外，jQuery 虽然仅提供了一个入口，但是它的构建并不只局限于从 DOM 文档树中查询到 DOM 元素，DOM 元素也有可能从别的集合中转移过来的，或者是从 HTML 片断生成的等。

例如，类似下面的代码在 jQuery 应用中经常会看到。

$("div.red").css("display", "none");       // 将 class 为 red 的 div 元素隐藏显示

var width = $("div .red").width();            // 获取 div 元素下 class 为 red 的元素的宽度

var html = $(document.getElementById("wrap")).html();       // 获取 id 为 wrap 元素的 innerHTML 值

$("#wrap", document.forms[0]).css("color", "red"); // 将在第一个 form 元素下 id 为 wrap 元素的字体颜色设置为红色

$("<div>hello,world</div>").appendTo("#wrap");   // 将 HTML 字符串信息追加到 id 为 wrap 元素的末尾

在 $() 函数中可以包含选择字符串、HTML 字符串、 DOM 对象和数据集合等不同类型的参数。jQuery 是如何分辨这些参数是选择符字符串、HTML字符串、DOM对象或数据集合的呢？

为了方便读者理解这其中的奥妙，我们不妨把 jQuery 框架进行简化，先删除所有方法、函数以及逻辑代码，然后在 init() 构造器中，使用 alert() 方法获取 selector 参数的类型和信息，其代码如下。

[html] view plaincopy
  1. <script type="text/javascript">  
  2. (function(){  
  3.     var window = this;  
  4.     jQuery = window.jQuery = window.$ = function(selector, context){  
  5.         return new jQuery.fn.init(selector, context);  
  6.     };  
  7.     jQuery.fn = jQuery.prototype = {  
  8.         init: function(selector, context){  
  9.             alert(selector);  
  10.         }  
  11.     };  
  12. })();  
  13. window.onload = function(){  
  14.     $("div.red");       // 获取 "div.red"  
  15.     $("div .red");      // 获取 "div .red"  
  16.     $(document.getElementById("wrap")); // 获取 "[object]"  
  17.     $("#wrap", document.forms[0]);  // 获取 "#wrap"  
  18.     $("<div>hello,world</div>");    // 获取 "<div>hello,world</div>"  
  19. };  
  20. </script>  
  21. <div id="wrap"></div>  

2.3.2 盘根错节的逻辑关系

根据 jQuery 官网提供的 API 文档可知， jQuery() 提供了以下 4 种构建 jQuery 对象的方式。

  • jQuery(expression, [context])
  • jQuery(html, [ownerDocument])
  • jQuery(elements)
  • jQuery(callback)
其中 jQuery 可以使用 $ 简写。上述四种构建 jQuery 对象的方式是经常用到的。从上述参数列表可以看出，其实 jQuery 的参数可以是任意元素。例如：
$("div > p"); // 参数可以是字符串
$( $("div >p") ); // 参数可以是 jQuery 对象或者类数组 (ArrayLike) 的集合
$(document); // 参数可以是 DOM 元素
$(); // $(document) 简写
$(function(){}); // $(document).ready() 的简写
$([]); // 参数可以是数组
$({}); // 参数可以是对象
$(1); // 参数可以是数字，即把 1 存储在 jQuery 对象的数据集合中
虽然说，在上面的示例中最后 4 行代码都可以被解析，但是这些参数数据是被存储到 ArrayLike (类数组) 集合中的，而不是被转换为 DOM 元素。虽然语法不错，解析正常，但是它们无法完成实际应用，所以不建议传入非 DOM 元素的参数。
注意：jQuery 对象的方法都是针对 DOM 元素对象进行的操作，如果不清楚其使用的话，很有可能会导致错误。
下面我们就顺着 jQuery 框架的这个惟一入口，慢慢向里爬进，以窥视其中的秘密。
***** 当我们调用 jQuery() 方法时，它没有被实例化，也就是说 jQuery 类型被抛弃了，我们仅仅把它作为一个普通函数来调用，此时该方法中的 this 关键字指向的是 Window 对象，而不是 jQuery 对象，请读者务必注意。 ******
不过，当调用该方法时，会返回一个 jQuery.fn.init 类型的实例，同时，jQuery 又使用自己的原型对象覆盖了 jQuery.fn.init 类型的原型对象，所以就形成了一种错觉，很多初学者往往在这里栽了跟头。下面是 jQuery 框架中的核心代码 (节选) 。
jQuery = window.jQuery = window.$ = function(selector, context){
return new jQuery.fn.init(selector, context);
};
jQuery.fn.init.prototype = jQuery.fn;
jQuery 对象不是通过 new jQuery 来继承其 prototype 中的方法的，而是通过 jQuery.fn.init 初始化构造器生成的。所以，为 jQuery.prototype 添加函数集也就失去了存在价值。虽然直接使用 new jQuery() 也是允许的，但是由于该函数的返回值覆盖了 new jQuery() 创建的实例对象，所以使用 new jQuery() 来构建 jQuery 对象也是无法存活的。 （---???----）
=====  总之，jQuery 对象其实就是 jQuery.fn.init 构造器创建的对象，而通过 jQuery.fn.init.prototype = jQuery.fn; 途径，再使用 jQuery 的原型对象去覆盖 jQuery.fn 的原型对象，使得 jQuery 对象的原型方法也就被继承过来，从而形成了错综复杂但又井然有序的关系。 =====

2.3.3 jQuery 构造器

jQuery.fn.init() 负责对传入参数进行分析，然后生成并返回 jQuery 对象。jQuery.fn.init() 构造器的第一个参数是必须的，如果为空，则默认为 document 。
从本质上讲，使用 jQuery 选择器 (即 jQuery.fn.init() 构造器) 构建jQuery对象，就是在this 对象上附加 DOM 元素集合。附加的方式包括以下两类。
  • 如果是单个 DOM 元素，可以直接把 DOM 元素作为数组元素传递给 this 对象，还可以通过 ID 从 DOM 文档中查询元素。
  • 如果是多个 DOM 元素，则以集合形式附加，如 jQuery 对象、数组和对象等，此时可以通过 CSS 选择器匹配到所有 DOM 元素，然后过滤，最后构建类数组的数据结构。
而 CSS 选择器，则是通过 jQuery().find(selector) 函数来完成的。通过 jQuery().find(selector) 可以分析选择器字符串，并在 DOM 文档树中查找到符合语法的元素集合。这个函数我们将在下面章节进行分析。该函数能够兼容 CSS1 ~ CSS3 选择器。
下面就从 init() 初始化构造器函数开始，来分析 jQuery 选择器是如何工作的。为了方便解释，我们先结合源代码进行讲解。
[html] view plaincopy
  1. <script type="text/javascript">  
  2. (function(){  
  3. var   
  4.     window = this,  
  5.     jQuery = window.jQuery = window.$ = function(selector, context){  
  6.         return new jQuery.fn.init(selector, context);  
  7.     },  
  8.     quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/;  
  9.       
  10. // jQuery 原型对象  
  11. // 构造 jQuery 对象的入口  
  12. // 所有 jQuery 对象方法都通过 jQuery 原型对象来继承  
  13. jQuery.fn = jQuery.prototype = {  
  14.     // jQuery 对象初始化构造器，相当于 jQuery 对象的类型，由该函数负责创建 jQuery 对象  
  15.     // 参数说明：selector: 选择器的符号，可以是任意数据类型。考虑DOM元素操作需要，该参数应该是包含DOM元素的任何数据  
  16.     // context: 上下文，指定在文档DOM中哪个节点下开始进行查询，默认值为 document  
  17.     init: function(selector, context){  
  18.         selector = selector || document; // 确保 selector 参数存在，默认值为document  
  19.         // 第一种情况，处理选择符为 DOM 元素，此时将忽略上下文，即忽略第二个参数  
  20.         // 例如，$(document.getElementById("wrap")), jQuery(DOMElement) 匹配DOM元素。  
  21.         // 先使用 selector.nodeType 判断当 selector 为元素节点，将 length 设置为 1，  
  22.         // 并且赋值给 context ，实际上 context 作为 init 的第二个参数，  
  23.         // 也意味着它的上下文节点就是 selector 该点，返回它的 $(DOMElement) 对象  
  24.         if(selector.nodeType){  // 存在 nodeType 属性，说明选择符是一个 DOM 元素  
  25.             this[0] = selector; // 直接把当前参数的 DOM 元素存入类数组中  
  26.             this.length = 1;    // 设置类数组的长度，以方便遍历访问  
  27.             this.context = selector; // 设置上下文属性  
  28.             return this;  // 返回 jQuery 对象，即类数组对象  
  29.         }  
  30.         // 如果选择符参数为字符串，则进行处理  
  31.         // 例如，$("<div>hello,world</div>"), jQuery(html, [ownerDocument]) 匹配HTML字符串  
  32.         if(typeof selector == "string"){  
  33.             // 使用 quickExpr 正则表达式匹配该选择符字符串，决定是处理 HTML 字符串，还是处理 ID 字符串  
  34.             // quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/   
  35.             // quickExpr 匹配 包含 < > 的字符串 或 # 后跟 [a-zA-Z0-9_] 或 - 的字符串  
  36.             var match = quickExpr.exec(selector);  
  37.             // 验证匹配的信息，任何情况下都不是 #id  
  38.             if (match && (match[1] || !context)){  
  39.                 // 第二种情况，处理 HTML 字符串，类似 $(html) -> $(array)  
  40.                 if (match[1]){  
  41.                     //selector = jQuery.clean( [ match[1] ], context );  
  42.                 }  
  43.                 // 第三种情况，处理 ID 字符串，类似 $("#id")  
  44.                 else {  
  45.                     var elem = document.getElementById(match[3]); // 获取该元素确保元素存在  
  46.                     // 处理在 IE 和 Opera 浏览器下根据 name，而不是 ID 返回元素  
  47.                     if(elem && elem.id != match[3]){  
  48.                         //return jQuery().find( selector ); // 默认调用 document.find() 方法  
  49.                     }  
  50.                     // 否则将把 elem 作为元素参数直接调用 jQuery() 函数，返回 jQuery 对象  
  51.                     var ret = jQuery( elem || [] );  
  52.                     ret.context = document;  // 设置 jQuery 对象的上下文属性  
  53.                     ret.selector = selector; // 设置 jQuery 对象的选择符属性  
  54.                     return ret;  
  55.                 }     
  56.             }else{  
  57.                 // 第四种情况，处理 jQuery(expression, [context])  
  58.                 // 例如，$("div .red") 的表达式字符串  
  59.                 //return jQuery(context).find(selector);  
  60.             }  
  61.         } //else if ( jQuery.isFunction( selector ) )  
  62.             // 第五种情况，处理 jQuery(callback)，即 $(document).ready() 的简写  
  63.             // 例如，$(function(){alert("hello,world");}),  
  64.             // 或者 $(document).ready(function(){alert("hello,world");});  
  65.             // return jQuery( document ).ready( selector );  
  66.         // 确保旧的选择符能够通过  
  67.         if (selector.selector && selector.context){  
  68.             this.selector = selector.selector;  
  69.             this.context = selector.context;  
  70.         }  
  71.         // 第六种情况，处理类似 $(elements)  
  72.         //return this.setArray(jQuery.isArray(selector)? selector: jQuery.makeArray(selector));  
  73.     }  
  74. };  
  75.   
  76. })();  
  77. </script>  
进一步分析 init() 构造器函数的设计思路如下。
(1) 第一步，当第一个参数为 DOM 元素，则废弃第二个参数，直接把 DOM 元素存储到 jQuery 对象的集合中，返回该 jQuery 对象。
(2) 第二步，如果第一个参数是字符串，则可能存在三种情况。
  • 情况一，第一个参数是 HTML 标签字符串，第二个参数可选，则执行 selector = jQuery.clean([match[1]], context); 该语句能够把 HTML 字符串转换成 DOM 对象的数组，然后执行 Array 类型数组并返回 jQuery 对象。
  • 情况二，第一个参数是 #id 字符串，即类似 $(id)，则先使用 document.getElementById() 方法获取该元素，如果没有获得元素，则设置 selector = []，转到执行 Array 类型，并返回空集合的 jQuery 对象。如果获得元素，则构建 jQuery 对象并返回。这里把 #id 单独列出，是为了提高性能。
  • 情况三，处理复杂的 CSS 选择符字符串，第二个参数是可选的。通过 return jQuery().find(selector); 语句实现。该语句先执行 jQuery(context) ，可以看出第二个参数 context 可以是任意值，也可以是集合数据。然后调用 find(selector) 找到 jQuery(context) 上下文中所有的 DOM 元素，即这些元素都满足 selector 表达式，最后构建 jQuery 对象并返回。
(3) 第三步，如果第一个参数是函数，则第二个参数可选。它是 $(document).ready(fn) 形式的简写，return jQuery(document)[jQuery.fn.ready? "ready": "load"](selector) 是其执行的代码。该语句先执行 jQuery(document) ，再通过 new jQuery.fn.init() 方式创建 jQuery 对象，此时元素为 document 。再调用这个对象的 ready() 方法，并返回当前的 jQuery 对象。
$(document).ready(fn) 是实现 domReady 的 jQuery 对象的统一入口，可以通过 $(fn) 注册 domReady 的监听函数。所有的调用 jQuery 实现功能的代码都应该在 domReady 之后才能够运行。$(fn) 是所有应用开发中的功能代码的入口，它支持任意多的 $(fn) 注册。
(4) 第四步，如果第一个参数是除 DOM 元素、函数和字符串之外的所有其他类型，也可以为空 (如$())，而第二个参数可选。调用 return this.setArray(jQuery.makeArray(selector)); 进行处理时，它先是把第一个参数转换为数组。当然这个参数可以是类数组结构的集合，如 jQuery 对象、getElementsByTag 返回的 DOM 元素集合等，可支持 $(this) 。selector 还可能是单个任意对象，转换成标准的数组之后，执行 this.setArray 把这个数组中的元素全部存储到当前的 jQuery对象集合中，并返回 jQuery 对象。
本文转载:CSDN博客

阅读排行

分类

归档