【深入浅出jQuery】源码浅析2--奇技淫巧

最近一直在研读 jquery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。

其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。

另外，阅读源码让我接触到了大量底层的知识。对原生*S 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。

&*bsp;

本篇是系列第二篇，标题起得有点大，希望内容对得起这个标题，这篇文章主要总结一下在 jQuery 中一些十分讨巧的 cod*** 方式，将会由浅及深，可能会有一些基础，但是我希望全面一点，对看文章的人都有所帮助，源码我还一直在阅读，也会不断的更新本文。

即便你不想去阅读源码，看看下面的总结，我想对提高编程能力，转换思维方式都大有裨益，废话少说，进入正题。

&*bsp;

&*bsp; &*bsp;短路表达式 与 多重短路表达式

短路表达式这个应该人所皆知了。在 jQuery 中，大量的使用了短路表达式与多重短路表达式。

短路表达式：作为"&&"和"||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。这是这两个操作符的一个重要属性。

当然，上面两个例子是短路表达式最简单是情况，多数情况下，jQuery 是这样使用它们的：

嗯，可以看到，d*ff 的值经历了多重短路表达式配合一些全等判断才得出，这种代码很优雅，但是可读性下降了很多，使用的时候权衡一下，多重短路表达式和简单短路表达式其实一样，只需要先把后面的当成一个整体，依次推进，得出最终值。

这里需要提出一些值得注意的点：

1、在 *avascr*pt 的逻辑运算中，0、""、*ull、false、u*def**ed、NaN 都会判定为 false ，而其他都为 true ；

2、因为 *avascr*pt 的内置弱类型域 (weak-typ*** doma**)，所以对严格的输入验证这一点不太在意，即便使用 && 或者 ||&*bsp;运算符的运算数不是布尔值，仍然可以将它看作布尔运算。虽然如此，还是建议如下：

注重细节，*avaScr*pt 既不弱也不低等，我们只是需要更努力一点工作以使我们的代码变得真正健壮。

&*bsp;

&*bsp; &*bsp;预定义常用方法的入口

在 jQuery 的头几十行，有这么一段有趣的代码：

不得不说，jQuery 在细节上做的真的很好，这里首先定义了一个对象变量、一个字符串变量、数组变量，要注意这 3 个变量本身在下文是有自己的用途的（可以看到，jQuery 作者惜字如金，真的是去压榨每一个变量的作用，使其作用最大化）；其次，借用这三个变量，再定义些常用的核心方法，从上往下是数组的 co*cat、push 、sl*ce 、**dexOf 方法，对象的 toStr*** 、hasOw**roperty 方法以及字符串的 tr*m 方法，core_xxxx 这几个变量事先存储好了这些常用方法的入口，如果下文行文当中需要调用这些方法，将会：

那么 jQuery 为什么要这样做呢，我觉得：

1、以数组对象的 co*cat 方法为例，如果不预先定义好&*bsp;core_co*cat = core_deletedIds.co*cat 而是调用实例 arr 的方法 co*cat 时，首先需要辨别当前实例 arr 的类型是 Array，在内存空间中寻找 Array 的 co*cat 内存入口，把当前对象 arr 的指针和其他参数压入栈，跳转到 co*cat 地址开始执行，而当保存了 co*cat 方法的入口 core_co*cat 时，完全就可以省去前面两个步骤，从而提升一些性能；

2、另外一点，借助 call 或者 apply 的方式调用，让一些类数组可以直接调用数组的方法。就如上面是示例，jQuery 对象是类数组类型，可以直接调用数组的 sl*ce 方法转换为数组类型。又譬如，将参数 ar*ume*ts 转换为数组类型：

&*bsp;

&*bsp; &*bsp;钩子机制（hook）

在 jQuery 2.0.0 之前的版本，对兼容性做了大量的处理，正是这样才让广大开发人员能够忽略不同浏览器的不同特性的专注于业务本身的逻辑。而其中，钩子机制在浏览器兼容方面起了十分巨大的作用。

钩子是编程惯用的一种手法，用来解决一种或多种特殊情况的处理。

简单来说，钩子就是适配器原理，或者说是表驱动原理，我们预先定义了一些钩子，在正常的代码逻辑中使用钩子去适配一些特殊的属性，样式或事件，这样可以让我们少写很多 else *f 语句。

如果还是很难懂，看一个简单的例子，举例说明 hook 到底如何使用：

现在考公务员，要么靠实力，要么靠关系，但领导肯定也不会弄的那么明显，一般都是暗箱操作，这个场景用钩子实现再合理不过了。

// 如果不用钩子的情况 // 考生分数以及父亲名 fu*ct*o* exam**ee(*ame, score, fatherName) { &*bsp;&*bsp;&*bsp;&*bsp;retur* { &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;*ame: *ame, &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;score: score, &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;fatherName: fatherName &*bsp;&*bsp;&*bsp;&*bsp;}; } &*bsp; // 审阅考生们 fu*ct*o* jud*e(exam**ees) { &*bsp;&*bsp;&*bsp;&*bsp;var result = {}; &*bsp;&*bsp;&*bsp;&*bsp;for (var * ** exam**ees) { &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;var curExam**ee = exam**ees[*]; &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;var ret = curExam**ee.score; &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;// 判断是否有后门关系 &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;*f (curExam**ee.fatherName === 'x*j***p***') { &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;ret += 1000; &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;} else *f (curExam**ee.fatherName === 'l**a**') { &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;ret += 100; &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;} else *f (curExam**ee.fatherName === 'pe**dehua*') { &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;ret += 50; &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;} &*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;&*bsp;result[curExam**ee.*ame] = ret; &*bsp;&*bsp;&*bsp;&*bsp;} &*bsp;&*bsp;&*bsp;&*bsp;retur* result; } &*bsp; &*bsp; var l*hao = exam**ee("l*hao", 10, 'l**a**'); var x*da = exam**ee('x*da', 8, 'x*j**p***'); var pe** = exam**ee('pe**', 60, 'pe**dehua*'); var l*aox*aofe** = exam**ee('l*aox*aofe**', 100, 'l*aoda**u'); &*bsp; var result = jud*e([l*hao, x*da, pe**, l*aox*aofe**]); &*bsp; // 根据分数选取前三名 for (var *ame ** result) { &*bsp;&*bsp;&*bsp;&*bsp;co*sole.lo*("*ame:" + *ame); &*bsp;&*bsp;&*bsp;&*bsp;co*sole.lo*("score:" + score); } 

可以看到，在中间审阅考生这个函数中，运用了很多 else *f 来判断是否考生有后门关系，如果现在业务场景发生变化，又多了几名考生，那么 else *f 势必越来越复杂，往后维护代码也将越来越麻烦，成本很大，那么这个时候如果使用钩子机制，该如何做呢？

可以看到，使用钩子去处理特殊情况，可以让代码的逻辑更加清晰，省去大量的条件判断，上面的钩子机制的实现方式，采用的就是表驱动方式，就是我们事先预定好一张表（俗称打表），用这张表去适配特殊情况。当然 jQuery 的 hook 是一种更为抽象的概念，在不同场景可以用不同方式实现。

看看 jQuery 里的表驱动 hook 实现，$.type 方法：

这里的 hook 只是 jQuery 大量使用钩子的冰山一角，在对 DOM 元素的操作一块，attr 、val 、prop 、css 方法大量运用了钩子，用于兼容 IE 系列下的一些怪异行为。在遇到钩子函数的时候，要结合具体情境具体分析，这些钩子相对于表驱动而言更加复杂，它们的结构大体如下，只要记住钩子的核心原则，保持代码整体逻辑的流畅性，在特殊的情境下去处理一些特殊的情况：

从某种程度上讲，钩子是一系列被设计为以你自己的代码来处理自定义值的回调函数。有了钩子，你可以将差不多任何东西保持在可控范围内。

从设计模式的角度而言，这种钩子运用了策略模式。

策略模式：将不变的部分和变化的部分隔开是每个设计模式的主题，而策略模式则是将算法的使用与算法的实现分离开来的典型代表。使用策略模式重构代码，可以消除程序中大片的条件分支语句。在实际开发中，我们通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则指向的目标一致，并且可以被替换使用，我们就可以使用策略模式来封装他们。

策略模式的优点：

策略模式利用组合，委托和多态等技术思想，可以有效的避免多重条件选择语句； 策略模式提供了对开放-封闭原则的完美支持，将算法封装在独立的函数中，使得它们易于切换，易于理解，易于扩展。 策略模式中的算法也可以复用在系统的其它地方，从而避免许多重复的复制粘贴工作。

&*bsp;

&*bsp; &*bsp;连贯接口

无论 jQuery 如今的流行趋势是否在下降，它用起来确实让人大呼过瘾，这很大程度归功于它的链式调用，接口的连贯性及易记性。很多人将连贯接口看成链式调用，这并不全面，我觉得连贯接口包含了链式调用且代表更多。而 jQuery 无疑是连贯接口的佼佼者。

1、链式调用：链式调用的主要思想就是使代码尽可能流畅易读，从而可以更快地被理解。有了链式调用，我们可以将代码组织为类似语句的片段，增强可读性的同时减少干扰。（链式调用的具体实现上一章有详细讲到）

2、命令查询同体：这个上一章也讲过了，就是函数重载。正常而言，应该是命令查询分离（Comma*d a*d Query Separat*o*，CQS），是源于命令式编程的一个概念。那些改变对象的状态（内部的值）的函数称为命令，而那些检索值的函数称为查询。原则上，查询函数返回数据，命令函数返回状态，各司其职。而 jQuery 将 *etter 和 setter 方法压缩到单一方法中创建了一个连贯的接口，使得代码暴露更少的方法，但却以更少的代码实现同样的目标。

3、参数映射及处理：jQuery 的接口连贯性还体现在了对参数的兼容处理上，方法如何接收数据比让它们具有可链性更为重要。虽然方法的链式调用是非常普遍的，你可以很容易地在你的代码中实现，但是处理参数却不同，使用者可能传入各种奇怪的参数类型，而 jQuery 作者想的真的很周到，考虑了用户的多种使用场景，提供了多种对参数的处理。

jQuery 的 o*()&*bsp;方法可以注册事件处理器。和 CSS()&*bsp;一样它也可以接收一组映射格式的事件，但更进一步地，它允许单一处理器可以被多个事件注册：

&*bsp;

&*bsp; &*bsp;无 *ew 构造

怎么访问 jQuery 类原型上的属性与方法，怎么做到做到既能隔离作用域还能使用 jQuery 原型对象的作用域呢？重点在于这一句：

这里的关键就是通过原型传递解决问题，这一块上一章也讲过了，看过可以跳过了，将文字搬过来。

嘿，回想一下使用 jQuery 的时候，实例化一个 jQuery 对象的方法：

大部分人使用 jQuery 的时候都是使用第一种无 *ew 的构造方式，直接 $('') 进行构造，这也是 jQuery 十分便捷的一个地方。当我们使用第一种无 *ew 构造方式的时候，其本质就是相当于 *ew jQuery()，那么在 jQuery 内部是如何实现的呢？看看：

大部分人初看&*bsp;jQuery.f*.***t.prototype = jQuery.f* 这一句都会被卡主，很是不解。但是这句真的算是 jQuery 的绝妙之处。理解这几句很重要，分点解析一下：

1）首先要明确，使用 $('xxx') 这种实例化方式，其内部调用的是&*bsp;retur* *ew jQuery.f*.***t(selector, co*text, rootjQuery) 这一句话，也就是构造实例是交给了&*bsp;jQuery.f*.***t() 方法取完成。

2）将 jQuery.f*.***t 的 prototype 属性设置为 jQuery.f*，那么使用 *ew jQuery.f*.***t() 生成的对象的原型对象就是 jQuery.f* ，所以挂载到 jQuery.f* 上面的函数就相当于挂载到 jQuery.f*.***t() 生成的 jQuery 对象上，所有使用&*bsp;*ew jQuery.f*.***t()&*bsp;生成的对象也能够访问到&*bsp;jQuery.f* 上的所有原型方法。

3）也就是实例化方法存在这么一个关系链&*bsp;&*bsp;

jQuery.f*.***t.prototype = jQuery.f* = jQuery.prototype ; *ew jQuery.f*.***t() 相当于 *ew jQuery() ; jQuery() 返回的是 *ew jQuery.f*.***t()，而 var obj = *ew jQuery()，所以这 2 者是相当的，所以我们可以无 *ew 实例化 jQuery 对象。

&*bsp;

&*bsp; &*bsp;setT*meout ** *query

写到这里，发现上文的主题有些飘忽，接近于写成了 如何写出更好的 *avascr*pt 代码，下面介绍一些 jQuery 中我觉得很棒的小技巧。

熟悉 jQuery 的人都知道 DOM Ready 事件，传*avascr*pt原生的 w**dow.o*load 事件是在页面所有的资源都加载完毕后触发的。如果页面上有大图片等资源响应缓慢, 会导致 w**dow.o*load 事件迟迟无法触发，所以出现了DOM Ready 事件。此事件在 DOM 文档结构准备完毕后触发，即在资源加载前触发。另外我们需要在 DOM 准备完毕后，再修改DOM结构，比如添加DOM元素等。而为了完美实现 DOM Ready 事件，兼容各浏览器及低版本IE（针对高级的浏览器，可以使用 DOMCo*te*tLoaded 事件，省时省力），在 jQuery.ready() 方法里，运用了 setT*meout() 方法的一个特性，&*bsp;在 setT*meout 中触发的函数, 一定是在 DOM 准备完毕后触发。

&*bsp;

暂且写这么多吧，技巧还有很多，诸如 $.Deferred() 异步队列的实现，jQuery 事件流机制等，篇幅较长，将会在以后慢慢详述。

原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

如果本文对你有帮助，请点下推荐，写文章不容易。

&*bsp;

海报图正在生成中...

竖版 宽版