Javasript設計模式之鏈式調用

来源:https://www.cnblogs.com/chenjg/archive/2018/04/21/8904067.html
-Advertisement-
Play Games

寫過jquery的可能都知道,jquery裡面可以很方便的使用以下代碼: 而jquery這種調用方式就是鏈式調用。我們可以從上述代碼看出來,如果不使用鏈式調用的話,那麼我們會增加很多重覆的代碼,而且特別冗餘。而通過鏈式調用,我們可以節省很多代碼,並且代碼看起來更加優雅和整潔。那麼,接下來,我們來 ...


寫過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值,就可以讓該類變化一個支持方法鏈式調用的類。而如果要讓取值器方法也支持鏈式調用,就可以在取值器里使用回調的方式來解決這個問題。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 運用摺疊面板後 可以讓頁面更加整潔 有什麼不懂的可以留言 代碼放到底部 需要引入的文件 JQuery代碼: html代碼 <div class="layui-colla-item"> <div class="layui-colla-title" style="background-color: #e ...
  • 以往 HTML 的 input 輸入框,無法即時(實時)反映使用者(用戶)的輸入內容。現在 HTML5 新增的 input 事件,可達成此一需求。 ...
  • input輸入框<div id="top-title" style="position: relative"> <img class="img-responsive center-block" alt="" src="" style="float:left;z-index: 999;position ...
  • 上周的某一天,和一位同樣是前端技術極度愛好的開發者朋友聊天,他在提出了一個問題,他寫的vue程式為什麼在dev模式運行良好,而在production模式就直接報錯了。這讓我感到驚訝,還有這麼神奇的事情。今就把這個歷險記道給大伙聽聽,看能從中學習到什麼? 一、還原現場 朋友在看到我的驚訝後,分分就把他 ...
  • 小程式項目別的頁面初始化拿到的值為兩種狀態,其他頁面拿不到app.js全局globalData下全局的cookie ...
  • 1.首先寫一個遮罩層div,然後再寫一個彈窗的div js代碼:(把jq引進來) 效果: ...
  • CH1 認識HTML HTML和CSS是我們用來創建網頁的語言:HTML是超文本標記語言(HyperText Markup Language)的縮寫,用來建立網頁的結構;CSS是層疊樣式表(Cascading Style Sheet)的縮寫,用來控制HTML的表現。 Web伺服器存儲並提供由HTML ...
  • ​ 前面在看題目的時候 偶然看到 使用parseInt 來進行整數判斷 但是這裡的parseInt是錯誤示範 之後瞭解了一下 發現這和函數 很有研究 先看看 w3c怎麼說這個的 說實話 雖然我沒有比較好的描述,但是覺的他的解釋並不好 看不懂 我們來看看當沒有 radix這個參數的時候 parseIn ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...