好多年前写的笔记移动到博客上

JS设计模式

什么是面向对象

面向对象(很重要)

  1. 概念
  • 类(模板) - 对象(实例)
  • 属性&方法 - 多个实例
  1. 三要素:封装 继承 多态
  • 继承,子类继承父类
  • 封装,数据的权限和保密
    • public 完全开放
    • protected 对子类开放
    • private 对自己开放
  • 多态,同一接口不同实现
  1. 面向对象的意义
  • 数据结构化
  • 结构化的才是最简单的
  • 编程应该 简单 & 抽象

UML类图

工具

设计原则

何为设计

  • UNIX/LINUX设计哲学
  • 按照哪一种思路或者标准来实现功能
  • 功能相同,可以有不同设计方案
  • 需求增加,设计的作用才能体现出来

UNIX/LINUX设计哲学

设计准则

  • 小则是美
  • 让每个程序只做好一件事
  • 快速建立原型
  • 舍弃高效率而取可移植性
  • 采用纯文本来存储数据
  • 充分利用软件杠杆效应
  • 使用shell脚本来提高杠杆效应和可移植性
  • 避免强制性的用户界面
  • 让每个程序都称为过滤器
小准则
  • 允许用户定制环境
  • 尽量使操作系统内核小而轻量化
  • 使用小写字母并尽量简短
  • 沉默是金
  • 各部分之和大于整体
  • 寻求90%的解决方案

五大设计原则 SOLID

  • S 单一职责原则
  • O 开放封闭原则
  • L 李氏置换原则
  • I 接口独立原则
  • D 依赖导致原则

从设计到模式

  • 通过指导思想结合日常经验总结出来的模板

介绍23种设计模式

设计模式类型

  • 创建型
    • 工厂模式(工厂方法模式,抽象工厂模式,建造者模式)
    • 单例模式
    • 原型模式
  • 组合型
    • 适配器模式
    • 装饰器模式
    • 代理模式
    • 外观模式
    • 桥接模式
    • 组合模式
    • 享元模式
  • 行为型
    • 策略模式、
    • 模板方法模式
    • 观察者模式
    • 迭代器模式
    • 职责连模式
    • 命令模式
    • 备忘录模式
    • 状态模式
    • 访问者模式
    • 中介者模式
    • 解释器模式

前端常用设计模式,详细讲解

前端非常用设计模式,略讲

前端少用设计模式,介绍

工厂模式

  • 将new单独封装
  • 遇到new是,就要考虑是否使用工厂模式

单例模式

  • 系统中唯一被使用
  • 一个类只有一个实例
  • 每次获取的实例是强相等

适配器模式

  • 旧接口格式和使用者不兼容
  • 中间加一个适配转换接口

装饰器模式

  • 为对象添加新功能
  • 不改变其原有的结构和功能
  • core-descriptor 提供常用的装饰器

代理模式

  • 使用者无权访问目标对象
  • 中间加代理,通过代理做授权和控制
    • 示例
    • 科学上网
    • 明星经纪人
  • 网页事件代理
  • jQuery $.proxy
  • ES6 Proxy

外观模式

  • 为子系统中的一组提供了一个高级接口
  • 使用者使用这个高层接口
  • 外观模式不符合单一职责原则和开放封闭原则 因此谨慎使用

观察者模式

  • 发布 & 订阅
  • 一对多

迭代器模式

  • 顺序访问一个集合
  • 使用者无需知道集合的内部结构
    • 顺序遍历有序集合
    • 使用者不比知道内部结构

状态模式

  • 一个对象有状态变化
  • 每次状态该变化都会触发一个逻辑
  • 不能总是用if…else 来控制

其他设计模式

  • 原型模式
    • clone自己 生成一个新对象
    • java 默认有clone接口 不用自己实现
    • Object.reate
    • new 一个对象开销很大 所以使用原型模式
  • 桥接模式
    • 用于把抽象化与实现化解耦
    • 使得二者可以独立变化
  • 组合模式
    • 生成树形结构,表示 “整体部分” 关系
    • 让整体和部分都具有一致的操作性
      • 整体和单个节点的操作是一致的
      • 整体和单个节点的数据结构也保持一致
  • 享&元模式
    • 共享内存(主要考虑内存,而非效率)
    • 相同的数据,共享使用
    • 如 事件代理
  • 策略模式
    • 不同策略分开处理
    • 避免出现大量if…else 或者switch…case
    • 业务有大量的if else 即可用
  • 模板方法模式
    • 把分散的业务逻辑合成为一个进行调用处理
  • 职责链模式
    • 一步操作可能分位多个职责角色来完成
    • 把这些角色都分开,然后用一个链串起来
    • 将发起者和各个处理者进行隔离
  • 命令模式
    • 执行命令时,发布者和执行者分开
    • 中间加入命令对象 作为中转站
  • 备忘录模式
    • 随时记录一个对象的状态变化
    • 随时可以恢复之前的某个状态(如撤销功能)
    • 为找到JS中经典应用,除了一些工具(如编辑器)
  • 中介者模式
    • 多个对象之间通过中介者去访问
  • 访问者模式
    • 将数据操作和数据结构进行 分离
    • 使用场景不多
  • 解释器模式
    • 描述语言语法如何定义,如何解释和编译
    • 用于专业模式

设计的目的是简单,可扩展,可开放

阅读经典源码的意义

  • 实现功能方法
  • 学习设计思路
  • 刻意训练

总结