首頁 web前端 js教程 javascript單列模式和單體模式定義和應用程式碼詳解

javascript單列模式和單體模式定義和應用程式碼詳解

Jul 24, 2017 pm 02:01 PM
javascript js 單體

單體模式:

單體是一個用來劃分命名空間並將一批相關的屬性和方法組織在一起的對象,如果他可以被實例化,那麼他只能被實例化一次。

特點: 

可以來分割命名空間,從而清除全域變數所帶來的危險。

利用分支技術來封裝瀏覽器之間的差異。

可以把程式碼組織的更為一體,方便閱讀與維護。

程式碼實作:

/*Basic Singleton*/
var Singleton = {
  attribute:true,
  method1:function(){},
   method2:function(){}
};
登入後複製

應用場景:

單體模式在我們平時的應用中用的比較多的,相當於把我們的程式碼封裝在一個起來,只是暴露一個入口,從而避免全部變數的污染。

單例模式

單例模式定義了一個物件的建立過程,此物件只有一個單獨的實例,並提供一個存取它的全域訪問點。也可以說單例就是保證一個類別只有一個實例,實現的方法一般是先判斷實例存在與否,如果存在直接返回,如果不存在就創建了再返回,這就確保了一個類別只有一個實例物件。

程式碼實作:

單例的實作有很多種,以下只介紹其中的一種,使用閉包方式來實作單例,程式碼如下:

var single = (function(){
  var unique;
  function getInstance(){
    // 如果该实例存在,则直接返回,否则就对其实例化
    if( unique === undefined ){
      unique = new Construct();
    }
    return unique;
  }
  function Construct(){
    // ... 生成单例的构造函数的代码
  }
  return {
    getInstance : getInstance
  }
})();
登入後複製

上面的程式碼中,unique便是傳回物件的引用,而getInstance便是靜態方法取得實例。 Construct 便是建立實例的建構子。

可以透過 single.getInstance() 來取得到單例,並且每次呼叫均取得到同一個單例。這就是 單例模式 所實現的效果。

使用場景:

單例模式是常用的模式,有一些物件我們往往只需要一個,像是全域快取、瀏覽器的window物件。在js開發中,單例模式的用途同樣非常廣泛。試想一下,當我們

點擊登入按鈕的時候,頁面中會出現一個登入框,而這個浮窗是唯一的,無論點擊多少次登入按鈕,這個浮窗只會被建立一次。因此這個登入浮窗就適合用單例模式。

總結一下它的使用場景:

1、可以用它來分割命名空間

2、借助單例模式,可以把程式碼組織的更為一致,方便閱讀與維護

以上是javascript單列模式和單體模式定義和應用程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

建議:優秀JS開源人臉偵測辨識項目

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

簡易JavaScript教學:取得HTTP狀態碼的方法

See all articles