<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    emu in blogjava

      BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
      171 隨筆 :: 103 文章 :: 1052 評論 :: 2 Trackbacks
    早上看了水晶龍的一個undo的例子,其中雖然有一些command模式的思想,但是用的好像不夠正宗。其實用command模式實現undo和redo應該還是比較容易的,做個例子練練手吧:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> test command </TITLE>
    <META NAME="Author" CONTENT="emu">

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var actionStack = [];//操作棧
    var actionIndex = 0;//操作棧中當前操作的指針

    //-----------------------  command對象基類 ------------------------------
    function BaseAction(){
    }
    BaseAction.prototype.exec
    =function(){
            actionStack[actionIndex
    ++= this;
            actionStack.length 
    = actionIndex;
    }
    BaseAction.prototype.undo
    =function(){
            alert(
    "此操作未定義相應的undo操作");
    }
    BaseAction.prototype.redo
    =function(){
            alert(
    "此操作未定義相應的redo操作");
    }

    //-----------------------  move操作的command對象 ------------------------------
    function MoveAction(elm){
        
    this.oldX = elm.oldX;
        
    this.oldY = elm.oldY;
        
    this.newX = elm.newX;
        
    this.newY = elm.newY;
        
    this.sourceElement = elm;
        
    this.status = "done";
    }
    MoveAction.prototype 
    = new BaseAction();
    MoveAction.prototype.undo
    =function(){
        
    if (this.status != "done"return;
        
    this.sourceElement.style.left = this.oldX;
        
    this.sourceElement.style.top = this.oldY;
        
    this.status = "undone";
    }
    MoveAction.prototype.redo
    =function(){
        
    if (this.status != "undone"return;
        
    this.sourceElement.style.left = this.newX;
        
    this.sourceElement.style.top = this.newY;
        
    this.status = "done";
    }
    //-----------------------  change操作的command對象 ------------------------------
    function ChangeAction(elm){
        
    this.sourceElement = elm;
        
    this.oldValue = elm.defaultValue;
        
    this.newValue = elm.value;
        elm.defaultValue 
    = elm.value;
        
    this.status = "done";
    }
    ChangeAction.prototype 
    = new BaseAction();
    ChangeAction.prototype.undo 
    = function(){
        
    if (this.status != "done"return;
        
    this.sourceElement.value = this.sourceElement.defaultValue = this.oldValue;
        
    this.status = "undone";
    }

    ChangeAction.prototype.redo 
    = function(){
        
    if (this.status != "undone"return;
        
    this.sourceElement.value = this.newValue;
        
    this.status = "done";
    }


    //---------------------  全局函數  ----------------------------
    function undo(){
        
    if (actionIndex>0){
            actionStack[
    --actionIndex].undo();
        }
    }
    function redo(){
        
    if (actionIndex<actionStack.length){
            actionStack[actionIndex
    ++].redo();
        }
    }

    function checkMouseMove(){
        
    if (window.activeElement){
            
    var elm = window.activeElement;
            elm.style.left 
    = event.x-elm.innerX;
            elm.style.top 
    = event.y-elm.innerY;
        }
    }
    function releaseMouse(){
        
    if (window.activeElement){
            activeElement.newX 
    = event.x-activeElement.innerX;
            activeElement.newY 
    = event.y-activeElement.innerY;
            
    new MoveAction(activeElement).exec();
            window.activeElement 
    = null;
        }
    }
    function drag(){
        
    if (event.button!=2return;
        
    var elm = event.srcElement;
        window.activeElement 
    = elm;
        elm.oldX 
    = elm.offsetLeft;
        elm.oldY 
    = elm.offsetTop;
        elm.innerX 
    = event.x - elm.oldX;
        elm.innerY 
    = event.y - elm.oldY;
    }

    function changeValue(){
        
    new ChangeAction(event.srcElement).exec();
    }
    //-->
    </SCRIPT>
    </HEAD>

    <BODY onmousemove="checkMouseMove()" onmouseup="releaseMouse()" oncontextmenu="return false">
    <input type=button onclick=undo() value=undo>
    <input type=button onclick=redo() value=redo>
    <input value="drag me" onmousedown="drag()" onchange="changeValue()" style="position:absolute;left:150;color:blue">
    <input value="drag me" onmousedown="drag()" onchange="changeValue()" style="position:absolute;left:350;color:green">
    <input value="drag me" onmousedown="drag()" onchange="changeValue()" style="position:absolute;left:550;color:violet">
    </BODY>
    </HTML>

    用鼠標右鍵拖動輸入框,或者直接修改輸入框的內容,可以一一 undo 再 redo 。

    看來效果還不錯。秋水說有bug,不過我沒有重現出來呢?
    posted on 2005-09-28 18:16 emu 閱讀(5575) 評論(6)  編輯  收藏

    評論

    # re: 在javascript中用command 模式實現undo和redo 2005-09-28 18:23 huangyi
    有意思 從來沒想過用js來做這種事情  回復  更多評論
      

    # re: 在javascript中用command 模式實現undo和redo 2005-09-28 18:55 emu
    呵呵,我現在不做java了,只能在js上干這些事情了。

    JK手腳真快,一下發現了兩個bug:

    1 從一個textbox把文字拖放到另一個textbox的情況下不能undo,因為ie沒有觸發兩個onchange事件給我,不能全怪我啊。

    2 修改值后我的undo功能和IE自帶的ctrl-z有沖突,呵呵。  回復  更多評論
      

    # re: 在javascript中用command 模式實現undo和redo 2006-01-17 10:38 errorfun
    牛哥......
    你太牛了,我佩服得五體投地  回復  更多評論
      

    # re: 在javascript中用command 模式實現undo和redo 2006-05-24 09:27 jlove
    真強  回復  更多評論
      

    # re: 在javascript中用command 模式實現undo和redo 2013-08-16 10:07 帝君
    樓主我想問下啊 你這個代碼 在文本域輸入內容的時候 如果不失去焦點就無法進行撤銷啊 有沒有什么辦法解決呢  回復  更多評論
      

    # re: 在javascript中用command 模式實現undo和redo 2013-08-16 10:08 帝君
    如果有解決的辦法 請您聯系下我啊 我很急 32227304 郵箱QQ都可以 謝謝  回復  更多評論
      


    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: 亚洲av色香蕉一区二区三区| 日本亚洲免费无线码| 一区视频免费观看| 亚洲AⅤ视频一区二区三区 | 一区二区三区亚洲视频| 亚洲欧美日韩中文字幕在线一区| 国产va精品免费观看| 亚洲色大成网站WWW国产| 成人无遮挡毛片免费看| 亚洲熟妇AV一区二区三区浪潮| 亚洲啪啪免费视频| 久久狠狠爱亚洲综合影院| 性色av免费观看| 国产成人高清亚洲一区久久 | 亚洲中文字幕久久精品无码A| 在线A级毛片无码免费真人| 最新亚洲人成无码网站| 亚洲综合最新无码专区| 丁香花在线视频观看免费 | 日日AV拍夜夜添久久免费| 午夜亚洲国产精品福利| 在线观看午夜亚洲一区| 99久久人妻精品免费一区| 亚洲人成网男女大片在线播放| 永久免费视频v片www| 未满十八私人高清免费影院| 久久精品国产精品亚洲艾| 可以免费看的卡一卡二| 黄网站在线播放视频免费观看| 亚洲第一AAAAA片| 欧洲黑大粗无码免费| 在线91精品亚洲网站精品成人| 国产成人综合亚洲亚洲国产第一页| 美女被cao免费看在线看网站| 日韩亚洲产在线观看| 亚洲综合激情另类专区| 91精品国产免费久久国语麻豆| 亚洲日本在线电影| 国产亚洲3p无码一区二区| 色婷婷7777免费视频在线观看| 女人裸身j部免费视频无遮挡|