js设计模式-命令模式

命令模式是一种组织型模式，主要用在把调用对象（用户界面、API和代理等）与实现操作的对象隔离开。也就是说，凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式。

命令模式的好处：1、提高程序的模块化程度和灵活性。（运用得当）；2、实现取消和状态恢复等复杂的有用特性非常容易。

例子：菜单组合对象

 /**

  * 菜单组合对象

  */

 /*command,Composite and MenuObject interfaces*/

 var Command = new Interface("Compand",["execute"]);

 var Composite = new Interface("Composite",["add","remove","getChild","getElement"]);

 var MenuObject = new Interface("MenuObject",["show","hide"]);

 /*MenuBar class, a composite*/

 var MenuBar = function(){

     this.menus = {};

     this.element = document.createElement("ul");

     this.element.className = "menu-bar";

     this.element.style.display = "none";

 }

 MenuBar.prototype = {

     add:function(menuObject){

         Interface.ensureImplements(menuObject,Composite,MenuObject);

         this.menus[menuObject.name] = menuObject;

         this.element.appendChild(this.menus[menuObject.name].getElement());

     },

     remove:function(name){

         delete this.menus[name];

     },

     getChild:function(name){

         return this.menus[name];

     },

     getElement:function(){

         return this.element;

     },

     show:function(){

         this.element.style.display = "block";

         for(name in this.menus){

             this.menus[name].show();

         }

     },

     hide:function(){

         this.element.style.display = "none";

     }

 }

 /*Menu class a composite*/

 //备注：这里为了获取Menu对象的父对象，所以多传了一个parent,同时在实现的接口下，又多加了两个方法：showContainer和hideContainer

 var Menu = function(name,parent){

     this.name = name;

     this.items = {};

     this.parent = parent;

     this.element = document.createElement("li");

     this.element.className = "menu";

     this.element.innerHTML = this.name;

     this.element.style.display = "none";

     this.container = document.createElement("ul");

     this.element.appendChild(this.container);

     var that = this;

     this.element.addEventListener("click",function(e){

         e.preventDefault();

         e.stopPropagation();

         //这里在显示当前菜单选项的时候，把其他的选项全部隐藏掉

         var menus = that.parent.menus;

         if(menus){

             for(var name in menus){

                 menus[name].hideContainer();

             }

         }

         that.showContainer();

     },false);

     document.body.addEventListener("click",function(e){

         e.preventDefault();

         e.stopPropagation();

         that.hideContainer();

     },false);

 };

 Menu.prototype = {

     add:function(menuItemObject){

         Interface.ensureImplements(menuItemObject,Composite,MenuObject);

         this.items[menuItemObject.name] = menuItemObject;

         this.container.appendChild(this.items[menuItemObject.name].getElement());

     },

     remove:function(name){

         delete this.items[name];

     },

     getChild:function(name){

         return this.items[name];

     },

     getElement:function(){

         return this.element;

     },

     show:function(){

         this.element.style.display = "block";

         for(name in this.items){

             this.items[name].show();

         }

     },

     hideContainer:function(){

         this.container.style.display = "none";

     },

     showContainer:function(){

         this.container.style.display = "block";

     },

     hide:function(){

         this.element.style.display = "none";

     }

 }

 /*MenuItem class, a leaf*/

 var MenuItem = function(name,command){

     Interface.ensureImplements(command,Command);

     this.name = name;

     this.element = document.createElement("li");

     this.element.className = "menu-item";

     this.element.style.display = "none";

     this.anchor = document.createElement("a");

     this.anchor.href = "#";

     this.anchor.innerHTML = this.name;

     this.element.appendChild(this.anchor);

     this.anchor.addEventListener("click",function(e){

         e.preventDefault();

         command.execute();

     });

 };

 MenuItem.prototype = {

     add:function(){},

     remove:function(){},

     getChild:function(){},

     getElement:function(){return this.element;},

     show:function(){

         this.element.style.display = "block";

     },

     hide:function(){

         this.element.style.display = "none";

     }

 }

界面：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>菜单对象</title>

         <style type="text/css">

             #container{margin:0 auto;padding:0; border:1px solid #ccc; width:500px; height:50px; font-family: "微软雅黑"; font-size: 14px; text-align: center;}

             .menu-bar{list-style: none;padding:0;width:100%;height:50px; margin-left:50px;}

             .menu-bar .menu{float:left; width:80px; text-align: center; cursor: pointer;height:30px; line-height:30px;}

             .menu-bar .menu:hover{background:#0000DD; color:#fff;}

             .menu-bar .menu ul{list-style:none;width:80px; margin:0;padding:0; background:#ddd; display: none; margin-top:5px; border: 1px solid black;}

             /*.menu-bar .menu:nth-of-type(1) ul{display: block;}*/

             .menu-bar .menu .menu-item{width:70px;height:30px; line-height: 30px; border-bottom: 1px dashed #ccc;}

             .menu-bar .menu .menu-item a{text-decoration: none;}

             #result{

                 margin:150px auto; height:50px; line-height: 50px; border: 2px solid red; width:300px;  text-align: center; font-family: "微软雅黑"; font-size: 16px;

             }

         </style>

     </head>

     <body>

         <div id="container">

         </div>

         <div id="result"></div>

     </body>

 </html>

 <script type="text/javascript" src="Interface.js"></script>

 <script type="text/javascript" src="Menu.js"></script>

 <script type="text/javascript">

     var oResult = document.getElementById("result");

     //定义每个菜单的action

     function FileActions(){}

     FileActions.prototype = {

         open:function(){

             oResult.innerHTML = "open command is executed";

         },

         close:function(){

             oResult.innerHTML = "close command is executed";

         },

         save:function(){

             oResult.innerHTML = "save command is executed";

         },

         saveAs:function(){

             oResult.innerHTML = "saveAs command is executed";

         }

     }

     function EditActions(){}

     EditActions.prototype = {

         cut:function(){

             oResult.innerHTML = "cut command is executed";

         },

         copy:function(){

             oResult.innerHTML = "copy command is executed";

         },

         paste:function(){

             oResult.innerHTML = "paste command is executed";

         },

         delete:function(){

             oResult.innerHTML = "delete command is executed";

         }

     }

     function InsertActions(){}

     InsertActions.prototype.insert = function(){

         oResult.innerHTML = "insert command is executed";

     }

     function HelpActions(){}

     HelpActions.prototype.help = function(){

         oResult.innerHTML = "help command is executed";

     }

 /*MenuCommand class. a command object*/

 var MenuCommand = function(action){

     this.action = action;

 }

 MenuCommand.prototype.execute = function(){

     this.action();

 }

 var fileActions = new FileActions();

 var editActions = new EditActions();

 var insertActions = new InsertActions();

 var helpActions = new HelpActions();

 var appMenuBar = new MenuBar();

 /*fileMenu*/

 var fileMenu = new Menu("File",appMenuBar);

 fileMenu.add(new MenuItem("Open",new MenuCommand(fileActions.open)));

 fileMenu.add(new MenuItem("Close",new MenuCommand(fileActions.close)));

 fileMenu.add(new MenuItem("Save",new MenuCommand(fileActions.save)));

 fileMenu.add(new MenuItem("Save As",new MenuCommand(fileActions.saveAs)));

 appMenuBar.add(fileMenu);

 /*editMenu*/

 var editMenu = new Menu("Edit",appMenuBar);

 editMenu.add(new MenuItem("Cut",new MenuCommand(editActions.cut)));

 editMenu.add(new MenuItem("Copy",new MenuCommand(editActions.copy)));

 editMenu.add(new MenuItem("Paste",new MenuCommand(editActions.paste)));

 editMenu.add(new MenuItem("Delete",new MenuCommand(editActions.delete)));

 appMenuBar.add(editMenu);

 /*the insert menu*/

 var insertMenu = new Menu("Insert",appMenuBar);

 insertMenu.add(new MenuItem("The Block",new MenuCommand(insertActions.insert)));

 appMenuBar.add(insertMenu);

 /*The help menu*/

 var helpMenu = new Menu("Help",appMenuBar);

 helpMenu.add(new MenuItem("TheHelp",new MenuCommand(helpActions.help)));

 appMenuBar.add(helpMenu);

 /*Build the menu bar*/

 document.getElementById("container").appendChild(appMenuBar.getElement());

 appMenuBar.show();

 </script>

巴特西

js设计模式-命令模式

最新文章

热门文章