js單例模式

單例模式是一種常見的設計模式,在JavaScript中也有廣泛應用,以下是關于它的詳細介紹:

定義

  • 單例模式是一種創建型設計模式,它確保一個類只有一個實例,并提供一個全局訪問點來訪問該實例。在JavaScript中,雖然沒有像傳統面向對象語言中的類的概念,但可以通過對象字面量、構造函數、閉包等方式來實現單例模式。

實現方式

對象字面量方式

const singleton = {property: "Some value",method: function() {console.log("This is a method in the singleton object.");}
};
  • 這種方式簡單直接,創建了一個包含屬性和方法的對象字面量,并且該對象在全局范圍內只有一個實例。可以通過 singleton.propertysingleton.method() 來訪問和調用其中的成員。

構造函數與閉包結合方式

function Singleton() {if (!Singleton.instance) {Singleton.instance = this;this.property = "Some value";this.method = function() {console.log("This is a method in the singleton instance.");};}return Singleton.instance;
}const instance1 = new Singleton();
const instance2 = new Singleton();console.log(instance1 === instance2); // true
  • 在構造函數 Singleton 內部,通過判斷 Singleton.instance 是否存在來確保只有一個實例被創建。如果不存在,則將當前實例賦值給 Singleton.instance ,并添加屬性和方法。后續每次調用 new Singleton() 時,都會返回同一個實例。

使用ES6的類和靜態屬性

class Singleton {constructor() {if (!Singleton.instance) {Singleton.instance = this;this.property = "Some value";this.method = function() {console.log("This is a method in the singleton instance.");};}return Singleton.instance;}static getInstance() {if (!Singleton.instance) {Singleton.instance = new Singleton();}return Singleton.instance;}
}const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();console.log(instance1 === instance2); // true
  • 定義了一個 Singleton 類,在構造函數中同樣進行實例的唯一性判斷和創建。同時,提供了一個靜態方法 getInstance ,用于獲取單例實例,這樣可以更方便地在其他地方獲取單例對象,而不需要直接調用構造函數。

應用場景

全局狀態管理

  • 在JavaScript應用中,如Vuex、Redux等狀態管理庫的核心原理就部分地運用了單例模式。以Vuex為例,整個應用中的狀態存儲在一個唯一的store實例中,各個組件都可以訪問和修改這個store中的狀態,確保了狀態的一致性和唯一性。
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}}
});export default store;

數據庫連接池

  • 在與數據庫交互的應用中,為了避免頻繁地創建和銷毀數據庫連接,通常會使用數據庫連接池來管理連接。連接池可以設計成單例模式,確保整個應用中只有一個連接池實例,所有需要數據庫連接的地方都從這個連接池中獲取連接,提高性能和資源利用率。
const mysql = require('mysql');class DatabasePool {constructor() {if (!DatabasePool.instance) {this.pool = mysql.createPool({connectionLimit: 10,host: 'localhost',user: 'root',password: 'password',database: 'mydb'});DatabasePool.instance = this;}return DatabasePool.instance;}getConnection(callback) {this.pool.getConnection(callback);}
}const pool = new DatabasePool();
pool.getConnection((err, connection) => {if (err) throw err;// 使用連接進行數據庫操作connection.release();
});

日志記錄器

  • 在應用中,通常需要一個統一的日志記錄器來記錄各種操作和錯誤信息。單例模式可以確保整個應用中只有一個日志記錄器實例,方便對日志進行統一管理和配置,避免多個日志記錄器之間的沖突和混亂。
class Logger {constructor() {if (!Logger.instance) {this.logs = [];Logger.instance = this;}return Logger.instance;}log(message) {const timestamp = new Date().toISOString();this.logs.push(`${timestamp} - ${message}`);console.log(message);}getLogs() {return this.logs;}
}const logger = new Logger();
logger.log("This is a log message.");
logger.log("Another log message.");
console.log(logger.getLogs());

優點

  • 確保唯一性:保證一個類只有一個實例存在,避免了因創建多個實例而導致的資源浪費和數據不一致等問題。
  • 全局訪問點:提供了一個全局可訪問的點來獲取該實例,方便在不同的模塊和代碼位置共享和使用該實例,提高了代碼的可維護性和可擴展性。

缺點

  • 違反單一職責原則:單例類可能會承擔過多的職責,因為它既要負責自身的實例化和管理,又要提供各種業務方法和屬性,導致類的職責不單一,不利于代碼的維護和測試。
  • 隱藏依賴關系:由于單例模式通常提供全局訪問點,使得代碼中對單例實例的依賴關系變得不明顯,可能會導致代碼的耦合度增加,不利于代碼的解耦和重構。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/64170.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/64170.shtml
英文地址,請注明出處:http://en.pswp.cn/web/64170.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【Golang 面試題】每日 3 題(六)

?個人博客:Pandaconda-CSDN博客 📣專欄地址:http://t.csdnimg.cn/UWz06 📚專欄簡介:在這個專欄中,我將會分享 Golang 面試中常見的面試題給大家~ ??如果有收獲的話,歡迎點贊👍收藏…

SQL Server數據庫多主模式解決方案

SQL Server 本身并不直接支持多主模式(Multi-Master Replication),即多個數據庫實例可以同時進行寫操作,并且這些更改會自動同步到其他實例。不過,SQL Server 提供了多種高可用性和復制解決方案,可以實現類似多主模式的功能。以下是幾種常見的方法: 1. Always On 可用性…

連鎖餐飲行業數據可視化分析方案

引言 隨著連鎖餐飲行業的迅速發展,市場競爭日益激烈。企業需要更加精準地把握運營狀況、消費者需求和市場趨勢,以制定科學合理的決策,提升競爭力和盈利能力。可視化數據分析可以幫助連鎖餐飲企業整合多源數據,通過直觀、動態的可…

Zookeeper JavaAPI操作(Curator API常用操作)

構建項目 zk版本:3.5.7,引入4.0.0的curator版本,Curator依賴的版本只能比zookeeper依賴的版本高。 Curator簡單介紹 Curator是Netflix公司開源的一套zookeeper客戶端框架,解決了很多Zookeeper客戶端非常底層的細節開發工作&…

可搜索的下拉選擇框:filterable屬性詳解

在前端開發中,下拉選擇框(Dropdown Select)是一個常見的UI組件,它允許用戶從一組預定義的選項中選擇一個或多個值。然而,當選項數量較多時,手動查找特定的選項可能會變得繁瑣。為了解決這個問題&#xff0c…

精選9個自動化任務的Python腳本精選

大家好,我是老鄧,今天我們來一起學習如何用Python進行一些常見的自動化操作,涉及文件處理、網絡交互等實用技巧。即使你沒有任何Python基礎也沒關系,我會用最通俗易懂的語言來講解。 1. 對目錄中的文件進行排序 import osdef so…

滑動窗口 + 算法復習

維護一個滿足條件的窗口大小&#xff0c;然后進行雙指針移動 1.最長子串 題目鏈接&#xff1a;1.最長子串 - 藍橋云課 #include<bits/stdc.h> #define int long long using namespace std; string s; int k; signed main() {int max_len0,left0;cin>>s>>k;…

PDF書籍《手寫調用鏈監控APM系統-Java版》第9章 插件與鏈路的結合:Mysql插件實現

本人閱讀了 Skywalking 的大部分核心代碼&#xff0c;也了解了相關的文獻&#xff0c;對此深有感悟&#xff0c;特此借助巨人的思想自己手動用JAVA語言實現了一個 “調用鏈監控APM” 系統。本書采用邊講解實現原理邊編寫代碼的方式&#xff0c;看本書時一定要跟著敲代碼。 作者…

關于Vue的子組件改變父組件傳來的值

一、組件直接傳值 大家都知道父子組件傳值的方案&#xff0c;有以下幾個&#xff0c;不再詳細敖述 Props&#xff1a;父組件向子組件傳遞數據 $emit&#xff1a;子組件通過自定義事件向父組件傳遞數據 .sync修飾符&#xff1a;一個方便且強大的工具&#xff0c;可以簡化父子組…

Flink的Watermark水位線詳解

一、Flink的時間語義 Flink有如下三種時間語義&#xff1a; Flink的三種時間語義-CSDN博客 在實際應用中&#xff0c;一般會采用事件時間語義。而正如前面所說的&#xff0c;事件時間語義需要等窗口的數據全部到齊了&#xff0c;才能進行窗口計算。那么&#xff0c;什么時候數…

ES學習Promise對象(九)

這里寫目錄標題 一、概念二、示例基本使用使用 Promise 對象封裝Ajaxthen() 方法catch() 方法 一、概念 簡單說就是一個容器&#xff0c;里面保存著某個未來才會結束的事件&#xff08;通常是一個異步操作&#xff09;的結果。Promise 是一個對象&#xff0c;Promise 提供統一…

Kibana:LINUX_X86_64 和 DEB_X86_64兩種可選下載方式的區別

最近需要在vm&#xff08;操作系統是 Ubuntu 22.04.4 LTS&#xff0c;代號 Jammy。這是一個基于 x86_64 架構的 Linux 發行版&#xff09;上安裝一個7.17.8版本的Kibana&#xff0c;并且不采用docker方式。 在下載的時候發現有以下兩個選項&#xff0c;分別是 LINUX_X86_64 和 …

CMake 構建項目并整理頭文件和庫文件

本文將介紹如何使用 CMake 構建項目、編譯生成庫文件&#xff0c;并將頭文件和庫文件整理到統一的目錄中以便在其他項目中使用。 1. 項目結構 假設我們正在構建一個名為 rttr 的開源庫&#xff0c;初始的項目結構如下&#xff1a; D:\WorkCode\Demo\rttr-master\|- src\ …

【FAQ】HarmonyOS SDK 閉源開放能力 — Vision Kit(2)

1.問題描述&#xff1a; 人臉活體檢測返回上一頁App由沉浸式變為非沉浸式多了上下安全區域。 解決方案&#xff1a; 檢測結束后需要自己去設置沉浸式配置。 2.問題描述&#xff1a; Vision Kit文字識別是本地識別&#xff0c;還是上傳至服務器&#xff0c;由服務器來識別文…

AIA - IMSIC之二(附IMSIC處理流程圖)

本文屬于《 RISC-V指令集基礎系列教程》之一,歡迎查看其它文章。 1 ???????通過IMSIC接收外部中斷的CSR 軟件通過《AIA - 新增的CSR》描述的CSR來訪問IMSIC。 machine level 的 CSR 與 IMSIC 的 machine level interrupt file 可相互互動;而 supervisor level 的 CSR…

Vue單頁應用的配置

前面通過幾篇文章了解并掌握了 Vue 項目構建及運行的前期工作 。接下來我們可以走進 Vue 項目的內部&#xff0c;一探其內部配置的基本構成。 1. 路由配置 由于 Vue 這類型的框架都是以一個或多個單頁構成&#xff0c;在單頁內部跳轉并不會重新渲染 HTML 文件&#xff0c;其路…

CocosCreator-引擎案例-TS:spine

工程1&#xff1a;LoadSpine&#xff1a;簡單加載spine資源 建立工程&#xff0c;在層級上建立一個空對象&#xff0c;改名spine 在spine上添加spine組件&#xff1a; 添加組件>渲染組件>spine 在spine上掛上腳本loadspine onLoad () {cc.resources.load(loadSpine/ali…

使用FreeNAS軟件部署ISCSI的SAN架構存儲(IP-SAN)練習題

一&#xff0c;實驗用到工具分別為&#xff1a; VMware虛擬機&#xff0c;安裝教程&#xff1a;VMware Workstation Pro 17 安裝圖文教程 FreeNAS系統&#xff0c;安裝教程&#xff1a;FreeNAS-11.2-U4.1安裝教程2024&#xff08;圖文教程&#xff09; 二&#xff0c;新建虛…

【ANGULAR網站開發】初始環境搭建

1. 初始化angular項目 1.1 創建angular項目 需要安裝npm和nodejs&#xff0c;這邊不在重新安裝 直接安裝最新版本的angular npm install -g angular/cli安裝指定大版本的angular npm install -g angular/cli181.2 啟動angular 使用idea啟動 控制臺啟動 ng serve啟動成功…

lua debug相關方法詳解

lua debug相關方法詳解 1. debug.debug()2. debug.getinfo(func | level [, what])3. debug.getlocal(func-or-level, localindex)4. debug.setlocal(level, local_number, value)5. debug.getupvalue(func, upvalue_index)6. debug.setupvalue(func, upvalue_index, value)7. …