JavaScript命令模式实现菜单管理.
来源:     阅读:409
云上智慧
发布于 2020-04-24 12:54
查看主页

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);
免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 服务器应用
相关推荐
首页
搜索
订单
购物车
我的