前端需要了解的设计模式(1)

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

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

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

什么是设计模式

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

设计模式的目的

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

面向对象

面向对象的三要素：

  • 继承——子类继承父类
    • 可将公共方法抽离出来，提高复用，减少冗余
  • 封装——数据的权限和保密
    • 减少耦合，不该外露的不外露
    • 利用数据接口的权限管理
    • 一般认为_开头的属性是 private
    • 通过public,protected,private三种描述变量，但是由于 js 没有这方面的规则，所以相对而言，js 实现起来更加笼统
  • 多态——同一接口不同实现
    • 保持子类的开放性和灵活性
    • 面向接口编程
    • JS 使用极少

为什么要使用面向对象

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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)

‘摘抄’不是单纯的“粘贴->复制”，而是眼到，手到，心到的一字一句敲打下来。

博客声明:所有转载的文章、图片仅用于作者本人收藏学习目的，被要求或认为适当时，将标注署名与来源。若不愿某一作品被转用，请及时通知本站，本站将予以及时删除。

打赏

感谢您的支持

支付宝
微信

扫一扫，分享到微信

微信分享二维码