前端 JS 设计模式之设计原则

一、设计原则概念

设计的描述，即按照哪一种思路或者是标准来实现概念。功能相同，可以有不同的设计方案来实现。伴随着需求增加，设计的作用才能体现出来。
设计的准则，如下所示：

准则一，小即是美
准则二，让每个程序只做好一件事
准则三，快速建立原型
准则四，舍弃高效率而取可移植性
准则五，采用纯文本来存储数据
准则六，充分利用软件的杠杆效应，软件复用
准则七，使用 shell 脚本来提高杠杆效应和可移植性
准则八，避免强制性的用户界面
准则九，让每个程序都称之为过滤器

设计的小准则，如下所示：

允许用户定制环境
尽量使操作系统内核小而轻量化
使用小写字母并尽量简短
沉默是金
各部分之和大于整体
寻求 90% 的解决方案

二、SOLID 五大设计原则

SOLID，S 表示单一职责原则，O 表示开放封原则，L 表示李氏置换原则，I 表示接口独立原则，D 表示依赖导致原则。
S 表示单一职责原则，一个程序只做好一件事。如果功能过于复杂就拆分开，每个部分保持独立。
O 表示开放封原则，对扩展开放，对修改封闭。增加需求时，扩展新代码，而非修改已有代码。这是软件设计的终极目标。
L 表示李氏置换原则，子类能覆盖父类，父类出现的地方子类就能出现。JS 中使用较少，弱类型和继承使用较少。
I 表示接口独立原则，保持接口的单一独立，避免出现"胖接口"。JS 中没有接口，Typescript 例外，使用较少。类似于单一职责原则，这里更关注接口。
D 表示依赖导致原则，面向接口编程，依赖于抽象而不依赖于具体。使用方法只关注接口而不关注具体类的实现。JS 中使用较少，没有接口和弱类型。
设计原则的总结，SO 体现较多，需要理解，LID 体现较少，需要了解。
用 Promise 来说明 SO，如下所示：

单一职责原则，每个 then 中的逻辑只做好一件事
开放封闭原则，如果新增需求，扩展 then
对扩展开放，对修改封闭

三、设计模式

设计模式，从设计到模式，可以理解为设计、模式、分开和从设计到模式。
23 种设计模式，分为创建型、组合型和行为型。
创建型模式，如下所示：

工厂模式，工厂方法模式，抽象工厂模式和建造者模式
单例模式
原型模式

结构型模式，如下所示：

适配器模式
装饰器模式
代理模式
外观模式
桥接模式
组合模式
享元模式

行为型模式，如下所示：

策略模式
模版方法模式
观察者模式
迭代器模式
职责连模式
命令模式
备忘录模式
状态模式
访问者模式
中介者模式
解释器模式

四、设计模式的面试题

打车时，可以打专车和快车，任何车都有车牌号和名称。不同车价格不同，快车每公里 1 元，专车每公里 2 元。行程开始时，显示车牌信息。行程结束时，显示打车金额，假定行程就 5 公里。那么问题是，画出 UML 类图，用 ES6 语法写出该示例。
解决题目的代码，如下所示：

// 车
class Car {constructor(number, name) {this.number = numberthis.name = name}
}// 快车
class Kuaiche extends Car {constructor(number, name) {super(number, name)this.price = 1}
}// 专车
class Zhuanche extends Car {constructor(number, name) {super(number, name)this.price = 2}
}// 行程
class Trip {constructor(car) {this.car = car}start() {console.log(`行程开始，名称: ${this.car.name}, 车牌号: ${this.car.price}`)}end() {console.log('行程结束，价格: ' + (this.car.price * 5))}
}// 测试
let car = new Kuaiche(100, '桑塔纳')
let trip = new Trip(car)
trip.start()
trip.end()

某停车场，分 3 层，每层 100 车位。每个车位都能监控到车辆的驶入和离开。车辆进入前，显示每层的空余车位数量。车辆进入时，摄像头可识别车牌号和时间。车辆出来时，出口显示器显示车牌号和停车时长。那么问题是，画出 UML 类图，用 ES6 语法写出该示例。
解决题目的代码，如下所示：

// 车
class Car {constructor(num) {this.num = num}
}// 入口摄像头
class Camera {shot(car) {return {num: car.num,inTime: Date.now()}}
}// 出口显示器
class Screen {show(car, inTime) {console.log('车牌号', car.num)console.log('停车时间', Date.now() - inTime)}
}// 停车场
class Park {constructor(floors) {this.floors = floors || []this.camera = new Camera()this.screen = new Screen()this.carList = {} // 存储摄像头拍摄返回的车辆信息}in(car) {// 获取摄像头的信息：号码 时间const info = this.camera.shot(car)// 停到某个车位const i = parseInt(Math.random() * 100 % 100)const place = this.floors[0].places[i]place.in()info.place = place// 记录信息this.carList[car.num] = info}out(car) {// 获取信息const info = this.carList[car.num]const place = info.placeplace.out()// 显示时间this.screen.show(car, info.inTime)// 删除信息存储delete this.carList[car.num]}emptyNum() {return this.floors.map(floor => {return `${floor.index} 层还有 ${floor.emptyPlaceNum()} 个车位`}).join('\n')}
}// 层
class Floor {constructor(index, places) {this.index = indexthis.places = places || []}emptyPlaceNum() {let num = 0this.places.forEach(p => {if (p.empty) {num = num + 1}})return num}
}// 车位
class Place {constructor() {this.empty = true}in() {this.empty = false}out() {this.empty = true}
}// 测试代码
// 初始化停车场
const floors = []
for (let i = 0; i < 3; i++) {const places = []for (let j = 0; j < 100; j++) {places[j] = new Place()}floors[i] = new Floor(i + 1, places)
}
const park = new Park(floors)// 初始化车辆
const car1 = new Car('A1')
const car2 = new Car('A2')
const car3 = new Car('A3')console.log('第一辆车进入')
console.log(park.emptyNum())
park.in(car1)
console.log('第二辆车进入')
console.log(park.emptyNum())
park.in(car2)
console.log('第一辆车离开')
park.out(car1)
console.log('第二辆车离开')
park.out(car2)console.log('第三辆车进入')
console.log(park.emptyNum())
park.in(car3)
console.log('第三辆车离开')
park.out(car3)

前端 JS 设计模式之设计原则相关推荐

设计一个矩形类rectangle_万字长文带你捋清六种设计模式的设计原则（建议收藏）...
对于设计模式,自己很早之前就看了好多本设计模式书籍,其中一些还看了好几遍,也一直希望自己能在编码的时候把这些设计模式用上去.可是,在日常的打码中,用的最多的就是单例,其次是观察者和建造者模式 ( bu ...
设计模式 - 七大设计原则（一）
设计模式 - 七大设计原则(一) 概述简单介绍一下七大设计原则: 开闭原则:是所有面向对象设计的核心,对扩展开放,对修改关闭依赖倒置原则:针对接口编程,依赖于抽象而不依赖于具体单一职责原则:一个 ...
Go设计模式(3)-设计原则
上一篇文章Go设计模式(2)-面向对象分析与设计里讲过,做设计最重要的是保留合适的扩展点.如何才能设计出合适的扩展点呢? 这篇文章会讲解一下经典的设计原则.这些设计原则大家可能都听过,但可能没有想过为 ...
【设计模式】设计原则
[设计模式]设计原则在软件开发中,为了提高软件系统的可维护性和可复用性,增加软件的可扩展性和灵活性,程序员要尽量根据6条原则来开发程序,从而提高软件开发效率.节约软件开发成本和维护成本. 1 开闭原 ...
设计模式-六大设计原则（附加实际开发建议以及计算器例子）
使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性.设计模式使代码编制真正工程化,是软件工程的基石脉络,如同大厦的结构一样. 文章结构: 1.单一职责原则(SRP): 2.里氏替换原 ...
UML类图、JAVA DesignMode 设计模式、设计原则
全文2.6W余字,读完需要20分钟,介绍23种设计模式,每个模式都有案例与真实使用场景,能够帮助初学者快速了解设计模式,建立起对代码中设计模式的初步理解,要明确:设计模式只是帮助我们更好的设计代码架构 ...
软件设计模式——软件设计原则
摘要设计模式(Design Pattern)是一套被反复使用.多数人知晓的.无数工程师实践的代码设计经验的总结,它是面向对象思想的高度提炼和模板化,使用设计模式是为了让代码具有更高的可重用性,更好的 ...
Java设计模式-七大设计原则
Java设计模式设计模式七大原则设计模式的目的编写软件过程中,程序员面临着来自耦合性,内聚性以及可维护性,可扩展性,重用性,灵活性等多方面的挑战,设计模式是为了让程序(软件),具有更好代码 ...
后端学习 - 设计模式与设计原则
文章目录设计原则 1 单一职责原则 2 开闭原则 3 Liskov 替换原则 4 依赖倒置原则 5 接口隔离原则 6 迪米特法则设计模式:创建型模式 1 工厂模式 2 抽象工厂模式 3 单例模式 ...

前端 JS 设计模式之设计原则

一、设计原则概念

二、SOLID 五大设计原则

三、设计模式

四、设计模式的面试题

前端 JS 设计模式之设计原则相关推荐

最新文章

热门文章