javascript設計模式 – 備忘錄模式原理與用法實例分析
本文實例講述了javascript設計模式 – 備忘錄模式原理與用法。分享給大家供大家參考,具體如下:
介紹:在我們的開發(fā)中偶爾會遇到這樣一種情況,需要對用戶的行為進行撤銷。要想實現(xiàn)撤銷,首先需要保存軟件系統(tǒng)的歷史狀態(tài),當用戶執(zhí)行撤銷時用之前的狀態(tài)覆蓋當前狀態(tài)。本節(jié)介紹的備忘錄模式提供了一種狀態(tài)恢復的實現(xiàn)機制,使得用戶可以方便的回到一個特定的歷史步驟。
定義:在不破壞封裝的前提下,捕獲一個對象的內(nèi)部狀態(tài),并在該對象之外保存這個狀態(tài),這樣可以在以后將對象恢復到原先保存的狀態(tài),它是一種對象行為模式,其別名為Token。
場景:使用js實現(xiàn)一個簡單的狀態(tài)機,用于狀態(tài)的保存,回退。實現(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("當前狀態(tài): " + originator.getState());
// 當前狀態(tài): State 4
originator.getStateFromMemento(careTaker.get(0));
console.log("恢復第一次保存狀態(tài): " + originator.getState());
// 恢復第一次保存狀態(tài): State 2
originator.getStateFromMemento(careTaker.get(1));
console.log("恢復第二次保存: " + originator.getState());
// 恢復第二次保存: State 3
這個例子里面Originator稱為原發(fā)器,可以通過saveStateToMemento創(chuàng)建一個備忘錄,存儲當前狀態(tài)。Memento是一個備忘錄對象,只供原發(fā)器使用,提供狀態(tài)提取方法。CareTaker稱之為負責人也可以叫管理者,它負責保存?zhèn)渫洠遣荒軐渫泝?nèi)容進行操作或檢查
備忘錄模式總結(jié):
優(yōu)點:
* 提供了一種狀態(tài)恢復的時間機制,使得用戶可以方便的回退到一個特定的歷史步驟。
* 備忘錄實現(xiàn)了對信息的封裝,一個備忘錄對象是一種原發(fā)器對象狀態(tài)的表示,不會被其他代碼所改動。
缺點:
* 備忘錄模式的主要缺點是資源消耗過大,如果需要保存的原發(fā)器類的成員變量太多,就不可避免的需要占用大量的存儲空間。
適用場景:
* 保存一個對象在某一時刻的全部或部分狀態(tài)
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
js+css實現(xiàn)的圓角邊框TAB選項卡滑動門代碼分享(2款)
這篇文章主要為大家詳細介紹了兩種js+css實現(xiàn)的圓角邊框TAB選項卡滑動門效果,很實用的代碼,推薦給大家,有需要的小伙伴可以參考下2015-08-08
一文詳解JavaScript中的事件循環(huán)(event?loop)機制
JavaScript中的事件循環(huán)(Event?Loop)是一種重要的機制,用于管理異步代碼的執(zhí)行,它確保?JavaScript?單線程環(huán)境中的任務按照正確的順序執(zhí)行,同時允許異步操作如定時器、網(wǎng)絡請求和事件處理,本將給大家詳細的介紹一下JavaScript事件循環(huán)機制,感興趣的朋友可以參考下2023-12-12
JS實現(xiàn)兩個跨域頁面實現(xiàn)量子糾纏互動效果
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)兩個跨域頁面實現(xiàn)量子糾纏互動效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果
這篇文章主要為大家詳細介紹了如何通過CSS、JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果,文中的示例代碼講解詳細,需要的小伙伴可以參考一下2024-01-01
open 動態(tài)修改img的onclick事件示例代碼
動態(tài)修改img的onclick事件,使用open也可輕松做到,下面有個不錯的示例,需要的朋友可以參考下2013-11-11

