首頁 >web前端 >js教程 >JS鍊式呼叫(附程式碼)

JS鍊式呼叫(附程式碼)

php中世界最好的语言
php中世界最好的语言原創
2018-06-04 15:38:391756瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn