软件设计模式（Design pattern），又称设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。**

设计模式的分类

设计模式可以分为三大类，分别是创建型设计模式、行为型设计模式以及结构型设计模式。

创建型的设计模式：

  1. 单例模式(Singleton)
  2. 构建模式(Builder)
  3. 原型模式(Prototype)
  4. 抽象工厂模式(Abstract Factory)
  5. 工厂方法模式(Factory Method)

行为设计模式：

  1. 策略模式(Strategy)
  2. 状态模式(State)
  3. 责任链模式(Chain of Responsibility)
  4. 解释器模式(Interpreter)
  5. 命令模式(Command)
  6. 观察者模式(Observer)
  7. 备忘录模式(Memento)
  8. 迭代器模式(Iterator)
  9. 模板方法模式(Template Method)
  10. 访问者模式(Visitor)


结构型设计模式：

  1. 装饰者模式(Decorator)
  2. 代理模式(Proxy)
  3. 组合模式(Composite)
  4. 桥连接模式(Bridge)
  5. 适配器模式(Adapter)
  6. 蝇量模式(Flyweight)
  7. 外观模式(Facade)

_

1.单例模式

一个类只有唯一的一个实例，这个实例在整个程序中有一个全局的访问点。
翻译过来想表达的就是，单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回。是我们平常中用的最多的情况。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <body>
  5.     <button id="btn">登录</button>
  6. </body>
  7. <script>
  8.     class Login {
  9.         createLayout() {
  10.             var oDiv = document.createElement('div')
  11.             oDiv.innerHTML = '我是登录框'
  12.             document.body.appendChild(oDiv)
  13.             oDiv.style.display = 'none'
  14.             return oDiv
  15.         }
  16.     }
  17.     class Single {
  18.         getSingle(fn) {
  19.             var result;
  20.             return function() {
  21.                 return result || (result = fn.apply(this, arguments))
  22.             }
  23.         }
  24.     }
  25.     var oBtn = document.getElementById('btn')
  26.     var single = new Single()
  27.     var login = new Login()
  28.     var createLoginLayer = single.getSingle(login.createLayout)
  29.     oBtn.onclick = function() {
  30.         var layout = createLoginLayer()
  31.         layout.style.display = 'block'
  32.     }
  33. </script>
  35. </html>

2.工厂模式

工厂模式属于创建型设计模式，其主要作用就是实现通过 一个函数 可以 创建不同类型的实例对象

简单使用

  1. // 工厂函数
  2. function createPerson(name, age) {
  3.     let person = {};
  4.     person.name = name;
  5.     person.getName = function() {
  6.         return this.name;
  7.     }
  8.     return person;
  9. }
  11. // 通过工厂函数创建 person 实例
  12. let person1 = createPerson('momo', 18);
  13. console.log(person1.getName());

综合使用

  1. // Person 构造函数
  2. function Person(name) {
  3.     this.name = name;
  4. }
  5. Person.prototype.getName = function() {
  6.     return this.name;
  7. }
  9. // Car 构造函数
  10. function Car(model) {
  11.     this.model = model;
  12. }
  13. Car.prototype.getModel = function () {
  14.     return this.module;
  15. }
  17. // 工厂函数
  18. function create(type, param) {
  19.     return new this[type](param);
  20. }
  21. // 绑定对应的构造函数到 create 原型上
  22. create.prototype = {
  23.     person: Person,
  24.     car: Car
  25. }
  27. // 通过工厂函数创建 Person 实例
  28. let person1 = new create('person', 'momo');
  29. console.log(person1.getName());
  31. // 通过工厂函数创建 Car 实例
  32. let car1 = new create('car', '奥迪');
  33. console.log(car1.getModel());

说明：

  1. 通过 new 调用 create 函数时，底层会创建一个新的对象，该对象的 __proto__ 等于 create.prototype
  2. 并且 create 函数中的 this 也指向了底层创建的这个新的对象
  3. 当执行到 new this[type](param) 语句时

(1) 先使用 this[type] 通过底层创建的实例取出在原型链上绑定的 type 类型的构造函数

(2) new this[type](param) 传入 param 参数通过 new 调用该构造函数

(3) 返回 type 类型的实例对象 **

3、构建模式

构建模式也属于创建型设计模式，使用建造模式来创建对象 更注重创建对象的细节 ，这种模式创建出的复杂对象或者复合对象 结构会非常清晰 。

下面给出一个需求场景：

我们通过 ajax 请求获取到了服务端返回的一组简历数据，为了做成统一的电子版简历，我们需要将这些信息进行整理，我们该如何去做呢？

下面使用 构造模式 来处理这些数据

  1. // 将传来的 param 数据抽象为三个类
  2. function formatData(param) {
  4.     let _candidate = new Person(param);
  6.     _candidate.name = new CreateName(param.name);
  7.     _candidate.work = new CreateWork(param.work);
  9.     return _candidate;
  10. }
  12. // 然后把对于具体数据处理的逻辑代码封装在对应的构造函数中
  13. function Person(param) {
  14.     this.name = param.name;
  15.     this.age = param.age;
  16. }
  18. function CreateName(name) {
  19.     this.name = name;
  20.     this.lastName = name.split(' ')[0];
  21.     this.firstName = name.split(' ')[1];
  22. }
  24. function CreateWork(work) {
  25.     switch (work) {
  26.         case 'engineer':
  27.             this.name = '工程师';
  28.             this.description = '热爱编程';
  29.             break;
  31.         case 'teacher':
  32.             this.name = '老师';
  33.             this.description = '教书育人';
  34.             break;
  36.         default:
  37.             this.name = work;
  38.             this.description = '无';
  39.     }
  40. }
  42. CreateWork.prototype.changeWork = function (work) {
  43.     this.name = work;
  44. }
  46. CreateWork.prototype.changeDes = function (des) {
  47.     this.description = des;
  48. }
  51. // 使用 formatData 处理数据
  52. let candidateArr = [];
  53. for (let i = 0; i < data.length; i++) {
  54.     // 将整理的数据保存到数组中
  55.     candidateArr.push(formatData(data[i]));
  56. }
  58. console.log(candidateArr);

4、组合模式

组合模式作用于将多个部分通过组合变成一个整体。

场景：

比如我们去麦当劳店了一个汉堡、两份薯条和一杯可乐，我们可以把这些东西看成一个个组件，通过组合就可以将整个套餐产出给顾客。

  1. const MacroCommand = function () {
  2.     return {
  3.         lists: [],
  4.         add: function (task) {
  5.             this.lists.push(task)
  6.         },
  7.         excute: function () { 
  8.             for (let i = 0; i < this.lists.length; i++) {
  9.                 this.lists[i].excute()
  10.             }
  11.         },
  12.     }
  13. }
  15. // 套餐1
  16. const command1 = MacroCommand() 
  17. command1.add({
  18.     excute: () => console.log('薯条') 
  19. })
  20. command1.add({
  21.     excute: () => console.log('麦旋风') 
  22. })
  25. // 套餐2
  26. const command2 = MacroCommand() // 组合对象
  27. command2.add({
  28.     excute: () => console.log('汉堡')
  29. })
  30. command2.add({
  31.     excute: () => console.log('可乐')
  32. })
  34. // 套餐3
  35. const command3 = MacroCommand()
  36. command3.add({
  37.     excute: () => console.log('甜筒')
  38. })
  39. command3.add({
  40.     excute: () => console.log('鸡块')
  41. })
  43. // 同时买下套餐1、套餐2、套餐3
  44. const macroCommand = MacroCommand()
  45. macroCommand.add(command1)
  46. macroCommand.add(command2)
  47. macroCommand.add(command3)
  49. macroCommand.excute()

5、策略模式

定义： 根据不同参数可以命中不同的策略
策略模式将不同算法进行合理的分类和单独封装，让不同算法之间可以互相替换而不会影响到算法的使用者

  • 实现不同, 作用一致
  • 调用方式相同,降低了使用成本以及不同算法之间的耦合
  • 单独定义算法模型, 方便单元测试
  • 避免大量冗余的代码判断,比如if else等

根据不同的参数（level）获得不同策略方法(规则),

  1. const strategy = {
  2.   'S': function(salary) {
  3.     return salary * 4
  4.   },
  5.   'A': function(salary) {
  6.     return salary * 3
  7.   },
  8.   'B': function(salary) {
  9.     return salary * 2
  10.   }
  11. }
  13. const calculateBonus = function(level, salary) {
  14.   return strategy[level](salary)
  15. }
  17. calculateBonus('A', 10000) // 30000

策略模式的使用常常隐藏在高阶函数中, 稍微变换下上述 demo 的形式如下, 可以发现我们平时已经在使用它了。

  1. const S = function(salary) {
  2.   return salary * 4
  3. }
  5. const A = function(salary) {
  6.   return salary * 3
  7. }
  9. const B = function(salary) {
  10.   return salary * 2
  11. }
  13. const calculateBonus = function(func, salary) {
  14.   return func(salary)
  15. }
  17. calculateBonus(A, 10000) // 30000

6、命令模式

命令模式与策略模式有些类似, 在 JavaScript 中它们都是隐式的。

下面代码中对按钮和命令进行了抽离, 因此可以复杂项目中可以使用命令模式将界面的代码和功能的代码交付给不同的人去写。

  1. const setCommand = function(button, command) {
  2.   button.onClick = function() {
  3.     command.excute()
  4.   }
  5. }
  7. // --------------------  上面的界面逻辑由A完成, 下面的由B完成
  9. const menu = {
  10.   updateMenu: function() {
  11.     console.log('更新菜单')
  12.   },
  13. }
  15. const UpdateCommand = function(receive) {
  16.   return {
  17.     excute: receive.updateMenu,
  18.   }
  19. }
  21. const updateCommand = UpdateCommand(menu) // 创建命令
  23. const button1 = document.getElementById('button1')
  24. setCommand(button1, updateCommand)

本文来自

通过将数据和事件接口化来构建若干个子类。
例子；得到不同生产商牛奶的名字；使用共同的接口，避免每次创建新对象都会new

  1. <script>
  2.     function Milke(name){
  3.         let m={};
  4.         m.name=name;
  5.         m.getname=function(){
  6.             console.log(this.name)
  7.         }
  8.         return m;
  9.     }
  10.     let ty= Milke( 'ty')
  11.     ty.getname();
  12.     console.log(ty.name);
  13. </script>

类的写法：使用共同的接口，避免每次创建新对象都会new

7 原型模式（Prototype）

用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。
与原型继承是同一个意思。
在JavaScript中，实现原型模式是在ECMAScript5中，提出的Object.create方法，使用现有的对象来提供新创建的对象的proto。

  1. <script>
  2.   var a= {
  3.     name: 'everyone',
  4.     getName: function() {
  5.         return this.name
  6.     }
  7. }
  9. var b = Object.create(a, {
  10.     classroom: {
  11.         value: '504'
  12.     }
  13. })
  15. console.log(b.getName())  // everyone
  16. console.log(b.classroom)  // 504
  17. console.log(b.__proto__ === a)  //true

现在es6有了类的思想后，对于其的实现更加简单。
例子，孩子继承父母的房产

  1. <script>
  2.   class Parent{
  3.     constructor(){
  4.     }
  5.     home(){
  6.         console.log('apartment');
  7.     }
  8. }
  9. //继承
  10. class Child extends Parent{
  11. }
  12. let  son= new  Child();
  13. son.home();

image.png

image.png

8.迭代器模式

在不暴露对象内部结构的同时，可以顺序地访问集合对象内部的各个元素。

9.状态模式

状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为。
我们说到封装一开始想到是封装函数，和对象。但是在状态模式下，我们封装的是对象的状态。
例子：开关灯

  1. <script>
  2.     var d = {
  3.         off: {
  4.             // 状态对应的行为
  5.             done: function () {
  6.                 console.log('关灯');
  7.                 this.button.innerHTML = '关';
  8.                 // 下一个状态
  9.                 this.next =d.on;
  10.             }
  11.         },
  12.         on: {
  13.             done: function () {
  14.                 console.log('开灯');
  15.                 this.button.innerHTML = '开';
  16.                 this.next = d.off;
  17.             }
  18.         }
  19.     }
  21.     var Light = function () {
  22.         // 设置初始状态
  23.         this.next = d.off;
  24.         this.button = null;
  25.     }
  27.     Light.prototype.init = function () {
  28.         var button = document.createElement('button');
  29.         var self = this;
  31.         button.innerHTML = '开灯'
  32.         this.button = document.body.appendChild(button);
  33.         this.button.onclick = function () {
  34.         self.next.done.call(self);
  35.         }
  36.     }
  37.     var light = new Light();
  38.     light.init();
  40. </script>

10.观察者模式

观察者模式又叫做发布-订阅模式。这是一种一对多的对象依赖关系，当被依赖的对象的状态发生改变时，所有依赖于它的对象都将得到通知。

  1. //观察者模式的模板
  2. var observer = (function() {
  3.     var orderList = {},
  4.         listen,
  5.         publish,
  6.         remove;
  7.     listen = function(id, fn) {
  8.         ...
  9.     };
  11.     publish = function() {
  12.         ...
  13.     };
  15.     remove = function(id, fn) {
  16.         ...
  17.     };
  19.     return {
  20.         listen: listen,
  21.         publish: publish,
  22.         remove: remove
  23.     }
  24. })();

11.装饰器模式

在不改变原对象的基础上，通过对其进行包装拓展，使得原有对象可以动态具有更多功能，从而满足用户的更复杂需求”。

例子；普通车10块，新车11块

  1. <script>
  2.    function car(){
  3.        this.price=10;
  4.    }
  5.    function newcar(carClass){
  6.     carClass.isnew=true;
  7.     carClass.price+=1;
  8.    }
  9.    var car = new car();
  10.    console.log( car.price);
  11.    newcar(car);
  12.    console.log(car.price);

image.png

12.代理模式

当多个对象需要处理同一个请求的时候，可以把这些请求交给另外一个对象处理

委托模式写法；把子元素的事件委托给父元素去绑定执行，这样我们为父元素绑定一个事件，通过委托模式就实现了所有子元素的点击事件需求

  1. <body>
  2.     <ul id='up'>
  3.     <li>a </li>
  4.     <li>b </li>
  5.     <li>c </li>
  6.     </ul>
  7. </body>
  8. <script>
  9. var ul=document.getElementById('up');
  10. ul.onclick=function(e){
  11.     var e=e||window.event,
  12.     tar=e.target||e.srcElement;
  13.     if(tar.nodeName.toLowerCase()==='li'){
  14.         tar.style.backgroundColor='yellow';
  15.     }
  16. }
  17.     </script>