這次帶給大家JS鍊式呼叫（附程式碼），使用JS鍊式呼叫的注意事項有哪些，下面就是實戰案例，一起來看一下。
寫過jquery的可能都知道，jquery裡面可以很方便的使用以下程式碼：
// 不使用链式调用
const element = $(ele);
element.addClass('red');
element.removeClass('green');
element.show();
// 链式调用
$(ele)
.addClass('red')
.removeClass('green')
.show();登入後複製
而jquery這種呼叫方式就是鍊式呼叫。我們可以從上述程式碼看出來，如果不使用鍊式呼叫的話，那麼我們會增加很多重複的程式碼，而且特別冗餘。而透過鍊式調用，我們可以節省很多程式碼，而且程式碼看起來更優雅和整潔。那麼，接下來，我們來討論下如何實作一個支援鍊式呼叫的函式庫。
了解過原型鏈的人都知道,由建構函式產生的實例都可以存取其原型物件的屬性和方法，因此，我們讓定義在原型物件的方法最後都傳回this(呼叫該方法的實例)，就可以對原型方法進行鍊式呼叫。
// 通过立即执行函数，声明了一个_$函数，并且将一个$函数挂载到window上，并且每次调用$()的时候，返回的其实是个_$实例，由于原型对象方法里，执行最后都会返回一个this,因此就可以执行链式调用。
(function () {
// 构造函数
function _$(selector) {
// ...
}
_$.prototype = {
addClass: function (className) {
// ...
return this;
},
removeClass: function (className) {
// ...
return this;
},
show: function () {
// ...
return this;
}
};
_$.prototype.constructor = _$;
// 每次调用$()的时候，返回的其实是个_$实例
window.$ = function () {
return new _$(arguments);
}
})();
// 通过这种方式，我们就可以直接使用$的链式调用
$(ele)
.addClass('red')
.removeClass('green')
.show();登入後複製
當然，上述程式碼其實可以進行最佳化一下，因為假設你引進的函式庫裡，已經有人定義了$函數，那麼就會面臨命名衝突的問題。所以，我們可以為其增加一個安裝器
(function () {
// 构造函数
function _$(selector) {
// ...
}
_$.prototype = {
addClass: function (className) {
// ...
return this;
},
removeClass: function (className) {
// ...
return this;
},
show: function () {
// ...
return this;
}
};
_$.prototype.constructor = _$;
// 增加一个安装器
window.installHelper = function (scope, interface) {
scope[interface] = function () {
return new _$(arguments);
}
}
})();
// 而用户就可以这样使用它来自定义挂载对象以及其命名
installHelper(window, '$');
$(ele).show();登入後複製
當然，有時鍊式呼叫並不是一個好的主意。鍊式呼叫適用於賦值器方法，但是對於取值器方法的話，就不是很友善。因為我們有時候是想要方法回傳一些數據，而不是回傳一個this。對於這種情況的話，主要有兩種解決方法，一種是對於取值器方法就不會回傳this,直接回傳資料。而另一種方法呢，則是透過回呼方法來處理資料：
// 第一种方法，当遇到取值器，则直接返回数据
(function () {
// 构造函数
function _$(selector) {
this.ele = document.querySelector(selector);
// ...
}
_$.prototype = {
addClass: function (className) {
// ...
return this;
},
// 取值器
getClass: function () {
// ...
return this.ele.className;
}
};
_$.prototype.constructor = _$;
})();
// 第二种方式，通过回调的方式来处理数据
(function () {
// 构造函数
function _$(selector) {
this.ele = document.querySelector(selector);
// ...
}
_$.prototype = {
addClass: function (className) {
// ...
return this;
},
getClass: function (cb) {
// ...
cb.call(this, this.ele.className);
return this;
}
};
_$.prototype.constructor = _$;
})();登入後複製
透過鍊式調用，我們可以簡化我們的程式碼，讓程式碼更加簡潔易讀。而我們只需要讓類別所有的方法都回傳this值，就可以讓該類別變化一個支援方法鍊式呼叫的類別。而如果要讓取值器方法也支援鍊式調用，就可以在取值器裡使用回調的方式來解決這個問題。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
配置打包檔案路徑出錯怎樣解決
#如何綁定方向鍵控制div移動
以上是JS鍊式呼叫（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
