JS設計模式之 單例模式

2022-05-09 06:33:11 字數 3249 閱讀 9591

設計模式,常見的模式有單例模式,**模式等,設計模式的合理運用不僅使**結構更加清晰,也便於後期的維護與重構。然而在日常的學習中,我們卻在不經意間使用了單例模式,but總是容易忽視,額。。。應該是我,不是我們。

什麼是單例模式?

限制乙個類僅有乙個例項化物件,並提供乙個訪問它的全域性訪問點。

經典的實現方式是:建立乙個類,這個類包含乙個方法,這個方法在沒有物件存在的情況下,將會建立乙個新的例項物件。如果物件存在,這個方法只是返回這個物件的引用

全域性變數實現單例模式

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width,initial-scale=1.0"

>

<

title

>v-model

title

>

head

>

<

body

>

<

div

id>btn

div>

<

script

>

//通過全域性變數實現單例模式

varinstance

document.getelementbyid(''

).addeventlistener(

'click',

function

()

else

})//instance = 22

script

>

body

>

html

>

全域性變數在多人合作或者是專案複雜情況下,作為乙個全域性變數值容易被覆蓋, 故不推薦

閉包實現單例模式

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width,initial-scale=1.0"

>

<

title

>v-model

title

>

head

>

<

body

>

<

div

id>btn

div>

<

script

>

//通過閉包實現單例模式

document.getelementbyid(''

).addeventlistener(

'click',

function

() }

console.log(test)

varinstance

=new

test(

'yang')

console.log(test)

varinstance1

=new

test('fu

')console.log(instance

===instance1)

//閉包: 執行完乙個函式,當前環境清除。而由於閉包的存在,依賴於的父級的環境,故變數值不會清空

})script

>

body

>

html

>

當第一次呼叫建構函式後,test被賦值為乙個閉包,當再次呼叫建構函式時,返回的值為testdata即為第一次呼叫建構函式的值(因為閉包的存在,變數值沒有被清空)

使用建構函式的靜態屬性

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width,initial-scale=1.0"

>

<

title

>v-model

title

>

head

>

<

body

>

<

div

id>btn

div>

<

script

>

//使用建構函式的靜態屬性 (當建構函式生成的兩個例項全等於時,則證明為同一例項,即滿足單例模式)

document.getelementbyid(''

).addeventlistener(

'click',

function

()

this

.name

=name;

test.instance

=this

; }

varinstance

=new

test(

'yang')

varinstance1

=new

test(

'yan')

console.log(instance

===instance1)

//result: undefined , object, true

})script

>

body

>

html

>

JS設計模式之單例模式

保證乙個類僅有乙個例項,並且提供乙個訪問它的全域性訪問點。如果例項不存在,則生成乙個例項,如果例項存在,則返回這個例項 var singleton function return return instance console.log singleton.getinstance foo consol...

JS設計模式之單例模式

在了解單例模式之前,我們要先搞懂什麼是設計模式 比較官方的設計模式定義 就是在物件導向軟體設計過程中針對特定問題的簡潔而優雅的解決方案。當然說白了就是 設計模式對某個特定場景下對某種問題的解決方案。所以,我們在合適的場景下可能會條件反射一樣自然而然想到符合這種場景的設計模式。所有的設計模式的共同目標...

JS設計模式之單例模式

單例模式的定義是 保證乙個類只有乙個例項,並提供乙個訪問它的全域性訪問點。比如說購物車,在乙個 中,我們只需要乙個購物車,購物車在整個 中是唯一的,不需要多次建立,即使多次點選購物車按鈕,也不會生成多個購物車。閉包預警 有對閉包不明白的同學,可以看這裡。var singleton function ...