Javascript單例模式的介紹和實(shí)例
前言
其實(shí)和其他編程語(yǔ)言一樣,Javascript同樣擁有著很多種設(shè)計(jì)模式,比如單例模式、代理模式、觀察者模式等,熟練運(yùn)用Javascript的設(shè)計(jì)模式可以使我們的代碼邏輯更加清晰,并且更加易于維護(hù)和重構(gòu)。
本文將會(huì)介紹Javascript中的單例模式,在傳統(tǒng)開(kāi)發(fā)工程師眼里,單例就是保證一個(gè)類只有一個(gè)實(shí)例,實(shí)現(xiàn)的方法一般是先判斷實(shí)例存在與否,如果存在直接返回,如果不存在就創(chuàng)建了再返回,這就確保了一個(gè)類只有一個(gè)實(shí)例對(duì)象。在JavaScript里,單例作為一個(gè)命名空間提供者,從全局命名空間里提供一個(gè)唯一的訪問(wèn)點(diǎn)來(lái)訪問(wèn)該對(duì)象。下面來(lái)看看詳細(xì)介紹。
單例模式概念
首先什么是單例模式?可以這樣理解:?jiǎn)卫J街荚诒WC一個(gè)類僅有一個(gè)實(shí)例,并提供一個(gè)全局的訪問(wèn)點(diǎn)。
可能有人還是不太理解單例的概念,那么你可以想象生活中的一些例子。比如注冊(cè)賬號(hào)的時(shí)候,如果我們注冊(cè)的賬號(hào)已經(jīng)存在,那么系統(tǒng)會(huì)提示我們“賬號(hào)已經(jīng)存在是否使用該賬號(hào)登陸”,我們無(wú)法再次創(chuàng)建一個(gè)一模一樣的賬號(hào),除非把原賬號(hào)注銷。這就是單例模式的生動(dòng)體現(xiàn)。
類似的例子還有網(wǎng)頁(yè)上的登陸彈框,無(wú)論我們點(diǎn)擊多少次登陸按鈕,界面上始終只會(huì)顯示一個(gè)登陸彈框,無(wú)法再創(chuàng)建第二個(gè)。
本文就將以登陸彈框?yàn)槔榻B單例模式的使用方式。
單例模式實(shí)例
1.demo展示
2.代碼展示
構(gòu)建單例模式彈框?qū)嵗拇a每個(gè)人可能寫(xiě)的都不一樣,但是目的都是一個(gè):構(gòu)建一個(gè)全局唯一并可訪問(wèn)的彈框。接下來(lái)我們一步一步來(lái)實(shí)現(xiàn)這個(gè)例子。
(1)獲取DOM對(duì)象
var $ = function(id) { return typeof id === 'string' ? document.getElementById(id) : id; };
首先為了便于之后關(guān)于DOM的一些操作,我們這里利用函數(shù)式編程的原理將獲取目標(biāo)id的元素對(duì)象方法封裝了一下,直接利用$(id)就可以獲取。
(2)彈框構(gòu)造函數(shù)
var Modal = function(id, html) { this.html = html; this.id = id; this.open = false; };
這里我們聲明了一個(gè)Modal作為彈框的構(gòu)造函數(shù),并且再其內(nèi)部定義了公有屬性html、id和open。html用來(lái)定義彈框內(nèi)部的內(nèi)容,id用來(lái)給彈框定義id名稱,open用于判斷彈框是否打開(kāi)。
(3)open方法
Modal.prototype.create = function() { if (!this.open) { var modal = document.createElement('div'); modal.innerHTML = this.html; modal.id = this.id; document.body.appendChild(modal); setTimeout(function() { modal.classList.add('show'); }, 0); this.open = true; } };
我們?cè)贛odal的原型鏈上定義了create
方法,方法內(nèi)部我們創(chuàng)建并向DOM中插入彈框,同時(shí)給彈框加上一個(gè)class為"show"的動(dòng)畫(huà)效果。這里簡(jiǎn)單介紹下classList:
classList
是一個(gè)比className
更便捷的操作元素class的屬性,不過(guò)在兼容性方面不兼容IE10以下版本:
classList兼容性
其提供的操作class方法和jQuery的類似,主要有
add(class1, class2, ...)
在元素中添加一個(gè)或多個(gè)類名,類似jQuery的addClass()
remove(class1, class2, ...)
移除元素中一個(gè)或多個(gè)類名,類似jQuery的removeClass()
contains(class)
判斷指定的類名是否存在,類似jQuery的hasClass()
這里我們用到了add
方法給Modal添加show類。
(4)close方法
Modal.prototype.delete = function() { if (this.open) { var modal = $(this.id); modal.classList.add('hide'); setTimeout(function() { document.body.removeChild(modal); }, 200); this.open = false; } };
定義了open
方法后我們這里定義關(guān)閉彈框的方法,在其內(nèi)部給彈框?qū)ο筇砑觝ide類動(dòng)畫(huà)效果,最后在頁(yè)面上移除彈框?qū)ο蟆?/p>
(5)創(chuàng)建實(shí)例
var createIntance = (function() { var instance; return function() { return instance || (instance = new Modal('modal', '這是一個(gè)彈框')) } })();
這是實(shí)現(xiàn)單例模式的重要部分,我們來(lái)分析下知識(shí)點(diǎn):
1、使用閉包封裝了instance
私有變量并返回一個(gè)函數(shù)
2、利用 || 語(yǔ)法判斷如果instance
不存在則執(zhí)行后者的實(shí)例化Modal
方法,存在則直接返回instance
,確保了只存在一個(gè)彈框?qū)嵗?br />
本實(shí)例的創(chuàng)建也可以理解為代理模式的一部分。
(6)按鈕操作
var operate = { setModal: null, open: function() { this.setModal = createIntance(); this.setModal.create(); }, delete: function() { this.setModal ? this.setModal.delete() : ''; } };
這里我們將按鈕操作放在operate
對(duì)象里,使得打開(kāi)和關(guān)閉操作可以通過(guò)this
獲取實(shí)例setModal
。
(7)綁定事件
$('open').onclick = function() { operate.open(); }; $('delete').onclick = function() { operate.delete(); };
最后我們將打開(kāi)和刪除方法綁定到兩個(gè)按鈕上去,至此我們用單例模式實(shí)現(xiàn)的彈框demo就實(shí)現(xiàn)了。
總結(jié)
本文只演示了單例模式的一種實(shí)現(xiàn)方式,至于如何構(gòu)建一個(gè)通用的單例模式就交給有興趣的讀者了。以上就是這篇文章的全部?jī)?nèi)容了,希望能對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助。
相關(guān)文章
JS+CSS實(shí)現(xiàn)的豎向簡(jiǎn)潔折疊菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的豎向簡(jiǎn)潔折疊菜單效果代碼,涉及JavaScript鏈?zhǔn)讲僮髋c元素遍歷等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10js中判斷兩個(gè)數(shù)組對(duì)象是否完全相等
這篇文章主要介紹了js中判斷兩個(gè)數(shù)組對(duì)象是否完全相等方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04three.js響應(yīng)式設(shè)計(jì)實(shí)例詳解
響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive?Web?design)是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局,是目前比較流行的一種網(wǎng)頁(yè)設(shè)計(jì),下面這篇文章主要給大家介紹了關(guān)于three.js響應(yīng)式設(shè)計(jì)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單放大鏡效果示例
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單放大鏡效果,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-02-02uniapp開(kāi)發(fā)小程序的開(kāi)發(fā)規(guī)范總結(jié)
uni-app 是一個(gè)使用 vue.js 開(kāi)發(fā)跨平臺(tái)應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開(kāi)發(fā)小程序的開(kāi)發(fā)規(guī)范,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn)
JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn) 加上你的CSS完全可以與EXT媲美哦2009-08-08D3.js實(shí)現(xiàn)散點(diǎn)圖和氣泡圖的方法詳解
這篇文章將會(huì)給大家介紹了另外兩種可視化圖表,利用D3.js實(shí)現(xiàn)散點(diǎn)圖和氣泡圖,文章通過(guò)多個(gè)方面介紹的非常詳細(xì),下面來(lái)一起看看吧。2016-09-09