大部分的解决方案都是在中间加一层。

如何去设计你的功能

设计思路：
需求 => 思考实现需求需要做什么 => 设计有哪些模块 => 整体类怎么设计 => 思考以后更改的可能，重新设计模块（扩展性） => 编写模块，思考提高代码的健壮性、可读性、有无重复代码（复用性）。
image.png

  1. 怎么去设计模块
  2. 怎么用上设计模式

    创建型

    帮助我们更优雅的创建对象。

    工厂模式

    应用场景：大量的创建对象。
    工厂模式就是写一个方法，然后你只需要调用这个方法，就能拿到你要的对象。 ```javascript

// 栗子1 function Factory(type) { switch(type) { case ‘type1’: return new Type1(); case ‘type2’: return new Type2(); case ‘type3’: return new Type3(); default: return Type(); } }

// 栗子2 jQuery (function() { let jQuery = function(selector) { // return new jQuery(); // 会发生死循环 return new jQuery.fn.init(selector); }

// 吧真正要创建的对象，放到原型链上，或者静态属性上。 // 防止直接调用时发生死循环 jQuery.fn = { init: function() {} };

window.$ = jQuery; })();

  1. <a name="VpwQ6"></a>
  2. ## 建造者模式
  3. 应用场景：精细化的构建一个类。<br />把一个复杂的类的各个部分，拆分成独立的类，然后再在最终类里组合到一块。
  4. ```javascript
  5. // 栗子1
  7. // 模块1
  8. function Model1() {}
  9. // 模块2
  10. function Model2() {}
  12. // 最终的使用类
  13. function Final() {
  14.     this.model1 = new Model1();
  15.   this.model2 = new Model2();
  16. }
  18. // 栗子2 vue2源码
  19. function Vue(optins) {
  20.     if (!(this instanceof Vue)) {
  21.       warn(`Vue is a constructor and shuld be called with the 'new' keyword`);
  22.   } else {
  23.       this._init(options);
  24.   }
  25. }
  27. // 代码组合 mixin
  28. initMixin(Vue); // 初始化混合
  29. stateMixin(Vue); // 状态混合
  30. eventsMixin(Vue); // 时间系统混合
  31. lifecycleMixin(Vue); // 生命周期混合
  32. renderMixin(Vue); // 渲染系统混合

单例模式

保证一个类全局只有一个实例化对象。
应用场景：

  • 路由
  • vuex
  • redux ```javascript

// 栗子1 function class1() { if (class1.instance) { return class1.instance; } else { this.a = 1; // class1.instance = new class1(); class1.instance = this; } }

class1.instance = null;

// 栗子2 - vue-router let _vue;

function install(vue) { if (install.installed && _vue === vue) { return; }

install.installed = true; _vue = vue; }

// 在 vue.use 中调用 vue.use();

  1. <a name="UuqBx"></a>
  2. # 结构型
  3. 帮助我们优雅的设计代码结构。
  4. <a name="mZTv7"></a>
  5. ## 策略模式
  6. 优化if-else分支<br />新建一个策略对象，将判断分支当成一个一个的策略。
  7. <a name="VmLU0"></a>
  8. ## 状态模式
  9. 当if-else分支过多时。<br />封装状态。
  10. ```javascript
  12. function moveDiv() {
  13.     this.status = [];
  14.   this.strage = {
  15.       top: function() {},
  16.     left: function() {},
  17.     right: function() {},
  18.     bottom: function() {},
  19.   };
  20. }
  22. moveDiv.prototype.run = function() {
  23.     this.status = Array.prototype.slice.call(arguments);
  24.   this.status.forEach(action => {
  25.       this.strage[action]();
  26.   });
  27. };
  29. let moveObj = new moveDiv();
  30. moveObj.run('left'); // status == ['left']
  31. moveObj.run('left', 'top'); // status == ['left', 'top']

行为型

模块之间行为模式的总结，帮助我们组织模块的行为。

观察者模式

目的：减少对象间的耦合，提高扩展性。
场景：当两个模块直接沟通会增加他们的耦合性时，不好直接调用，这时使用观察者模式解耦。
栗子：

  1. 点击事件
  2. 异步模块 ```javascript

// function observe() { this.message = {}; }

observe.prototype.regist = function(type, fn) { this.message[type] = fn; };

observe.prototype.fire = function(type) { this.messagetype; };

// 转盘 // 初始化HTML模块，转动控制，转动动画，结果模块 let _domArr = []; let _observe = new observe();

// 初始化HTML function htmlInit() { for (let i = 0; i < 10; i++) { let _div = document.createElement(‘div’); _div.setAttribute(‘class’, ‘item’); _domArr.push(_div); } }

// 转动动画 // moveConfig: { moveTime: 0, speed: 1000, } function move(moveConfig) { let nowIn = 0; let removeNum = 9; let timer = setInterval(() => { if (nowIn !== 0) { removeNum = nowIn - 1 }

  1. _domArr[removeNum].setAttribute('class', 'item');
  2. _domArr[nowIn].setAttribute('class', 'item item-on');
  3. nowIn++;
  4. if (nowIn === moveConfig.moveTime) {
  5.     clearInterval(timer);
  6.   _observe.fire('finish');
  7. }

}, moveConfig.speed); }

// 转动控制 function moveController() { let final = getFinal(); let _circle = Math.floor(final / 10, 0); let _runCircle = 0; let stopNum = final % 10; let _speed = 200;

move({ moveTime: 10, speed: _speed, });

object.regist(‘finish’, function() { let _time = 0; _speed -= 50; if (_runCircle <= _circle) { _time = 10; } else { _time = stopNum; }

  1. move({
  2.     moveTime: _time,
  3.   speed: _speed,
  4. });

}); }

// 结果模块 function getFinal() { let _num = Math.random() * 10 + 40; return Math.floor(_num, 0); }

  1. <a name="WPeFM"></a>
  2. # 技巧型
  3. 帮助我们优化代码的技巧。
  4. <a name="5ANTz"></a>
  5. ## 装饰者模式
  6. 目的：不重写方法的扩展方法。<br />场景：当一个方法需要扩展，按时又不能修改原方法。<br />三步走：提取原方法，调用原方法，加入新方法。<br />在不入侵老代码的前提下，修改老代码的实现。<br />栗子：
  8. 1. 代码是以前的老代码。
  9. 1. 要修改的方法是第三方库的方法。
  10. 1. 方法时原生方法。
  11. ```javascript
  13. // dom 绑定的事件，只有操作，没有提示。
  14. function decorator(dom, fn) {
  15.     if (typeof dom.onclick === 'function') {
  16.       let _old = dom.onclick;
  17.     dom.onclick = function() {
  18.         _old.call(this);
  19.       fn.call(this);
  20.     }
  21.   }
  22. }
  24. // 为删除按钮扩展新方法
  25. decorator(deleteDom, function() {
  26.     alert('删除成功！');
  27. });
  30. // vue -----------------------
  31. // 数组的改变触发渲染
  32. let arr = ['push', 'pop', 'shift'];
  33. let arrayPrototype = Array.prototype;
  34. let arrayCopy = Object.create(arrayPrototype);
  36. arr.forEach(methods => {
  37.     arrayCopy[methods] = function() {
  38.       let _old = arrayPrototype[methods];
  39.     _old.apply(this, argumennts);
  40.         // Vue 中触发数据绑定
  41.     dep.notify(); 
  42.   }
  43. });

享元模式

把不同部分作为一个享元提取。
目的：减少对象/代码数量
场景：当代码中创建了大量类似对象和类似的代码块

  2. $.extend({a: 1});
  3. $.extend({a: 1}, {b: 2});
  5. // 普通实现，有重复代码
  6. $.extend = function() {
  7.     if (arguments.length === 1) {
  8.       for (let item in arguments[0]) {
  9.         this[item] = arguments[0][item];
  10.     }
  11.   } else if (arguments.length === 2) {
  12.       for (let item in arguments[1]) {
  13.         arguments[0][item] = arguments[1][item];
  14.     }
  15.   }
  16. }
  18. // 享元模式
  19. $.extend = function() {
  20.     let source = arguments[0];
  21.   let target = this;
  23.   if (arguments.length === 2) {
  24.       source = arguments[1];
  25.     target = arguments[0];
  26.   }
  28.   for (let item in source) {
  29.       target[item] = source[item];
  30.   }
  31. }