欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript設(shè)計模式 – 備忘錄模式原理與用法實例分析

 更新時間:2020年04月21日 11:57:07   作者:李小強  
這篇文章主要介紹了javascript設(shè)計模式 – 備忘錄模式,結(jié)合實例形式分析了javascript備忘錄模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下

本文實例講述了javascript設(shè)計模式 – 備忘錄模式原理與用法。分享給大家供大家參考,具體如下:

介紹:在我們的開發(fā)中偶爾會遇到這樣一種情況,需要對用戶的行為進行撤銷。要想實現(xiàn)撤銷,首先需要保存軟件系統(tǒng)的歷史狀態(tài),當用戶執(zhí)行撤銷時用之前的狀態(tài)覆蓋當前狀態(tài)。本節(jié)介紹的備忘錄模式提供了一種狀態(tài)恢復(fù)的實現(xiàn)機制,使得用戶可以方便的回到一個特定的歷史步驟。

定義:在不破壞封裝的前提下,捕獲一個對象的內(nèi)部狀態(tài),并在該對象之外保存這個狀態(tài),這樣可以在以后將對象恢復(fù)到原先保存的狀態(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("恢復(fù)第一次保存狀態(tài): " + originator.getState());
// 恢復(fù)第一次保存狀態(tài): State 2
originator.getStateFromMemento(careTaker.get(1));
console.log("恢復(fù)第二次保存: " + originator.getState());
// 恢復(fù)第二次保存: State 3

這個例子里面Originator稱為原發(fā)器,可以通過saveStateToMemento創(chuàng)建一個備忘錄,存儲當前狀態(tài)。Memento是一個備忘錄對象,只供原發(fā)器使用,提供狀態(tài)提取方法。CareTaker稱之為負責人也可以叫管理者,它負責保存?zhèn)渫洠遣荒軐渫泝?nèi)容進行操作或檢查

備忘錄模式總結(jié):

優(yōu)點:
* 提供了一種狀態(tài)恢復(fù)的時間機制,使得用戶可以方便的回退到一個特定的歷史步驟。
* 備忘錄實現(xiàn)了對信息的封裝,一個備忘錄對象是一種原發(fā)器對象狀態(tài)的表示,不會被其他代碼所改動。
缺點:
* 備忘錄模式的主要缺點是資源消耗過大,如果需要保存的原發(fā)器類的成員變量太多,就不可避免的需要占用大量的存儲空間。

適用場景:
* 保存一個對象在某一時刻的全部或部分狀態(tài)

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

  • javascript中的繼承實例代碼

    javascript中的繼承實例代碼

    javascript中的繼承使用實例代碼,需要的朋友可以參考下。
    2011-04-04
  • 用js控制電燈開關(guān)

    用js控制電燈開關(guān)

    這篇文章主要為大家詳細介紹了用js控制電燈開關(guān),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • JS擴展類,克隆對象與混合類實例分析

    JS擴展類,克隆對象與混合類實例分析

    這篇文章主要介紹了JS擴展類,克隆對象與混合類,通過自定義extend,clone與augment函數(shù)實例分析了類的擴展,對象的克隆與混合類相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下
    2016-11-11
  • JS判斷字符串包含的方法

    JS判斷字符串包含的方法

    這篇文章主要介紹了JS判斷字符串包含的方法,可有效的檢測字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常簡單實用,需要的朋友可以參考下
    2015-05-05
  • js如何修改對象數(shù)組的key值

    js如何修改對象數(shù)組的key值

    這篇文章主要介紹了js如何修改對象數(shù)組的key值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • Webpack常見靜態(tài)資源處理-模塊加載器(Loaders)+ExtractTextPlugin插件

    Webpack常見靜態(tài)資源處理-模塊加載器(Loaders)+ExtractTextPlugin插件

    這篇文章主要介紹了Webpack常見靜態(tài)資源處理-模塊加載器(Loaders)+ExtractTextPlugin插件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • javascript下拉框選項單擊事件的例子分享

    javascript下拉框選項單擊事件的例子分享

    這篇文章主要分享了一些javascript下拉框選項單擊事件的例子,以及在例子中遇到的問題的解決方法,十分實用,推薦給小伙伴們參考下。
    2015-03-03
  • javascript數(shù)組的使用

    javascript數(shù)組的使用

    js Array 對象用于在單個的變量中存儲多個值,這里簡單的接受下,需要的朋友可以參考下
    2013-03-03
  • JavaScript實現(xiàn)復(fù)選框全選或全取消操作

    JavaScript實現(xiàn)復(fù)選框全選或全取消操作

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)復(fù)選框全選或全取消操作,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • JS常見錯誤(Error)及處理方案詳解

    JS常見錯誤(Error)及處理方案詳解

    這篇文章主要介紹了JS常見錯誤(Error)及處理方案詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-07-07

最新評論