Please enable JavaScript.

Coggle requires JavaScript to display documents.

js设计模式 (面对对象 (三要素 (继承 (子类继承父类 (父类是公共的，不仅仅服务于某个子类, 继承可将公共方法抽离出来，提高复用，减少冗余))…

- - - - 子类继承父类
        
        父类是公共的，不仅仅服务于某个子类
        
        继承可将公共方法抽离出来，提高复用，减少冗余
    - - 减少耦合，保证数据的权限和保密
        
        public 完全开放
        
        protected对子类开放
        
        private对自己开放
        
        es6不支持，ts支持
    - - 统一接口不同实现
        
        保持子类的开放性和灵活性
        
        面向接口编程
        
        js运用极少，红书里面好像主要是用嵌套函数和闭包来实现。
- - - - 一个程序只做好一件事
      - 如果功能过于复杂就拆分开，每个部分保持独立
    - - 对拓展开放，对修改封闭
      - 增加需求时，扩展新代码，而非修改已有代码
      - 软件设计的终极目标
    - - 子类能覆盖父类
      - 父类能出现的地方子类就能出现
      - js中使用较少(弱类型+继承使用较少)
    - - 保持接口的单一独立，避免出现"胖接口"
      - js中没有接口(ts例外),使用较少
      - 类似于单一职责原则，这里更关注接口
    - - 面向接口编程，依赖于抽象而不依赖与具体
      - 使用方只关注接口而不关注具体类的实现
      - js中使用较少(没有接口+弱类型)
- - - - 特点：1.将new操作单独封装。遇到new的时候就要考虑
      - 场景：jq$,react的createElement.
      - 设计原则:构造函数和创建者分离，符合开放封闭原则
    - - 特点：系统中被唯一使用，一个类只有一个实例
      - 示例：登录框，购物车,vuex,redux中的store
      - 设计原则：符合单一职责原则，只实例化唯一的对象，不违反封闭开放原则
  - - - 介绍:旧接口使用格式和使用者不兼容，中间加一个适配转换接口
      - 使用场景。可以自己封装ajax，mobx中的computed
    - - 作用：为对象添加新功能，不改变其原有的结构和功能
      - 比喻：像手机有手机壳
      - 设计原则验证
        
        将现有对象和装饰器进行分离，两者独立存在
        
        符合开放封闭原则
    - - 使用者无权访问目标对象，中间加代理，通过代理做授权和控制
      - 比喻:内网代理，明星经纪人
      - 场景：1.网页事件代理。2.jQuery$.proxy3. ES6 Proxy
      - 设计原则验证：代理类和目标类分离，隔离开目标类和使用类，符合开放封闭原则
    - - 介绍：为子系统中的一组接口提供了一个高层接口，使用者使用这个高层接口
      - 示例：去医院看病，接待员负责挂号等
      - 比如代码中，有些函数可以传入三个参数也可以传入四个参数
      - 设计原则：不符合单一职责和开放封闭原则，因此谨慎使用，不可滥用
    - - 桥接模式
      - 组合模式
      - 享元模式
    - - 适配器模式vs 代理模式
        
        适配器模式：提供一个不同的接口（有权使用目标类，但是不是想要的目标类，所以要进行装换，如不同版本的插头)
        
        代理模式：提供一模一样的接口（无权使用目标类,但是想得到跟使用目标类一样的效果)
      - 装饰器模式 vs 代理模式
        
        装饰器模式：扩展功能，原有功能不变且可直接使用的
        
        代理模式：显示原有能力，但是经过限制或者阉割之后的
  - - - 介绍：发布订阅；一对多
      - 常用场景：1.点击事件，同一个div绑定多个点击事件。2. node中的文件读取3.$的点击事件
      - 其他场景：node.js处理http请求：多进程通讯
      - 设计原则：主题与观察者分离，不是主动触发而是被动监听，两者解耦；符合开放封闭原则
    - - 介绍：顺序反问一个集合；使用者无序知道集合的内部结构(封装)
      - 作用：把数组包装一下，变成迭代器
      - iterator为何存在？
        
        ES6语法中，有序集合的数据类型已经有很多，Array Map,Set String,TypedArray arguments NodeList,所以需要一个统一的遍历接口来遍历所有数据类型（object不是有序集合，可以用Map代替)
        
        以上数据类型都有[Symbol.iterator]属性
        
        属性值是函数，执行函数返回一个迭代器，这个迭代器就有next方法可顺序迭代子元素，可运行Array.prototype[Symbol.iterator]来测试
        
        Iterator可以遍历Generator
        
        设计原则：迭代器对象与目标对象分离；迭代器将使用者与目标对象隔离开；符合开放封闭原则
    - - 策略模式
        
        处理大量if...else
      - 模板方法模式
      - 职责连模式
      - 命令模式
      - 备忘录模式
      - 状态模式
      - 访问者模式
      - 解释器模式
    - - 介绍：一个对象有状态变化；每次状态变化都会触发一个逻辑；不能总是用if...else
      - 总结：将状态和主体进行分离
      - 场景：有限状态机，promise
        
        有限状态机表示比如红黄绿灯之类的状态有限的机器，可以把状态和主体分离
      - 设计原则：将状态对象和主题对象分离，状态的变化逻辑单独处理；符合开放封闭原则