JavaScript鏈式調(diào)用原理與實現(xiàn)方法詳解
更新時間：2020年05月16日 12:19:03 作者：WFaceBoss
這篇文章主要介紹了JavaScript鏈式調(diào)用,結(jié)合實例形式詳細分析了JavaScript鏈式調(diào)用基本原理、實現(xiàn)方法與相關(guān)操作注意事項,需要的朋友可以參考下
本文實例講述了JavaScript鏈式調(diào)用原理與實現(xiàn)方法。分享給大家供大家參考，具體如下：
1、什么是鏈式調(diào)用？
這個很容易理解，例如
$('text').setStyle('color', 'red').show();
一般的函數(shù)調(diào)用和鏈式調(diào)用的區(qū)別：鏈式調(diào)用完方法后，return this返回當前調(diào)用方法的對象。
首先，我們先來看看一般函數(shù)的調(diào)用方式
（1）先創(chuàng)建一個簡單的類
//創(chuàng)建一個bird類
function Bird(name) {
this.name=name;
this.run=function () {
document.write(name+" "+"start run;");
}
this.stopRun=function () {
document.write(name+" "+"start run;");
}
this.sing=function () {
document.write(name+" "+"start sing;");
}
this.stopSing=function () {
document.write(name+" "+"start stopSing;");
}
}
（2）使用方式：一般的調(diào)用方式
var bird=new Bird("測試");
bird.run();
birdbird.sing();
bird.stopSing();
bird.stopRun();
//結(jié)果為;測試 start run;測試 start sing;測試 start stopSing;測試 start run;
（3）總結(jié)，該種方式有一個弊端就是：多次重復使用一個對象變量
然后，我們再來看看將上述改成鏈式調(diào)用的格式
（1）在創(chuàng)建的簡單類中加上return this，如下
//創(chuàng)建一個bird類
function Bird(name) {
this.name=name;
this.run=function () {
document.write(name+" "+"start run;");
return this;// return this返回當前調(diào)用方法的對象。
}
this.stopRun=function () {
document.write(name+" "+"start run;");
return this;
}
this.sing=function () {
document.write(name+" "+"start sing;");
return this;
}
this.stopSing=function () {
document.write(name+" "+"start stopSing;");
return this;
}
}
（2）使用鏈式調(diào)用（連綴的方式）
var bird=new Bird("測試");
bird.run().sing().stopSing().stopRun();//結(jié)果為;測試 start run;測試 start sing;測試 start stopSing;測試 start run;
（3）總結(jié)此種方式的調(diào)用結(jié)果與一般的調(diào)用方式產(chǎn)生的結(jié)果一樣，優(yōu)點是：鏈式調(diào)用這種風格有助于簡化代碼的編寫工作，讓代碼更加簡潔、易讀，同時也避免多次重復使用一個對象變量
2.模仿jquery的鏈式調(diào)用
第一步，定義一個含參數(shù)的空對象
(function(){
//下劃線：表示私有變量的寫法
function _$(els) { };//有參數(shù)的空對象
})()//程序啟動的時候 里面的代碼直接執(zhí)行了
第二步，準備方法 在_$上定義一個onrReady方法
(function(){
//第一步，下劃線：表示私有變量的寫法
function _$(els) { };//有參數(shù)的空對象
//第二步，準備方法 在_$上定義一個onrReady方法
_$.onrReady=function (fn) {
//按要求把對象（_$）注冊到window對象上
//對外開放的接口
window.$=function () {
return new _$(arguments);//傳遞相應的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
}
fn();
}
}
})()
第三步，為了類（Function）能擴展函數(shù)，我們定義一個它的靜態(tài)函數(shù)
Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
this.prototype[name]=fn;
return this;//鏈式調(diào)用關(guān)鍵
};//這個函數(shù)的意思：為function對象增加函數(shù)，會用鏈式調(diào)用，鏈式調(diào)用有兩個參數(shù)name,和fn
第四步，擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù)
(function(){
//下劃線：表示私有變量的寫法
function _$(els) { };//有參數(shù)的空對象
//第二步，準備方法 在_$上定義一個onrReady方法
_$.onrReady=function (fn) {
//按要求把對象（_$）注冊到window對象上
//對外開放的接口
window.$=function () {
return new _$(arguments);//傳遞相應的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
}
fn();
}
//第四步
//擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù)
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西。
fn();
}).method("getEvent",function (fn,e) {
fn();
})
})()
第五步，使用 ，需要調(diào)用_$.onReady方法才可以返回對象使用從function類繼承而來的原型上的方法
(function () {
// （1）下劃線：表示私有變量的寫法
function _$(els) { };//有參數(shù)的空對象
//（2）準備方法 在_$上定義一個onrReady方法
// window.$=_$;
_$.onrReady=function (fn) {
//按要求把對象（_$）注冊到window對象上 在任何地方都可以使用
//對外開放的接口
window.$=function () {//window 上先注冊一個全局變量 與外界產(chǎn)生關(guān)系
return new _$(arguments);//傳遞相應的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
}
fn();
}
//（4）擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù)
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西。
fn();
}).method("getEvent",function (fn,e) {
fn();
});
//第五步，開始使用 ，需要調(diào)用_$.onready方法才可以返回對象使用從function類繼承而來的原型上的方法
_$.onrReady(function () {//$是綁定在Windows上的
$("").AddEvent("click",function () {
alert("click")
})
})
})()
上述綜合的代碼為
//第三步，為了類（Function）能擴展函數(shù)，我們定義一個它的靜態(tài)函數(shù)
Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
this.prototype[name]=fn;
return this;//鏈式調(diào)用關(guān)鍵
};//這個函數(shù)的意思：為function對象增加函數(shù)，會用鏈式調(diào)用，鏈式調(diào)用有兩個參數(shù)name,和fn
(function () {
// 第一步，下劃線：表示私有變量的寫法
function _$(els) { };//有參數(shù)的空對象
//第二步，準備方法 在_$上定義一個onrReady方法
// window.$=_$;
_$.onrReady=function (fn) {
//按要求把對象（_$）注冊到window對象上
//對外開放的接口
window.$=function () {
return new _$(arguments);//傳遞相應的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
}
fn();
}
//第四步，擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù)
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西，所以可以使用method方法
fn();
}).method("getEvent",function (fn,e) {
fn();
});
//第五步，開始使用，需要調(diào)用_$.onready方法才可以返回對象使用從function類繼承而來的原型上的方法
_$.onrReady(function () {//$是綁定在Windows上的
$("").AddEvent("click",function () {
alert("click")
})
})
})()
上述是將$綁定到window上的操作，如果我們想將$綁定到一個指定對象上我們可以這通過改變上述的第二步和第五步如下，
/**
* Created by 與你在巔峰相會 on 2017/10/12.
*/
//第三步，為了類（Function）能擴展函數(shù)，我們定義一個它的靜態(tài)函數(shù)
Function.prototype.method=function (name,fn) {//（函數(shù)名稱，函數(shù)本身）
this.prototype[name]=fn;
return this;//鏈式調(diào)用關(guān)鍵
};//這個函數(shù)的意思：為function對象增加函數(shù)，會用鏈式調(diào)用，鏈式調(diào)用有兩個參數(shù)name,和fn
(function () {
// 第一步，下劃線：表示私有變量的寫法
function _$(els) { };//有參數(shù)的空對象
//第二步，準備方法 在_$上定義一個onrReady方法
_$.onReady=function (obj,fn) {//obj傳進來的對象
if(obj){
//按要求把對象（_$）注冊到window對象上
//對外開放的接口
obj.$=function () {
return new _$(arguments);//傳遞相應的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
}
}else {
//按要求把對象（_$）注冊到window對象上
//對外開放的接口
window.$=function () {
return new _$(arguments);//傳遞相應的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對象（$("")=_$(參數(shù))）
}
}
fn();
}
//第四步，擴展類的相應方法 鏈式的對象增加jquery庫提供的操作函數(shù)
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西，可以直接使用method方法
fn();
}).method("getEvent",function (fn,e) {
fn();
});
//第五步，開始使用，需要調(diào)用_$.onready方法才可以返回對象使用從function類繼承而來的原型上的方法
var com={};
_$.onReady(com,function () {//$是綁定在Windows上的
com.$("").AddEvent("click",function () {
alert("click")
})
})
})()
自己畫一個圖簡單理解一下上面的過程及思路：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- 《javascript設(shè)計模式》學習筆記四：Javascript面向?qū)ο蟪绦蛟O(shè)計鏈式調(diào)用實例分析
- 在JavaScript中實現(xiàn)鏈式調(diào)用的實現(xiàn)
- JavaScript的級聯(lián)函數(shù)用法簡單示例【鏈式調(diào)用】
- JavaScript鏈式調(diào)用實例淺析
- javascript簡單鏈式調(diào)用案例分析
- 學習JavaScript設(shè)計模式(鏈式調(diào)用)
- JavaScript DSL 流暢接口(使用鏈式調(diào)用)實例
- JS鏈式調(diào)用的實現(xiàn)方法
- JavaScript中兩種鏈式調(diào)用實現(xiàn)代碼
- javascript中的鏈式調(diào)用
- javascript 支持鏈式調(diào)用的異步調(diào)用框架Async.Operation
- JavaScript 異步調(diào)用框架 (Part 5 - 鏈式實現(xiàn))
- 詳解JavaScript中的鏈式調(diào)用
相關(guān)文章
js+canvas實現(xiàn)繪制正方形并插入文字效果(居中顯示)
canvas是一個可以讓我們使用腳本繪圖的標簽,它提供了一系列完整的屬性和方法,下面這篇文章主要給大家介紹了js+canvas實現(xiàn)繪制正方形并插入文字居中顯示效果的相關(guān)資料,需要的朋友可以參考下2023-11-11
前端文件上傳實現(xiàn)代碼示例(文件上傳，分片上傳，斷點續(xù)傳)
本文總結(jié)了普通文件上傳和分片上傳的方法,普通上傳通過FormData和axios實現(xiàn)文件發(fā)送,而分片上傳則將大文件切割并并行或串行上傳,最后合并分片,提高上傳效率和穩(wěn)定性,還介紹了斷點續(xù)傳和處理上傳過程中的異常情況,需要的朋友可以參考下2024-09-09
淺析JavaScrip如何實現(xiàn)優(yōu)雅地退出函數(shù)
退出函數(shù)怎么寫？有人會說一個?return?就退出函數(shù)了,有這么簡單嗎？這篇文章小編就來和大家詳細聊聊如何在JavaScrip中優(yōu)雅地退出函數(shù)吧2024-03-03
這篇文章主要介紹了Javascript中浮點數(shù)相乘的一個解決方法,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了ES6箭頭函數(shù)和擴展,結(jié)合實例形式分析了ES6箭頭函數(shù)和擴展基本功能、用法及操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了ES6之Proxy的get方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
兼容FF/IE跟隨鼠標的層的效果...2007-08-08
JavaScript中isPrototypeOf函數(shù)作用和使用實例
這篇文章主要介紹了JavaScript中isPrototypeOf函數(shù)作用和使用實例,本文講解了它的作用和使用方法以及使用實例,需要的朋友可以參考下2015-06-06
BootStrap框架個人總結(jié)(bootstrap框架、導航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標簽頁
這篇文章主要介紹了BootStrap框架個人總結(jié)(bootstrap框架、導航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標簽頁tabs、模態(tài)框、菜單定位)的相關(guān)資料,需要的朋友可以參考下2016-12-12
javascript加載xml 并解析各節(jié)點的值(實現(xiàn)方法)
下面小編就為大家?guī)硪黄猨avascript加載xml 并解析各節(jié)點的值(實現(xiàn)方法)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10