正常操作，正常分析，大家好，我是D1n910。

今天我继续来学习 《JavaScript 设计模式》的第四篇 行为型设计模式

这是一个连续的读书笔记，所以如果你之前的内容没有看的话，可以去看看（建议直接看书，当然书的例子都比较早了，是2015年之前的代码内容，过了六年了，前端发展了很多，比如类的声明可以直接用 Class 了）。

直接查看目录就可以查看到所有的系列文章啦。

这里再次感谢 《Javascript 设计模式》及其作者 张荣铭，专栏内容是在它的基础上生成的。

现在会觉得很多设计模式离我们有点遥远，是因为我们现在都在用大佬写好的框架吧，很多设计模式都包含在框架里了。

后面有机会的话，我希望我可以查看目前主流框架的源代码，然后进行讲解。

对应的代码，请查看

https://github.com/D1N910/JavaScript-design-patterns.git

第四篇 行为型设计模式

行为型设计模式用于不同对象之间职责划分或算法抽象，行为型设计模式不仅仅涉及类和对象，还涉及类或对象之间的交流模式并加以实现。

第 21 章  命令模式

命令模式（Command）：将请求与实现解耦并封装成独立对象，从而使不同的请求对客户端实现参数化。一般是用于创建多个类似的视图。

比如我们的场景是能够动态创建一个图片展示页面，其中具有标题，图片容器。

创建命令对象

1、命令对象结构：

2、书写基本静态变量

   // 模块

   var tpl = {

       // 展示标题结构模版

       title: [

           '<div class="title">',

               '<div class="main">',

                   '<h2>{ #title# }</h2>',

                   '<p>{ #tips# }</p>',

               '</div>',

           '</div>'

       ].join(),

       // 展示图片

       product: [

           '<div class="product">',

               '<img src="{ #src# }" alt="">',

               '<p>{ #text# }</p>',

           '</div>'

       ].join()

   },

   // 缓存格式化内容

   html = '';

   // 格式化字符串

   function  formateString(str, obj) {

       // 替换'{ #' 与'# }' 之间的字符串

       return str.replace(/\{ #(\w+)# \}/g, function (match, key) {

           return obj[key]

       })

   }

格式化字符串的正则表达式很美妙，其中\w可以匹配正常的英文字符、数字、下划线、横杠，符合变量的规则；全局匹配后，能够插入变量，真的非常美妙。

       // 创建方法

       create: function (data, type) {

           // 遍历数组

           if (data.length) {

               for (var i = 0; i < data.length; i ++) {

                   html += formateString(tpl[type], data)

               }

           } else {

               // 直接格式化

           }

       }

       // 展示视图

       dispaly: function (container, data, view) {

           // 如果传入数据

           if (data) {

               this.create(data, view);

           }

           // 展示模块

           container.innerHTML = html;

           html = '';

       }

   return function excute(msg) {

       // 解析命令，如果 msg 的 params 不是数组，要转转换成数组

       msg.params = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param];

       Action[msg.command].apply(Action, msg.param)

   }

我们通过命令接口来使用 Action 方法，其中 apply 会重新定义 this，这里为了this指向为 Action，所以重新绑定了 Action，apply 的传参是数组，所以这边要转换成数组。

6、使用命令。

命令模式封装了执行命令，解决命令发起者与命令执行者之间的耦合。

每一条命令实质上是一个操作。命令的使用者不必了解命令的执行者（命令对象）的命令接口是如何实现的、命令是如何执行的。所有的命令都存储在命令对象中。

优点：

解决命令使用者之间的耦合。新的命令很容易加入到命令系统中，供使用者使用。命令的使用具有一致性，多数的命令在一定成都上是简化操作方法的使用的。

缺点：

每次执行一次操作都要调用一次命令对象，增加了系统的复杂度。

本章 End

d1n910 于 2021年03月01日 写于南山后海