JavaScript命令模式实现菜单管理.
1、命令模式
1.1 命令模式实现菜单程序
<body> <button id="botton1">点击按钮1</button> <button id="botton2">点击按钮2</button> <button id="botton3">点击按钮3</button> </body> <script> var button1 = document.getElementById('botton1'); var button2 = document.getElementById('botton2'); var button3 = document.getElementById('botton3'); </srcipt>定义setCommand函数，负责往按钮上增加命令；
var setCommand = function(button,command) { button.onclick = function() { command.execute(); }}按钮后面的行为被封装在下面的两个对象中：
var MenBar = { refresh:function() { // 刷新菜单的操作 }};var SubMenu = { add:function() { // 增加菜单的操作 }, del:function() { // 删除菜单的操作 }}在让button变得有用起来之前，我们先要把这些行为都封装在命令类中：
// 刷新var RefreshMenuBarCommand = function(receiver) { this.receiver = receiver;};RefreshMenuBarCommand.prototype.execute = function() { this.receiver.refresh();};// 增加var AddMenuCommand = function (receiver) { this.receiver = receiver;};AddMenuCommand.prototype.execute = function() { this.receiver.add();};// 删除var DelMenuCommand = function(receiver) { this.receiver = receiver;};DelMenuCommand.prototype.execute = funciton() { this.receiver.del();};最后把命令接收者传入到command对象中，并且把command对象安装到button上面：
var refreshMenuBarCommand = new RefreshMenuBarCommand(MenBar);var addMenuCommand = new AddMenuCommand(SubMenu);var delMenuCommand = new DelMenuCommand(SubMenu);setCommand(button1,refreshMenuBarCommand);setCommand(button2,addMenuCommand);setCommand(button3,delMenuCommand);1.2 Javascript中的命令模式
命令模式的由来，其实就是回调函数的一个面向对象的替代品。
利用JavaScript实现命令模式的：
var bindClick = function (button,func) { button.onclick = func;};var MenBar = { refresh = function () { console.log('刷新页面！'); }};var SubMenu = { add : function () { console.log('增加菜单！') }, del :funciton () { console.log('删除菜单') }};bindClick(button1,MenBar.refresh);bindClick(button2,SubMenu.add);bindClick(button3,SubMenu.del);在面向对象设计中，命令模式的接收者被当成command对象的属性保存起来，同时商定执行命令的操作调用command.execute方法。在使用闭包的命令模式实现中，接收者被封闭在闭包产生的环境中，执行命令更加简单，仅仅执行回调函数就可；
var setCommand = function (button,func) { button.onclick = function () { func() }};var MenuBar = { refresh = function () { console.log('刷新页面！'); }};var RefreshMenuBarCommand = function (receiver) { return function () { receiver.refresh(); }};var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);setCommand(button1,refreshMenuBarCommand);当然，假如想要更明确地表达当前正在使用命令模式，或者者出了执行命令之外，将来还有可能还要提供撤销命令等操作。那么最好还是把执行函数改成调用execute方法：
var RefreshMenuBarCommand = function (receiver) { reuturn { execute : function () { receiver.refresh(); } }};var setCommand = function (button ,command) { button.onclick = function () { command.execute(); }};var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);setCommand(button1,refreshMenuBarCommand);说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript命令模式实现菜单管理.
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript命令模式实现菜单管理.
