不要花里胡哨，要一套一套——设计模式(1)

本专题将会介绍当前前端需要了解的设计模式，通过理解面向对象，UML 类图的关系展现，设计原则介绍，各个模式如何使用五个方面进行讨论学习。

JS中的设计模式请访问前端需要了解的设计模式(2)

当你开始一个新项目时，你不会立即开始编码。首先必须定义项目的目的和范围，然后列出项目功能和项目说明书。在你可以编码或者你正在处理更复杂的项目之后，你应该选择最适合你项目的设计模式。

什么是设计模式

在软件工程中，设计模式是软件设计中常见问题可重用的解决方案。设计模式代表着经验丰富的软件开发人员使用的最佳实践。设计模式可以被认为是编程模板。

设计模式的目的

设计模式是为了更好的代码重用性，可读性，可靠性，可维护性。

面向对象

面向对象的三要素：

• 继承

  ——子类继承父类

  • 可将公共方法抽离出来，提高复用，减少冗余

• 封装

  ——数据的权限和保密

  • 减少耦合，不该外露的不外露

  • 利用数据接口的权限管理

  • 一般认为_开头的属性是 private

  • 通过public,protected,private三种描述变量，但是由于 js 没有这方面的规则，所以相对而言，js 实现起来更加笼统

• 多态

  ——同一接口不同实现

  • 保持子类的开放性和灵活性

  • 面向接口编程

  • JS 使用极少

为什么要使用面向对象

程序执行的几种方式：顺序，判断，循环，呈现出结构化 面向对象编程使得数据结构化 对于计算机而言，结构化的才是最简单的 编程应该 简单 & 抽象

• 抽象完才能简单

• 简单的前提是我们要抽象好

下面我们来看一下面向对象的基本使用，两个类分别封装自己的数据，通过一个类继承另一个类来实现功能

class People {
  // 父类的属性
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  // 父类定义的方法
  eat(food) {
    console.log(`${this.name} ate ${food} today.`)
  }
  drink(water) {
    console.log(`${this.name} drank ${water} today.`)
  }
}

// 子类继承父类
class Student extends People {
  constructor(name, age, number) {
    super(name, age)
    this.number = number
  }
  study(subject) {
    console.log(`My name is ${this.name}
    My student number is ${this.number}
    I learned ${subject} today.`)
  }
}

let lambda = new People('lambda', 18)
lambda.eat('rice') // lambda ate rice today.
lambda.drink('water') // lambda drank water today.

let lambda_ = new Student('lambda_', 20, 20190924)
lambda_.eat('fruit') // lambda_ ate fruit today.
lambda_.drink('coffee') // lambda_ drank coffee today.
lambda_.study('JavaScript')
/**
 * My name is lambda_
  My student number is 20190924
  I learned JavaScript today.
*/

uk9gfJ.png

UML 作图方式

ukPUrq.png

这里呈现简单的 UML 作图方式

• 通过 + 表示 public

• 通过 # 表示 protected

• 通过 - 表示 private

• 通过 方法名() 表示方法，括号内可传入参数

• 在 :后面写属性或者方法返回值类型

设计原则

何为设计

即按照哪一种思路或者标准来实现功能，功能相同，可以有不同设计方案来实现，伴随着需求增加，设计的作用才能体现出来。

通过《UNIX/LINUX 设计哲学》这本书我们来总结一下设计准则

• 小即是美

• 让每个程序只做好一件事

• 快速建立原型

• 舍弃高效率而取可移植性

• 采用纯文本来存储数据

• 充分利用软件的杠杆效应(复用)

• 使用 shell 脚本来提高杠杆效应和可移植性

• 避免强制性的用户界面

• 让每个程序都称为过滤器

小准则

• 允许用户定制环境

• 尽量使操作系统内核小而轻量化

• 使用小写字母并且尽量简写

• 沉默是金

• 各部分之和大于整体

• 寻求 90%的解决方案

SOLID 五大设计原则

• S - 单一职责原则

• O - 开放封闭原则

• L - 李氏置换原则

• I - 接口独立原则

• D - 依赖导致原则

S - 单一职责原则

• 一个程序只做好一件事

• 如果功能过于复杂就拆分开，每个部分保持独立

O - 开放封闭原则

• 对扩展开放，对修改封闭

• 增加需求时，扩展新代码，而非修改已有代码

• 这是软件设计的终极目标

L - 李氏置换原则

• 子类能覆盖父类

• 父类能出现的地方子类就能出现

I - 接口独立原则

• 保持接口的单一独立，避免出现“胖接口”

D - 依赖导致原则

• 面向接口编程，依赖于抽象而不依赖于具体

• 使用时只关注接口，而不关注具体类的实现

从设计到设计模式

总体来说设计模式分为三大类：

• 创建型

• 结构型

• 行为型

创建型模式中有三种

• 工厂模式

  • 工厂方法模式

  • 抽象工厂模式

  • 建造者模式

• 单例模式

• 原型模式

结构型模式有七种

• 适配器模式

• 桥接模式

• 装饰器模式

• 组合模式

• 代理模式

• 享元模式

• 外观模式

行为型模式有十一种

• 观察者模式

• 迭代器模式

• 策略模式

• 模板方法模式

• 访问者模式

• 职责链模式

• 命令模式

• 备忘录模式

• 状态模式

• 中介模式

• 解释器模式

不过对于前端开发人员来说，有的设计模式在平时工作中几乎用不到或者很少用到，接下来我们一起讨论几种常见的设计模式。前端需要了解的设计模式