資訊專欄INFORMATION COLUMN
摘要：通過(guò)實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用來(lái)理解鏈?zhǔn)秸{(diào)用是我們平常經(jīng)常會(huì)用到，比如中的還有中的。直接用一個(gè)匿名函數(shù)返回一個(gè)的對(duì)象，然后賦值給并掛載到全局上，這樣就實(shí)現(xiàn)了一個(gè)的鏈?zhǔn)秸{(diào)用了。
通過(guò)實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用來(lái)理解
?? 鏈?zhǔn)秸{(diào)用是我們平常經(jīng)常會(huì)用到，比如JQuery中的$("id").eq(0), 還有l(wèi)odash中的_.chain().push()。 這些都是平常會(huì)用到的，但是都是已經(jīng)封裝好的，我們知道用起來(lái)很方便卻不知道實(shí)現(xiàn)的原理是什么。
?? 其實(shí)呢它并沒有很神秘，只不過(guò)是一種語(yǔ)法招數(shù)，它能讓你通過(guò)重用一個(gè)初始操作來(lái)達(dá)到用少量代碼表達(dá)復(fù)雜操作的目的。
通過(guò)例子來(lái)分析鏈?zhǔn)秸{(diào)用
??其實(shí)鏈?zhǔn)秸{(diào)用就是讓一個(gè)類的每個(gè)方法都返回this值，從而達(dá)到鏈?zhǔn)秸{(diào)用
??首先創(chuàng)建一個(gè)構(gòu)造函數(shù),把那些元素作為數(shù)組保存在一個(gè)實(shí)例屬性中，并把所有定義在構(gòu)造器函數(shù)的 prototype屬性指向?qū)ο笾械姆椒ǘ挤祷赜靡哉{(diào)用方法的那個(gè)實(shí)例的引用，那么它就具有了進(jìn)行鏈?zhǔn)秸{(diào)用的能力
我們來(lái)看一下這段例子
$("div")
.eq(0)
.css("width", "200px")
.show();
這其實(shí)就是一段簡(jiǎn)單JQuery代碼，選擇第一個(gè)div設(shè)置css樣式，然后將它顯示出來(lái)。
function JQuery(selector) {
this.elements = document.querySelectorAll(selector);
}
JQuery.prototype = {
eq: function(index) {
this.elements = [this.elements[index]]
return this;
},
css: function(prop, value) {
this.elements.forEach(function(el) {
// 動(dòng)態(tài)設(shè)置屬性
el.style[prop] = value;
})
return this;
},
show: function() {
this.css("display", "block")
return this;
},
}
這段代碼很明顯在prototype上的三個(gè)函數(shù)都返回了this，在函數(shù)中實(shí)現(xiàn)對(duì)應(yīng)的功能也是直接使用this來(lái)獲取值，然后修改this中的值再返回this，這樣在下次調(diào)用的時(shí)候還是JQuery對(duì)象，從而實(shí)現(xiàn)了鏈?zhǔn)秸{(diào)用。
??既然函數(shù)都是在原型鏈上，那么肯定需要?jiǎng)?chuàng)建一個(gè)對(duì)象才能去調(diào)用函數(shù)吧，而我們并沒看到new JQuery，而且也沒有看見$符號(hào)，那怎么才能使用呢。
window.$ = function(selector) {
return new JQuery(selector);
}
$("div")
.eq(0)
.css("width", "200px")
.show();
直接用一個(gè)匿名函數(shù)返回一個(gè)new JQuery()的對(duì)象，然后賦值給$并掛載到全局上，這樣就實(shí)現(xiàn)了一個(gè)JQuery的鏈?zhǔn)秸{(diào)用了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/99672.html
摘要：相信很多小伙伴在面試的過(guò)程中都被問過(guò)鏈?zhǔn)秸{(diào)用的原理，甚至有些面試官還會(huì)讓你用其實(shí)現(xiàn)例如加法操作，舉例第一次看到這個(gè)題目時(shí)，或許你沒有什么頭緒，不要緊，讓我們慢慢來(lái)首先，大家還是否記得在使用時(shí)，我們會(huì)經(jīng)常這樣去操作一個(gè)節(jié)點(diǎn)這是怎么做到的原理很 相信很多小伙伴在面試的過(guò)程中都被問過(guò)js鏈?zhǔn)秸{(diào)用的原理，甚至有些面試官還會(huì)讓你用其實(shí)現(xiàn)例如加法操作，舉例： add(1)(2)(3) //6...
摘要：本回內(nèi)容介紹上一回，聊了聊狀態(tài)模式，并介紹了一下介一回，聊鏈?zhǔn)骄幊蹋M一下，再模擬一下封裝一個(gè)庫(kù)。這一回，主要聊了鏈?zhǔn)秸{(diào)用，模擬了，尤其是，希望大家能喜歡這次代碼分享。下一回，聊一聊的策略模式。 本回內(nèi)容介紹 上一回，聊了聊狀態(tài)模式（State），并介紹了一下vue.js；介一回，聊鏈?zhǔn)骄幊蹋M一下jQuery，再模擬一下underscore.js,封裝一個(gè)庫(kù)。 1. 鏈?zhǔn)秸{(diào)用 (...
摘要：?jiǎn)误w模式在多種設(shè)計(jì)模式中，單體模式是最簡(jiǎn)單，也是最基礎(chǔ)的設(shè)計(jì)模式。和之前說(shuō)到的下劃線表示私用成員方法比較起來(lái)，最大的優(yōu)點(diǎn)就是可以創(chuàng)建真正的私用成員，使其不會(huì)在構(gòu)造函數(shù)之外被隨意修改。 單體模式 在多種Javascript設(shè)計(jì)模式中，單體模式是最簡(jiǎn)單，也是最基礎(chǔ)的設(shè)計(jì)模式。它基礎(chǔ)到似乎不太像是一種設(shè)計(jì)模式，因?yàn)槲覀冊(cè)诰帉懘a的過(guò)程中隨時(shí)都會(huì)用到，并不需要過(guò)多思考，這是它簡(jiǎn)單的一面。同時(shí)...
摘要：最后畫幾張粗糙的圖，簡(jiǎn)單描述一下這個(gè)執(zhí)行的過(guò)程因?yàn)槭擎準(zhǔn)秸{(diào)用，所以在鏈上的都會(huì)入棧然后執(zhí)行，額，執(zhí)行棧少畫了和。。。 前言：昨天在群里討(jin)論(chui)技(niu)術(shù)(pi)，有位老鐵發(fā)了一道他面的某公司面試題，順手保存了。今早花了一點(diǎn)時(shí)間把這題做了出來(lái)，發(fā)現(xiàn)挺有意思的，決定在今天認(rèn)真工（hua)作(shui)前，與大家分享我的解題方案和思考過(guò)程。 題目如下（可以自己先思考一會(huì)...
摘要：鏈?zhǔn)侥Ｊ酵ㄟ^(guò)在對(duì)象方法中將當(dāng)前對(duì)象返回，實(shí)現(xiàn)對(duì)同一個(gè)對(duì)象多個(gè)方法的鏈?zhǔn)秸{(diào)用。我們?cè)囍薷纳厦娴暮瘮?shù)然后執(zhí)行為什么會(huì)報(bào)錯(cuò)呢因?yàn)檫@里，因?yàn)檫@里返回的指向的是，而不是的上并沒有這個(gè)方法。 ??鏈?zhǔn)侥Ｊ剑和ㄟ^(guò)在對(duì)象方法中將當(dāng)前對(duì)象返回，實(shí)現(xiàn)對(duì)同一個(gè)對(duì)象多個(gè)方法的鏈?zhǔn)秸{(diào)用。從而簡(jiǎn)化對(duì)該對(duì)象的多個(gè)方法的多次調(diào)用，對(duì)該對(duì)象的多次引用。 ??jquery是基于原型繼承，每個(gè)原型下的方法都返回當(dāng)前對(duì)象...
閱讀 2551·2023-04-26 00:57
閱讀 922·2021-11-25 09:43
閱讀 2228·2021-11-11 16:55
閱讀 2231·2019-08-30 15:53
閱讀 3600·2019-08-30 15:52
閱讀 1468·2019-08-30 14:10
閱讀 3386·2019-08-30 13:22
閱讀 1218·2019-08-29 11:18
