原则

很多设计模式，需要有相同的接口。如果不能确保接口相同，那么用传统的if/else和switch更合适。

工厂模式

场景

  • 规则引擎

    总结

    主要用来创建同一类对象（集合）。

  1. 简单工厂你只需要一个正确的参数，就可以获取到你所需要的对象

    1. // 根据用户的权限来渲染不同的页面
    2. let UserFactory = function(role) {
    3. function _ConstructorA() {}
    4. function _ConstructorB() {}
    5. switch (role) {
    6.  case "a":
    7.    return new _ConstructorA();
    8.    break;
    9.  case "b":
    10.    return new _ConstructorB();
    11.    break;
    12. }
    13. };
    14. let instanceA = UserFactory("a");
    15. let instanceB = UserFactory("b");

  2. 工厂方法

工厂方法我们只把它看作是一个实例化对象的工厂，它只做实例化对象这一件事情

  1. // 根据用户的权限来渲染不同的页面
  2. let UserFactory = function(role) {
  3.   if (this instanceof UserFactory) {
  4.     return new this[role]();
  5.   } else {
  6.     return new UserFactory(role);
  7.   }
  8. };
  9. UserFactory.prototype = {
  10.   _ConstructorA: function() {},
  11.   _ConstructorB: function() {}
  12. };
  13. let instanceA = UserFactory("a");
  14. let instanceB = UserFactory("b");

单例模式

场景

  • [ ] 模态框

    总结

  • 一个类只有一个实例，每次调用均获取到同一个单例

  • 线程池、全局缓存、浏览器中的 window 对象、**_登录浮窗_**、nodejs服务器等。
  • 可以用来划分命名空间，减少全局变量的数量。

  1. 闭包

    1. var single = (function() {
    2. var unique = undefined;
    3. function getInstance() {
    4.  // 如果该实例存在，则直接返回，否则就对其实例化
    5.  if (unique === undefined) {
    6.    unique = new Construct();
    7.  }
    8.  return unique;
    9. }
    10. //...
    11. return {getInstance}
    12. })();

  2. node服务器

    1. class Db {
    2. static getInstance() {
    3.  // 单例，多次实例化实例不共享的问题
    4.  if (!Db.dbInstance) {
    5.    Db.dbInstance = new Db();
    6.  }
    7.  return Db.dbInstance;
    8. }
    9. }

    策略模式

    场景

  • 权限验证 前端渣渣唠嗑一下前端中的设计模式（真实场景例子）

  • [ ] 表单验证 小程序公司信息、fd分类、cl添加

    总结

    面向对象设计的原则——单一开闭原则。
    舍弃if-else：当我们的代码中有很多个判断分支，每一个条件分支都会引起该“类”的特定行为以不同的方式作出改变。定义一些列的算法，把他们一个个封装起来。

    代理模式

    场景

  • [ ] 图片预加载：虚拟代理

  • 防抖：虚拟代理
  • 控制台懒加载：虚拟代理
  • 分页获取数据：缓存代理

  • [ ] 同一result的ajax请求：缓存代理 —— 复制fd

    总结

  • 面向对象设计的原则——单一职责原则

  • 代理对象和另一个对象（本体）实现的是同样的接口
  • 代理对象所做的不外乎节制对本体的访问
  1. 虚拟代理用于控制对那种创建开销很大的本体的访问，它会把本体的实例化推迟到有方法被调用的时候图片预加载，同步数据
  2. 缓存代理第二次执行函数的时候，传递了同样的参数，那么就直接使用缓存的结果利用arguments，作为对象的键放在闭包的cache对象中计算结果
  3. 保护代理权限控制和真正执行分开，当权限机制改动时只需改变权限代理函数权限验证

    观察者模式

    场景

  • [ ] js的事件绑定 addEventListener

    总结

    发布-订阅模式

    命令模式

  • [ ] 菜单操作

  • 撤销重做：编辑器

组合模式

  • 树形结构，文件夹、文件操作

    作用链模式

    接下来学习…