前端進階（十一）：詳細圖解jQuery對象
- PHPz原創
- 2017-04-04 17:58:311290瀏覽
配圖與本文無關
提早幾年學習前端，大家都非常熱衷於研究jQuery原始碼。還記得當初從jQuery原始碼中學到一星半點應用技巧的時候常會有一種發自內心的驚嘆，「原來JavaScript居然可以這樣用！」
雖然隨著前端的發展，另外幾種前端框架的崛起，jQuery慢慢變得不再是必須。因此大家對於jQuery的熱情低了許多。但是許多從jQuery學到的技巧用在實際開發中仍然非常好用。簡單的了解它也有助於我們更深入的理解JavaScript。
這篇文章的主要目的就是跟大家分享一下，jquery物件是如何封裝的。算是對於大家進一步學習jQuery源碼的一個拋磚引玉。
使用jQuery物件時，我們會這樣寫：
// 声明一个jQuery对象
$('.target')
// 获取元素的css属性
$('.target').css('width')
// 获取元素的位置信息
$('.target').offset()
在使用之初可能會有許多疑問，例如$是怎麼回事？為什麼不用new就可以直接宣告一個物件等等。後來了解之後，才知道原來這正是jQuery物件創作的巧妙之處。
先直接用程式碼展示出來，再用圖跟大家解釋是怎麼回事。
;
(function(ROOT) {
// 构造函数
var jQuery = function(selector) {
// 在jQuery中直接返回new过的实例，这里的init是jQuery的真正构造函数
return new jQuery.fn.init(selector)
}
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
version: '1.0.0',
init: function(selector) {
// 在jquery中这里有一个复杂的判断，但是这里我做了简化
var elem, selector;
elem = document.querySelector(selector);
this[0] = elem;
// 在jquery中返回一个由所有原型属性方法组成的数组，我们这里简化，直接返回this即可
// return jQuery.makeArray(selector, this);
return this;
},
// 在原型上添加一堆方法
toArray: function() {},
get: function() {},
each: function() {},
ready: function() {},
first: function() {},
slice: function() {}
// ... ...
}
jQuery.fn.init.prototype = jQuery.fn;
// 实现jQuery的两种扩展方式
jQuery.extend = jQuery.fn.extend = function(options) {
// 在jquery源码中会根据参数不同进行很多判断，我们这里就直接走一种方式，所以就不用判断了
var target = this;
var copy;
for(name in options) {
copy = options[name];
target[name] = copy;
}
return target;
}
// jQuery中利用上面实现的扩展机制，添加了许多方法，其中
// 直接添加在构造函数上，被称为工具方法
jQuery.extend({
isFunction: function() {},
type: function() {},
parseHTML: function() {},
parseJSON: function() {},
ajax: function() {}
// ...
})
// 添加到原型上
jQuery.fn.extend({
queue: function() {},
promise: function() {},
attr: function() {},
prop: function() {},
addClass: function() {},
removeClass: function() {},
val: function() {},
css: function() {}
// ...
})
// $符号的由来，实际上它就是jQuery，一个简化的写法，在这里我们还可以替换成其他可用字符
ROOT.jQuery = ROOT.$ = jQuery;
})(window);
在上面的程式碼中，我封裝了一個簡化版的jQuery物件。它向大家簡單展示了jQuery的整體框架狀況。如果了解了整體框架，那麼大家去讀jQuery源碼，就會變得非常輕鬆。
我們在程式碼中可以看到，jQuery本身對於原型的處理使用了一些巧妙的語法，例如jQuery.fn = jQuery.prototype，jQuery.fn.init .prototype = jQuery.fn;等，這幾句正式jQuery物件的關鍵所在，下面我用圖給大家展示一下這中間的邏輯是怎麼回事。
jQuery物件核心圖
# 物件封裝分析
在上面的實作中，程式碼首先在jQuery建構函式中宣告了一個fn屬性，並將其指向了原型jQuery.prototype。並在原型中加入了init方法。
jQuery.fn = jQuery.prototype = {
init: {}
}
之後又將init的原型，指向了jQuery.prototype。
jQuery.fn.init.prototype = jQuery.fn;
而在建構子jQuery中，傳回了init的實例物件。
var jQuery = function(selector) {
// 在jQuery中直接返回new过的实例，这里的init是jQuery的真正构造函数
return new jQuery.fn.init(selector)
}
最後對外暴露入口時，將字元$與jQuery對等起來。
ROOT.jQuery = ROOT.$ = jQuery;
因此當我們直接使用$('#test')建立一個物件時，實際上是建立了一個init的實例，這裡的正真建構函式是原型中的init方法。
注意：許多對jQuery內部實作不太了解的盆友，在使用jQuery時常常會毫無節制使用$()，例如同一個元素的不同操作：
var width = parseInt($('#test').css('width'));
if(width > 20) {
$('#test').css('backgroundColor', 'red');
}
透過我們上面的一系列分析，我們知道每當我們執行$()時，就會重新產生一個init的實例對象，因此當我們這樣沒有節制的使用jQuery時是非常不正確的，雖然看起來方便了一些，但是對於記憶體的消耗是非常大的。正確的做法是既然是同一個對象，那就用一個變數保存起來後續使用即可。
var $test = $('#test');
var width = parseInt($test.css('width'));
if(width > 20) {
$test.css('backgroundColor', 'red');
}
擴充方法分析
在上面的程式碼實作中，我還簡單實作了兩個擴充方法。
jQuery.extend = jQuery.fn.extend = function(options) {
// 在jquery源码中会根据参数不同进行很多判断，我们这里就直接走一种方式，所以就不用判断了
var target = this;
var copy;
for(name in options) {
copy = options[name];
target[name] = copy;
}
return target;
}
要理解它的實現，我們首先要明確的知道this的指向。如果你搞不清楚，可以回頭去看看我們之前關於this指向的講解。傳入的參數options對象為一個<a href="http://www.php.cn/wiki/1051.html" target="_blank">key</a>: value模式的對象，我透過for in遍歷options，將key作為jQuery的新屬性，value作為此新屬性所對應的新方法，分別加入jQuery方法和jQuery.fn。
也就是說，當我們透過jQuery.extend擴展jQuery時，方法被加入了jQuery建構函式中，而當我們透過jQuery.fn.extend擴展jQuery時，方法被加入了jQuery原型中。
上面的例子中，我也簡單地展示了在jQuery內部，許多方法的實作都是透過這兩個擴充方法來完成的。
当我们通过上面的知识了解了jQuery的大体框架之后，那么我们对于jQuery的学习就可以具体到诸如css/val/attr等方法是如何实现这样的程度，那么源码学习起来就会轻松很多，也会节约更多的时间。也给一些对于源码敬而远之的朋友提供了一个学习的可能。
有一个朋友留言给我，说她被静态方法，工具方法和实例方法这几个概念困扰了很久，到底他们有什么区别？
其实在上一篇文章中，关于封装一个对象，我跟大家分享了一个非常非常干货，但是却只有少数几个读者老爷get到的知识，那就是在封装对象时，属性和方法可以具体放置的三个位置，并且对于这三个位置的不同做了一个详细的解读。
而在实现jQuery扩展方法的想法中，一部分方法需要扩展到jQuery构造函数中，一部分方法需要扩展到原型中，当我们通读jQuery源码，还发现有一些方法放在了模块作用域中，至于为什么会有这样的区别，建议大家回过头去读读前一篇文章。
而放在构造函数中的方法，因为我们在使用时，不需要声明一个实例对象就可以直接使用，因此这样的方法常常被叫做工具方法，或者所谓的静态方法。工具方法在使用时因为不用创建新的实例，因此相对而言效率会高很多，但是并不节省内存。
而工具方法的特性也和工具一词非常贴近，他们与实例的自身属性毫无关联，仅仅只是实现一些通用的功能，我们可以通过$.each与$('p').each这2个方法来体会工具方法与实例方法的不同之处。
在实际开发中，我们运用得非常多的一个工具库就是lodash.js，大家如果时间充裕一定要去学习一下他的使用。
$.ajax() $.isFunction() $.each() ... ...
而放在原型中的方法，在使用时必须创建了一个新的实例对象才能访问，因此这样的方法叫做实例方法。也正是由于必须创建了一个实例之后才能访问，所以他的使用成本会比工具方法高很多。但是节省了内存。
$('#test').css()
$('#test').attr()
$('p').each()
这样，那位同学的疑问就很简单的被搞定了。我们在学习的时候，一定不要过分去纠结一些概念，而要明白具体怎么回事儿，那么学习这件事情就不会在一些奇奇怪怪的地方卡住了。
所以通过$.extend扩展的方法，其实就是对工具方法的扩展，而通过$.fn.extend扩展的方法，就是对于实例方法的扩展。那么我们在使用的时候就知道如何准确的去使用自己扩展的方法了。
jQuery插件的实现
我在初级阶段的时候，觉得要自己编写一个jQuery插件是一件高大上的事情，可望不可即。但是通过对于上面的理解，我就知道扩展jQuery插件其实是一件我们自己也可以完成的事情。
在前面我跟大家分享了jQuery如何实现，以及他们的方法如何扩展，并且前一篇文章分享了拖拽对象的具体实现。所以建议大家暂时不要阅读下去，自己动手尝试将拖拽扩展成为jQuery的一个实例方法，那么这就是一个jQuery插件了。
具体也没有什么可多说的了，大家看了代码就可以明白一切。
// Drag对象简化代码，完整源码可在上一篇文章中查看
;
(function() {
// 构造
function Drag(selector) {}
// 原型
Drag.prototype = {
constructor: Drag,
init: function() {
// 初始时需要做些什么事情
this.setDrag();
},
// 稍作改造，仅用于获取当前元素的属性，类似于getName
getStyle: function(property) {},
// 用来获取当前元素的位置信息，注意与之前的不同之处
getPosition: function() {},
// 用来设置当前元素的位置
setPostion: function(pos) {},
// 该方法用来绑定事件
setDrag: function() {}
}
// 一种对外暴露的方式
window.Drag = Drag;
})();
// 通过扩展方法将拖拽扩展为jQuery的一个实例方法
(function ($) {
$.fn.extend({
becomeDrag: function () {
new Drag(this[0]);
return this; // 注意：为了保证jQuery所有的方法都能够链式访问，每一个方法的最后都需要返回this，即返回jQuery实例
}
})
})(jQuery);
后续文章内容一个大概预想
去年年末的时候就有了想要将JavaScript基础知识总结一下的这样一个想法，可是JavaScript基础知识确实并非全部是层层递进的关系，有很多碎片化的东西，所以之前一直没有找到一个合适的整理方法。
直到在segmentfault中我在给题主建议如何快速学习一门诸如react/vue这样的流行框架时，找到了一个好一点的思路，于是就有了这样一系列文章，虽然它并不全面，很多知识没有涉及到，但是其实我是围绕最终通过模块化来构建自己代码这样一个思路来总结的，因此这系列文章能够解决大家最核心的问题。
也正因为如此，这系列的文章的终点将会是在ES6环境下掌握react的使用。虽然前面我多多少少都涉及到了模块的一些概念，但是还差一个实践。因此最终我会以ES6的模块跟大家分享如何使用。
那么后续的文章应该会涉及的内容，就大概包括：
這系列文章，算是對於大家學習方向的一個具體的，切實可行的一個指引，而非簡單的透過雞湯的方式告訴你應該如何學習。所以，想要學習這些知識的朋友，趕快來關注我吧！ ！ ！ ！
以上是前端進階（十一）：詳細圖解jQuery對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！