JS設計模式中鍊式呼叫使用解析

這次帶給大家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中文網其它相關文章！

推薦閱讀：

vue jquery lodash滑動時頂部懸浮固定功能實作詳解

##jQuery實作電子時鐘功能步驟詳解

Angular5路由傳參使用詳解

以上是JS設計模式中鍊式呼叫使用解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！