欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS 設計模式之:單例模式定義與實現(xiàn)方法淺析

 更新時間:2020年05月06日 10:57:18   作者:savokiss  
這篇文章主要介紹了JS 設計模式之:單例模式,結合實例形式分析了JS 單例模式原理、定義、實現(xiàn)方法與相關注意事項,需要的朋友可以參考下

本文實例講述了JS 設計模式之:單例模式定義與實現(xiàn)方法。分享給大家供大家參考,具體如下:

良好的設計模式可以顯著提高代碼的可讀性,降低復雜度和維護成本。筆者打算通過幾篇文章通俗地講一講常見的或者實用的設計模式。

今天先從最簡單的一個入手:單例模式。

文中的示例代碼會使用 ES6 語法,盡量簡化不必要的細節(jié)

概念

單例模式(Singleton)屬于創(chuàng)建型的設計模式,它限制我們只能創(chuàng)建單一對象或者某個類的單一實例。

通常情況下,使用該模式是為了控制整個應用程序的狀態(tài)。在日常的開發(fā)中,我們遇到的單例模式可能有:Vuex 中的 Store,Vue 的根實例任何導出單個對象的 ES6 模塊等。

字面量寫法

最簡單的單例其實就像下面這樣:

const cat = {
  name: 'mi',
  age: 4
}

了解 const 語法的小伙伴都知道,這只喵是不能被重新賦值的,但是它里面的屬性其實是可變的。

如果想要一個不可變的單例對象:

const cat = {
  name: 'mi',
  age: 4
}

Object.freeze(cat);

這樣就不能新增或修改這只喵上的任何屬性,它變成了 冰凍喵~

如果是在模塊中使用,上面的寫法并不會污染全局作用域,但是直接生成一個固定的對象缺少了一些靈活性。

常用寫法

相對而言,使用類或工廠方法來實現(xiàn)單例更加常用。假設我們有一個叫作 Logger 的類,它具有和 Console 相同的 API。

類單例

類的單例寫法非常常用,如果我們想要這么使用它:

const logger = new Logger();
logger.log('msg');

// 這里大概寫了 1000 行代碼

const logger2 = new Logger();
logger.log('new msg');

logger === logger2; // true

即盡管 new 了多次 Logger,它返回的都是同一個實例。

下面直接看最實用的實現(xiàn)方式:

class Logger {
  constructor () {
    if (!Logger._singleton) {
      Logger._singleton = this;
    }
    return Logger._singleton;
  }
  
  log (...args) {
    console.log(...args);
  }
}

export default Logger;

上面的方式將單例對象存儲在了構造器上,這樣的話不管 new Logger 多少次,返回的都是同一個 Logger 實例了。

這里有一個細節(jié)需要注意,即 new 關鍵字后面的構造函數(shù)如果顯式返回一個對象,new 表達式就會返回該對象。

具體可參見 《你不知道的 JavaScript (上卷)》中的 new 綁定 相關章節(jié)。

工廠單例

如果不喜歡用 new 關鍵字,可以使用工廠方法返回單例對象。

let logger = null

class Logger {
  log (...args) {
    console.log(...args);
  }
}

function createLogger() {
  if (!logger) {
    logger = new Logger();
  }
  return logger;
}

export default createLogger;

上面的代碼相當于在模塊內部緩存了 logger 實例,然后導出了一個工廠方法。這種寫法在模塊化代碼中比較常見,工廠方法也可以接收參數(shù)用來初始化單例對象。

今天的內容比較好理解,其中的單例寫法也是筆者常用的方法。

下一篇我們再具體講講工廠模式的應用~

參考內容

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • js和canvas繪制圓形金屬質感特效

    js和canvas繪制圓形金屬質感特效

    在JavaScript中,可以使用HTML5提供的Canvas元素來進行繪圖操作,要使用canvas元素,瀏覽器必須支持html5,Canvas是一個HTML元素,可以通過JavaScript來操作和繪制圖形,本文示例實現(xiàn)js和canvas繪制圓形金屬質感的詩詞高級排版特效
    2024-09-09
  • 基于JS實現(xiàn)操作成功之后自動跳轉頁面

    基于JS實現(xiàn)操作成功之后自動跳轉頁面

    這篇文章主要介紹了基于JS實現(xiàn)操作成功之后自動跳轉頁面的相關知識,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-09
  • 原生js二級聯(lián)動效果

    原生js二級聯(lián)動效果

    這篇文章主要為大家詳細介紹了原生js二級聯(lián)動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • JavaScript+html5 canvas制作的圓中圓效果實例

    JavaScript+html5 canvas制作的圓中圓效果實例

    這篇文章主要介紹了JavaScript+html5 canvas制作的圓中圓效果,結合完整實例形式分析了基于JavaScript與html5 canvas技術實現(xiàn)的圖形繪制與顏色隨機填充技巧,需要的朋友可以參考下
    2016-01-01
  • 用javascript獲取textarea中的光標位置

    用javascript獲取textarea中的光標位置

    Javascript一向以他的靈活隨意而著稱,這也使得它的功能可以非常的強大,而由于沒有比較好的調試工具,又使得它使用起來困難重重,尤其使對于一些初學者,更是感覺到無從下手。今天探討的問題是用javascript獲取textarea中光標的位置。
    2008-05-05
  • JS實現(xiàn)微信搖一搖原理解析

    JS實現(xiàn)微信搖一搖原理解析

    這篇文章主要為大家詳細介紹了JS微信搖一搖的實現(xiàn)原理,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • JavaScript作用域示例詳解

    JavaScript作用域示例詳解

    作用域是JavaScript最重要的概念之一,想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域示例詳解的介紹,非常不錯,感興趣的朋友一起看下吧
    2016-07-07
  • 原生js簡單實現(xiàn)放大鏡特效

    原生js簡單實現(xiàn)放大鏡特效

    這篇文章主要為大家詳細介紹了原生js簡單實現(xiàn)放大鏡特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • js淡入淡出的圖片輪播效果代碼分享

    js淡入淡出的圖片輪播效果代碼分享

    這篇文章主要介紹了js淡入淡出的圖片輪播切換特效,圖片可以隨意替換,文中示例代碼介紹的非常詳細,具有一定的參考價值,推薦給大家,感興趣的小伙伴們可以參考一下
    2015-08-08
  • 淺談Cookie的生命周期問題

    淺談Cookie的生命周期問題

    下面小編就為大家?guī)硪黄獪\談Cookie的生命周期問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08

最新評論