UI 鑒賞

早幾年學(xué)習(xí)前端，大家都非常熱衷于研究jQuery源碼。

我至今還記得當(dāng)初從jQuery源碼中學(xué)到一星半點(diǎn)應(yīng)用技巧的時(shí)候常會(huì)有一種發(fā)自內(nèi)心的驚嘆，“原來(lái)JavaScript居然可以這樣用！”

但是隨著前端的迅猛發(fā)展，另外幾種前端框架的崛起，jQuery慢慢變得不再是必須。所有人對(duì)jQuery的熱情都降低了許多。

jQuery在前端史上有它非常超然的歷史地位，許多從中學(xué)到的技巧在實(shí)踐開發(fā)中仍然非常好用。簡(jiǎn)單的了解它有助于我們更加深入的理解JavaScript。如果你能夠從中看明白jquery是如何一步步被取代的，那么，我想你的收益遠(yuǎn)不止學(xué)會(huì)使用了一個(gè)庫(kù)那么簡(jiǎn)單。

因此，我的態(tài)度是，項(xiàng)目中你可以不用，但是我仍然建議你學(xué)。

這篇文章的主要目的，是從面向?qū)ο蟮慕嵌?#xff0c;跟大家分享jquery對(duì)象是如何封裝的。算是對(duì)大家進(jìn)一步學(xué)習(xí)jQuery源碼的一個(gè)拋磚引玉。

1

使用jQuery對(duì)象時(shí)，我們這樣寫：

// 聲明一個(gè)jQuery對(duì)象$('.target')// 獲取元素的css屬性$('.target').css('width')// 獲取元素的位置信息$('.target').offset()

在使用之初可能會(huì)有許多疑問(wèn)，比如$是怎么回事？為什么不用new就可以直接聲明一個(gè)對(duì)象？等等。了解之后，才知道原來(lái)這正是jQuery對(duì)象創(chuàng)建的巧妙之處。

先直接用代碼展示出來(lái)，再用圖跟大家解釋是怎么回事。

;(function (ROOT) { // 構(gòu)造函數(shù) var jQuery = function (selector) { // 在jQuery中直接返回new過(guò)的實(shí)例，這里的init是jQuery的真正構(gòu)造函數(shù) return new jQuery.fn.init(selector) } jQuery.fn = jQuery.prototype = { constructor: jQuery, version: '1.0.0', init: function (selector) { // 在jquery中這里有一個(gè)復(fù)雜的判斷，但是這里我做了簡(jiǎn)化 var elem, selector; elem = document.querySelector(selector); this[0] = elem; // 在jquery中返回一個(gè)由所有原型屬性方法組成的數(shù)組，我們這里簡(jiǎn)化，直接返回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; // 實(shí)現(xiàn)jQuery的兩種擴(kuò)展方式 jQuery.extend = jQuery.fn.extend = function (options) { // 在jquery源碼中會(huì)根據(jù)參數(shù)不同進(jìn)行很多判斷，我們這里就直接走一種方式，所以就不用判斷了 var target = this; var copy; for (name in options) { copy = options[name]; target[name] = copy; } return target; } // jQuery中利用上面實(shí)現(xiàn)的擴(kuò)展機(jī)制，添加了許多方法，其中 // 直接添加在構(gòu)造函數(shù)上，被稱為工具方法 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 () { } // ... }) // $符號(hào)的由來(lái)，實(shí)際上它就是jQuery，一個(gè)簡(jiǎn)化的寫法，在這里我們還可以替換成其他可用字符 ROOT.jQuery = ROOT.$ = jQuery;})(window);

在上面的代碼中，我封裝了一個(gè)簡(jiǎn)化版的jQuery對(duì)象。

它向大家簡(jiǎn)單展示了jQuery的整體骨架。

在代碼中可以看到，jQuery自身對(duì)于原型的處理使用了一些巧妙的方式，比如jQuery.fn = jQuery.prototype，jQuery.fn.init.prototype = jQuery.fn;等，這幾句正是jQuery對(duì)象的關(guān)鍵所在?？磮D分析。

jQuery對(duì)象核心圖

2

對(duì)象封裝分析

在上面的實(shí)現(xiàn)中，首先在jQuery構(gòu)造函數(shù)里聲明了一個(gè)fn屬性，并將其指向了原型jQuery.prototype。然后在原型中添加了init方法。

jQuery.fn = jQuery.prototype = { init: {}}

之后又將init的原型，指向了jQuery.prototype。

jQuery.fn.init.prototype = jQuery.fn;

而在構(gòu)造函數(shù)jQuery中，返回了init的實(shí)例對(duì)象。

var jQuery = function (selector) { // 在jQuery中直接返回new過(guò)的實(shí)例，這里的init是jQuery的真正構(gòu)造函數(shù) return new jQuery.fn.init(selector)}

最后對(duì)外暴露入口時(shí)，將字符$與jQuery對(duì)等起來(lái)。

ROOT.jQuery = ROOT.$ = jQuery;

因此當(dāng)我們直接使用$('#test')創(chuàng)建一個(gè)對(duì)象時(shí)，實(shí)際上是創(chuàng)建了一個(gè)init的實(shí)例，這里的真正構(gòu)造函數(shù)是原型中的init方法。

注意：許多對(duì)jQuery內(nèi)部實(shí)現(xiàn)不太了解的盆友，常常會(huì)毫無(wú)節(jié)制使用$()，比如對(duì)于同一個(gè)元素的不同操作：

var width = parseInt($('#test').css('width'));if(width > 20) { $('#test').css('backgroundColor', 'red');}

通過(guò)我們上面的一系列分析，我們知道每當(dāng)我們執(zhí)行$()時(shí)，就會(huì)重新生成一個(gè)init的實(shí)例對(duì)象，因此當(dāng)我們這樣沒有節(jié)制的使用jQuery是非常不正確的，雖然看上去方便了一些，但是對(duì)于內(nèi)存的消耗非常大。正確的做法是既然是同一個(gè)對(duì)象，那么就用一個(gè)變量保存起來(lái)后續(xù)使用即可。

var $test = $('#test');var width = parseInt($test.css('width'));if(width > 20) { $test.css('backgroundColor', 'red');}

3

擴(kuò)展方法分析

在上面的代碼實(shí)現(xiàn)中，我還簡(jiǎn)單實(shí)現(xiàn)了兩個(gè)擴(kuò)展方法。

jQuery.extend = jQuery.fn.extend = function (options) { // 在jquery源碼中會(huì)根據(jù)參數(shù)不同進(jìn)行很多判斷，我們這里就直接走一種方式，所以就不用判斷了 var target = this; var copy; for (name in options) { copy = options[name]; target[name] = copy; } return target;}

要理解它的實(shí)現(xiàn)，首先要明確知道this的指向。如果你搞不清楚，可以回頭去看看我們之前關(guān)于this指向的講解。

傳入的參數(shù)options為一個(gè)key: value模式的對(duì)象，我通過(guò)for in遍歷options，將key作為jQuery的新屬性，value作為該新屬性所對(duì)應(yīng)的新方法，分別添加到j(luò)Query方法和jQuery.fn中。

也就是說(shuō)，當(dāng)我們通過(guò)jQuery.extend擴(kuò)展jQuery時(shí)，方法被添加到了jQuery構(gòu)造函數(shù)中，而當(dāng)我們通過(guò)jQuery.fn.extend擴(kuò)展jQuery時(shí)，方法被添加到了jQuery原型中。

上面的例子中，我也簡(jiǎn)單展示了在jQuery內(nèi)部，許多方法的實(shí)現(xiàn)都是通過(guò)這兩個(gè)擴(kuò)展方法來(lái)完成的。

當(dāng)我們通過(guò)上面的知識(shí)了解了jQuery的大體框架之后，我們對(duì)于jQuery的學(xué)習(xí)就可以具體到諸如css/val/attr等方法是如何實(shí)現(xiàn)這樣的程度，那么源碼學(xué)習(xí)起來(lái)就會(huì)輕松很多，節(jié)省更多的時(shí)間。也給一些對(duì)于源碼敬而遠(yuǎn)之的朋友提供一個(gè)學(xué)習(xí)的可能。

4

有一個(gè)朋友留言給我，說(shuō)她被靜態(tài)方法，工具方法和實(shí)例方法這幾個(gè)概念困擾了很久，到底他們有什么區(qū)別？

其實(shí)在上一篇文章中，關(guān)于封裝一個(gè)對(duì)象，我跟大家分享了一個(gè)非常非常干，但是卻只有少數(shù)幾個(gè)讀者大佬g(shù)et到的知識(shí)，那就是在封裝對(duì)象時(shí)，屬性和方法可以具體放置的三個(gè)位置，并且對(duì)于這三個(gè)位置的不同做了一個(gè)詳細(xì)的解讀。

image.png

在實(shí)現(xiàn)jQuery擴(kuò)展方法時(shí)，一部分方法需要擴(kuò)展到構(gòu)造函數(shù)中，一部分方法需要擴(kuò)展到原型中，當(dāng)我們通讀jQuery源碼時(shí)，還發(fā)現(xiàn)有一些方法放在了模塊作用域中，至于為什么會(huì)有這樣的區(qū)別，建議大家回過(guò)頭去讀讀前一篇文章。

這里用一個(gè)例子簡(jiǎn)單區(qū)分一下。

// 模塊內(nèi)部const a = 20;function Person(name, age) { this.name = name; this.age = age; // 構(gòu)造函數(shù)方法，每聲明一個(gè)實(shí)例，都會(huì)重新創(chuàng)建一次，屬于實(shí)例獨(dú)有 this.getName = function() { return this.name; }}// 原型方法，僅在原型創(chuàng)建時(shí)聲明一次，屬于所有實(shí)例共享Person.prototype.getAge = function() { return this.age;}// 工具方法，直接掛載在構(gòu)造函數(shù)名上，僅聲明一次，無(wú)法直接訪問(wèn)實(shí)例內(nèi)部屬性與方法Person.each = function() {}

如上例中，each就是一個(gè)工具方法，或者說(shuō)靜態(tài)方法。

工具方法的特性也和工具一詞非常貼近，他們與實(shí)例的自身屬性毫無(wú)關(guān)聯(lián)，僅僅只是實(shí)現(xiàn)一些通用的功能，我們可以通過(guò)$.each與$('div').each這2個(gè)方法來(lái)體會(huì)工具方法與實(shí)例方法的不同之處。

在實(shí)際開發(fā)中，我們運(yùn)用得非常多的一個(gè)工具庫(kù)就是lodash.js，大家如果時(shí)間充裕一定要去學(xué)習(xí)一下他的使用。

$.ajax()$.isFunction()$.each()... ...

放在原型中的方法，在使用時(shí)必須創(chuàng)建了一個(gè)新的實(shí)例對(duì)象才能訪問(wèn)，因此這樣的方法叫做實(shí)例方法。也正是因?yàn)檫@一點(diǎn)，他的使用成本會(huì)比工具方法高一些。但是相比構(gòu)造函數(shù)方法，原型方法更節(jié)省內(nèi)存。

$('#test').css()$('#test').attr()$('div').each()

這樣，那位同學(xué)的疑問(wèn)就被搞定啦。我們?cè)趯W(xué)習(xí)的時(shí)候，一定不要過(guò)分去糾結(jié)一些概念，而要明白這些概念背后的具體場(chǎng)景是怎么回事兒，那么學(xué)習(xí)這件事情就不會(huì)在一些奇奇怪怪的地方卡住了。

所以通過(guò)$.extend擴(kuò)展的方法，其實(shí)就是對(duì)工具方法的擴(kuò)展，而通過(guò)$.fn.extend擴(kuò)展的方法，就是對(duì)于實(shí)例方法的擴(kuò)展。

5

jQuery插件的實(shí)現(xiàn)

我在初級(jí)階段時(shí)，覺得要自己編寫一個(gè)jQuery插件是超級(jí)高大上的事情，可望不可即。但是通過(guò)對(duì)于上面的理解，我就知道擴(kuò)展jQuery插件其實(shí)是一件我們自己也可以完成的事情。

在前面我跟大家分享了jQuery如何實(shí)現(xiàn)，以及他們的方法如何擴(kuò)展，并且前一篇文章分享了拖拽對(duì)象的具體實(shí)現(xiàn)。所以建議大家暫時(shí)不要閱讀下去，自己動(dòng)手嘗試將拖拽擴(kuò)展成為jQuery的一個(gè)實(shí)例方法，這就是一個(gè)jQuery插件了。

具體也沒有什么可多說(shuō)的了，大家看了代碼就可以明白一切。

// Drag對(duì)象簡(jiǎn)化代碼，完整源碼可在上一篇文章中查看;(function () { // 構(gòu)造 function Drag(selector) { } // 原型 Drag.prototype = { constructor: Drag, init: function () { // 初始時(shí)需要做些什么事情 this.setDrag(); }, // 稍作改造，僅用于獲取當(dāng)前元素的屬性，類似于getName getStyle: function (property) { }, // 用來(lái)獲取當(dāng)前元素的位置信息，注意與之前的不同之處 getPosition: function () { }, // 用來(lái)設(shè)置當(dāng)前元素的位置 setPostion: function (pos) { }, // 該方法用來(lái)綁定事件 setDrag: function () { } } // 一種對(duì)外暴露的方式 window.Drag = Drag;})();// 通過(guò)擴(kuò)展方法將拖拽擴(kuò)展為jQuery的一個(gè)實(shí)例方法(function ($) { $.fn.extend({ becomeDrag: function () { new Drag(this[0]); return this; // 注意：為了保證jQuery所有的方法都能夠鏈?zhǔn)皆L問(wèn)，每一個(gè)方法的最后都需要返回this，即返回jQuery實(shí)例 } })})(jQuery);

下一篇：前端基礎(chǔ)進(jìn)階(十四)：深入核心，詳解事件循環(huán)機(jī)制

建議收藏，不然刷著刷著就可能找不到了。

有什么前端的問(wèn)題歡迎私信我~期待你的到來(lái)。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個(gè)月整理了一份最適合2020年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取

總結(jié)

以上是生活随笔為你收集整理的jquery function_前端基础进阶（十三）详细图解jQuery扩展jQuery插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。