javascript設(shè)計(jì)模式 – 備忘錄模式原理與用法實(shí)例分析
本文實(shí)例講述了javascript設(shè)計(jì)模式 – 備忘錄模式原理與用法。分享給大家供大家參考,具體如下:
介紹:在我們的開(kāi)發(fā)中偶爾會(huì)遇到這樣一種情況,需要對(duì)用戶的行為進(jìn)行撤銷。要想實(shí)現(xiàn)撤銷,首先需要保存軟件系統(tǒng)的歷史狀態(tài),當(dāng)用戶執(zhí)行撤銷時(shí)用之前的狀態(tài)覆蓋當(dāng)前狀態(tài)。本節(jié)介紹的備忘錄模式提供了一種狀態(tài)恢復(fù)的實(shí)現(xiàn)機(jī)制,使得用戶可以方便的回到一個(gè)特定的歷史步驟。
定義:在不破壞封裝的前提下,捕獲一個(gè)對(duì)象的內(nèi)部狀態(tài),并在該對(duì)象之外保存這個(gè)狀態(tài),這樣可以在以后將對(duì)象恢復(fù)到原先保存的狀態(tài),它是一種對(duì)象行為模式,其別名為T(mén)oken。
場(chǎng)景:使用js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的狀態(tài)機(jī),用于狀態(tài)的保存,回退。實(shí)現(xiàn)下備忘錄模式。
示例:
var Memento = function(state){ var _state = state; this.getState = function(){ return _state; } } var Originator = function(){ var _state; this.setState = function(state){ _state = state; } this.getState = function(){ return _state; } this.saveStateToMemento = function(){ return new Memento(_state) } this.getStateFromMemento = function(memento){ _state = memento.getState(); } } var CareTaker = function(){ var _mementoList = []; this.add = function(memento){ _mementoList.push(memento); } this.get = function(index){ return _mementoList[index]; } } var originator = new Originator(); var careTaker = new CareTaker(); originator.setState("State 1"); originator.setState("State 2"); careTaker.add(originator.saveStateToMemento()); originator.setState("State 3"); careTaker.add(originator.saveStateToMemento()); originator.setState("State 4"); console.log("當(dāng)前狀態(tài): " + originator.getState()); // 當(dāng)前狀態(tài): State 4 originator.getStateFromMemento(careTaker.get(0)); console.log("恢復(fù)第一次保存狀態(tài): " + originator.getState()); // 恢復(fù)第一次保存狀態(tài): State 2 originator.getStateFromMemento(careTaker.get(1)); console.log("恢復(fù)第二次保存: " + originator.getState()); // 恢復(fù)第二次保存: State 3
這個(gè)例子里面Originator稱為原發(fā)器,可以通過(guò)saveStateToMemento創(chuàng)建一個(gè)備忘錄,存儲(chǔ)當(dāng)前狀態(tài)。Memento是一個(gè)備忘錄對(duì)象,只供原發(fā)器使用,提供狀態(tài)提取方法。CareTaker稱之為負(fù)責(zé)人也可以叫管理者,它負(fù)責(zé)保存?zhèn)渫?,但是不能?duì)備忘錄內(nèi)容進(jìn)行操作或檢查
備忘錄模式總結(jié):
優(yōu)點(diǎn):
* 提供了一種狀態(tài)恢復(fù)的時(shí)間機(jī)制,使得用戶可以方便的回退到一個(gè)特定的歷史步驟。
* 備忘錄實(shí)現(xiàn)了對(duì)信息的封裝,一個(gè)備忘錄對(duì)象是一種原發(fā)器對(duì)象狀態(tài)的表示,不會(huì)被其他代碼所改動(dòng)。
缺點(diǎn):
* 備忘錄模式的主要缺點(diǎn)是資源消耗過(guò)大,如果需要保存的原發(fā)器類的成員變量太多,就不可避免的需要占用大量的存儲(chǔ)空間。
適用場(chǎng)景:
* 保存一個(gè)對(duì)象在某一時(shí)刻的全部或部分狀態(tài)
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS擴(kuò)展類,克隆對(duì)象與混合類實(shí)例分析
這篇文章主要介紹了JS擴(kuò)展類,克隆對(duì)象與混合類,通過(guò)自定義extend,clone與augment函數(shù)實(shí)例分析了類的擴(kuò)展,對(duì)象的克隆與混合類相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2016-11-11Webpack常見(jiàn)靜態(tài)資源處理-模塊加載器(Loaders)+ExtractTextPlugin插件
這篇文章主要介紹了Webpack常見(jiàn)靜態(tài)資源處理-模塊加載器(Loaders)+ExtractTextPlugin插件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06javascript下拉框選項(xiàng)單擊事件的例子分享
這篇文章主要分享了一些javascript下拉框選項(xiàng)單擊事件的例子,以及在例子中遇到的問(wèn)題的解決方法,十分實(shí)用,推薦給小伙伴們參考下。2015-03-03JavaScript實(shí)現(xiàn)復(fù)選框全選或全取消操作
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選或全取消操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JS常見(jiàn)錯(cuò)誤(Error)及處理方案詳解
這篇文章主要介紹了JS常見(jiàn)錯(cuò)誤(Error)及處理方案詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07