JS设计模式之命令模式详解

这次给大家带来js设计模式之命令模式详解,使用js命令模式详解的注意事项有哪些,下面就是实战案例,一起来看一下。

概念 
命令模式用于将一个请求封装成一个对象,从而可以用不同的参数对客户进行参数化,该模式将函数的调用请求和操作封装成一个单一的对象,然后对这个对象进行单一的处理,简而言之分为三个对象: 
1.发起者:发出调用命令即可,具体如何执行,谁来执行并不清楚。 
2.接收者:有对应的接口处理不同的命令,至于命令是什么,谁发出的,这不重要。 
3.命令对象:上面我们说过,我们将发起者和接受者分开了,而这需要这个桥梁链接起来,这就是命令对象,命令对象接受发送者的调用,=然后调用接受者的相应接口。

作用以及注意事项 
作用: 
1.将封装、请求、调用结合为一体。 
2.提高程序模块化的灵活性。 
注意事项: 
不需要借口一致,直接调用函数即可,以免造成浪费。

实例

   // 发送者             var setCommond = function(button, fn) {                 button.onClick = function() {                     fn()                 }             };             // 执行命令者             var menu = {                 reFresh: function() {                     console.log("刷新");                 },                 add: function() {                     console.log("增加");                 },                 delete: function() {                     console.log("删除");                 }             };             // 命令对象             var commondObj = function(reciver) {                return function() {                     reciver.reFresh();                 }             };             var commondObj1 = commondObj(menu);             setCommond(btn1, commondObj1);

登录后复制

发送者(setCommond):不关心给哪个button,以及绑定什么事件,只要通过参数传入就好。 
命令对象(commondObj):只需要接收到接受者的参数,当发送者发出命令时,执行就好。 
接受者(menu):不用关心在哪里被调用被谁调用,只需要按需执行就好了。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

JS设计模式之建造者模式详解

JS的设计模式之构造函数模式详解

js设计模式之-单例模式的使用

以上就是JS设计模式之命令模式详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2782952.html

(0)
上一篇 2025年3月8日 16:41:25
下一篇 2025年3月8日 16:41:37

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript中的堆排序详解

    本篇文章讲述了javascript中的堆排序,大家对javascript中的堆排序不了解的话或者对javascript中的堆排序感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 堆排序可以说是一种利用堆的概念来排序的选择排…

    2025年3月8日
    200
  • JavaScript中的计数排序详解

    本篇文章讲述了javascript中的计数排序,大家对javascript中的计数排序不了解的话或者对javascript中的计数排序感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 计数排序的核心在于将输入的数据值转化为…

    2025年3月8日
    200
  • JS设计模式之原型模式详解

    这次给大家带来js设计模式之原型模式详解,使用js原型模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念:原型模式是指用原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象。对于原型模式,我们利用javascript原型继承…

    编程技术 2025年3月8日
    200
  • javascript如何实现小球跳动效果

    这次给大家带来javascript如何实现小球跳动效果,javascript实现小球跳动效果的注意事项有哪些,下面就是实战案例,一起来看一下。 今天介绍的是一种通过javascript实现的一种炫酷的动画效果,具体实现特效我通过图片展示给大…

    2025年3月8日
    200
  • 细说JavaScript中的作用域与变量

    本篇文章讲述了JavaScript中的作用域与变量,大家对JavaScript中的作用域与变量不了解的话或者对JavaScript中的作用域与变量感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 变量作用域 作用域:就是变…

    2025年3月8日
    200
  • 好用的js插件分享

    从一些开源网站上下载下来的 后台管理系统模板一般会有很多的js ,其js 的功能是什么呢?这里随手查询了一下,记录下来,希望本文能帮助到大家。 正文: 1.zDialog.js 各种弹窗插件 详细案例:http://www.2ky.cn/P…

    2025年3月8日 编程技术
    200
  • vue-cli初始化一个vue.js项目的方法实例

    解析打包.vue文件 vue为了能够使我们在项目开发中对组件进行更好的维护,提供了一个单文件组件系统,vue把每一个独立的组件放在一个.vue的文件中,在这个文件中提供基础三个自定义标签:1. template2. script3. sty…

    编程技术 2025年3月8日
    200
  • javascript实现线程以及事件循环详解

     本篇文章讲述了javascript实现线程以及事件循环,大家对javascript实现线程以及事件循环不了解的话或者对javascript实现线程以及事件循环感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 1.为什么说…

    2025年3月8日
    200
  • vuejs实现插件状态管理详解

    本篇文章讲述了vuejs实现插件状态管理,大家对vuejs实现插件状态管理不了解的话或者对vuejs实现插件状态管理感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 对于新手来说,一开始接触vuex时候只听说它很强大,很好…

    2025年3月8日
    200
  • JavaScript实现事件委托方法详解

    本篇文章讲述了JavaScript实现事件委托方法,大家对JavaScript实现事件委托方法不了解的话或者对JavaScript实现事件委托方法感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 基本概念 事件委托,通俗地…

    2025年3月8日
    200

发表回复

登录后才能评论