不要花里胡哨，要一套一套——设计模式(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 - 依赖导致原则

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

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

从设计到设计模式

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

  • 创建型

  • 结构型

  • 行为型

创建型模式中有三种

  • 工厂模式

    • 工厂方法模式

    • 抽象工厂模式

    • 建造者模式

  • 单例模式

  • 原型模式

结构型模式有七种

  • 适配器模式

  • 桥接模式

  • 装饰器模式

  • 组合模式

  • 代理模式

  • 享元模式

  • 外观模式

行为型模式有十一种

  • 观察者模式

  • 迭代器模式

  • 策略模式

  • 模板方法模式

  • 访问者模式

  • 职责链模式

  • 命令模式

  • 备忘录模式

  • 状态模式

  • 中介模式

  • 解释器模式

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

上一页设计模式下一页学会“套路”——设计模式（2）

最后更新于