摘要:中的命令模式點擊按鈕刷新菜單目錄設(shè)置背景色的例子撤銷命令我們現(xiàn)在來實現(xiàn)一個撤銷操作的例子界面上有四個按鈕,三個可以設(shè)置不同的背景色,按鈕可以撤銷上一次的操作重做操作這里我們增加一個按鈕,以恢復(fù)之前的操作,需要一個來記錄當前的索引
前言
本系列文章主要根據(jù)《JavaScript設(shè)計模式與開發(fā)實踐》整理而來,其中會加入了一些自己的思考。希望對大家有所幫助。
文章系列js設(shè)計模式--單例模式
js設(shè)計模式--策略模式
js設(shè)計模式--代理模式
js設(shè)計模式--迭代器模式
js設(shè)計模式--發(fā)布訂閱模式
概念命令模式中的命令(command)指的是一個執(zhí)行某些特定事情的指令。
場景有時候需要向某些對象發(fā)送請求,但是并不知道請求的接收 者是誰,也不知道被請求的操作是什么。
如快餐店點餐,我們不需要知道廚師是誰,我們只需要把訂單交給服務(wù)員
請求發(fā)送者和請求接收者能夠消除彼此之間的耦合關(guān)系
例子 按鈕點擊 簡單的實現(xiàn)Document
如果這個點擊事件實現(xiàn)很復(fù)雜,需要多人合作完成,那我們不得不深入到button1.onclick內(nèi)部去修改代碼,違背了開放封閉原則
命令模式實現(xiàn)Document
JavaScript 作為將函數(shù)作為一等對象的語言,跟策略模式一樣,命令模式也早已融入到了 JavaScript 語言之中。
js中的命令模式設(shè)置背景色的例子 撤銷命令Document
我們現(xiàn)在來實現(xiàn)一個撤銷操作的例子:
界面上有四個按鈕,三個可以設(shè)置不同的背景色,undo按鈕可以撤銷上一次的操作
重做操作Document
這里我們增加一個redo按鈕,以恢復(fù)之前的操作,需要一個currentIndex來記錄當前的索引
Document
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/100688.html
摘要:命令設(shè)計模式涉及三類對象抽象命令類抽象命令類一般是一個抽象類或接口,在其中聲明了用于執(zhí)行請求的等方法,通過這些方法可以調(diào)用請求接收者的相關(guān)操作。 命令模式 命令模式定義為:Encapsulate a request as an object,there by letting you parameterize clients with different requests,queue o...
摘要:撤銷重做是一款編輯器的基礎(chǔ)功能,它讓用戶在進行錯誤操作后,可以讓編輯器回滾到錯誤操作前的狀態(tài)。選擇實現(xiàn)方案基于對象序列化的實現(xiàn)功能,其中一個方法是基于對象序列化的。示例編輯器的撤銷重做功能使用了這種模式。 最近在做一個網(wǎng)頁版的 svg 編輯器,為此學(xué)習了編輯器相關(guān)方面的知識。本文是我的一些粗淺學(xué)習總結(jié),希望可以給初學(xué)者一些思路。 前面的話 隨著近幾年前端技術(shù)的快速發(fā)展,人們更傾向于將應(yīng)...
摘要:大部分前端應(yīng)用都部署在上,若想全局住一個項目,命令是一項必不可少的技能。編輯器命令非常強大,掌握最最基本的就可以解決問題了。命令模式下接受命令輸入且顯示在終端,回車生效。常見的命令有,退出,強制退出,保存,保存并退出。 大部分前端應(yīng)用都部署在linux上,若想全局hold住一個項目,linux命令是一項必不可少的技能。許多前端對linux命令并不重視,其實這是一個學(xué)習性價比非常高的知識...
摘要:前言近期在準備搭建一個全棧開發(fā)的社區(qū),之前由于沒有云服務(wù)器搭建經(jīng)驗,這篇文章做一下相關(guān)的記錄,后續(xù)再深入學(xué)習研究。或用戶登錄云服務(wù)器,直接使用命令進行連接,如云服務(wù)器公網(wǎng),然后輸入用戶的初始密碼,即可完成登錄。云服務(wù)器的端口,必須填。 前言 近期在準備搭建一個vue.js+node.js全棧開發(fā)的社區(qū),之前由于沒有云服務(wù)器搭建經(jīng)驗,這篇文章做一下相關(guān)的記錄,后續(xù)再深入學(xué)習研究。本文不局...
閱讀 3295·2021-11-25 09:43
閱讀 2097·2021-09-22 10:02
閱讀 3356·2021-09-06 15:00
閱讀 2308·2019-08-30 15:56
閱讀 2361·2019-08-30 15:54
閱讀 3237·2019-08-30 14:14
閱讀 2270·2019-08-29 17:25
閱讀 2913·2019-08-29 17:16