实体展现(系统本身)
工具(设计模式)
基础(组织模块, 设计沟通, 代码质量)
设计模式
- 创建型(创建元素)
- 工厂: 生产同类型商品
- 建造者: 独立生产商品
- 单例: vue-router
- 结构型(代码结构)
- 适配器: 适配已有方案
- 装饰器: 增强已有方案
- 代理模式: 集约流程
- 行为型(模块行为总结)
- 命令: 包裹传递命令
- 模板: 重编排, 易拓展
- 观察者: 模块间实时互通
- 职责链: 单向链执行
行为型(模块行为总结)
// 行为型
// 不同的对象之间划分责任和算法的抽象化
// 命令模式
// 请求以命令的形式包裹在对象中, 并传给调用对象
// 对于游戏角色的控制
// 接受者
class Receiver {
execute() {
console.log('角色开始奔跑');
}
}
//触发者
class Operator {
constructor(command) {
this.command = command
}
run() {
console.log('请给我爬');
this.command.execute()
}
}
// 指令器
class Command {
constructor(receiver) {
this.receiver = receiver
}
execute() {
console.log('执行命令');
this.receiver.execute()
}
}
const soldier = new Receiver()
const order = new Command(soldier)
const player = new Operator(order)
player.run()
// 模板模式
// 在模板中, 定义好每个方法的执行步骤. 方法本身关注于自己的事情
// 想要成功吃个鸡, 大概分几步
class Device {
constructor(executePipeLine) {
// executePipeLine-
}
powerOn() {
console.log('打开电源');
}
login() {
console.log('登录账号');
}
clickIcon() {
console.log('点击开始游戏');
}
enterGame() {
console.log('进入战场');
}
play() {
this.powerOn()
this.login()
this.clickIcon()
this.enterGame()
}
}
// 观察者模式
// 当一个属性发生状态改变时, 观察者会连续引发所有的相关状态改变
// 通过智能家居一键开始游戏
class MediaCenter {
constructor() {
this.state = ''
this.observers = []
}
attach(observer) {
this.observers.push(observer)
}
getState() {
return this.state
}
setState(state) {
this.state = state
this.notifyAllobservers()
}
notifyAllobservers() {
this.observers.forEach(ob => {
ob.update()
})
}
}
class Observer {
constructor(name, center) {
this.name = name
this.center = center
this.center.attach(this)
}
update() {
console.log(`${this.name} update, state: ${this.center.getState()}`);
}
}
const center = new MediaCenter()
const ps = new Observer('ps', center)
const tv = new Observer('tv', center)
center.setState('on')
// 职责链
// 1. 链式调用 2. 职责独立 3. 顺序执行
// 成年高质量男性向打个游戏, 在家里需要过几关
class Action {
constructor(name) {
this.name = name
this.nextAction = null
}
setNextAction(action) {
this.nextAction = action
}
handle() {
console.log(`${this.name}请审批, 是否可以打游戏`);
if(this.nextAction !== null) {
this.nextAction.handle()
}
}
}
const dad = new Action('ba')
const mom = new Action('ma')
const wife = new Action('bapo')
dad.setNextAction(mom)
mom.setNextAction(wife)
dad.handle()
// 模式场景
// 发出指令, 中间层传递命令本身, 命令中包含执行对象 - 命令模式
// 通过模板定义执行顺序, 做独立操作 - 模板模式
// 通过观察者, 可以让被观察值统一发生变化, 触发相应依赖值的统一更新 - 观察者模式
// 独立职责的单元通过链式执行, 逐步操作流程 - 职责链
// 实际应用
// 1. 提交表单进行表单逐行校验, 链式调用validate, 以此执行 => 职责链
// 2. echart准备工作: canvas, config, init, draw(). 规划顺序执行 => 模板模式
// 3. 调度器在接收到一组新的数据时候, 解析数据, 并且根据数据类型包裹在对象中传递到下级helper, helper
// 再去执行相应操作 => 命令模式
// 4. 输入框输入的值去判断下拉框显示与否 => 观察input设置show => 观察者模式
结构型(代码结构)
// 结构型
// 功能: 优化结构的实现方式
// 适配器模式 - adapter
// 适配独立模块, 保证模块间的独立解耦且连接兼容
// 需求: 买了一个港行PS, 插座是国标
//
class HKDevice {
getPlug() {
return '港行双圆柱插头'
}
}
class Target {
constructor() {
this.plug = new HKDevice()
}
getPlug() {
return this.plug.getPlug() + '港行双圆柱转换器'
}
}
const target = new Target()
target.getPlug()
// 装饰器模式
// 动态将责任附加到对象上
// 设备升级
class Device {
create() {
console.log('PlayStation4');
}
}
class Phone {
create() {
console.log('iphone18');
}
}
class Decorator {
constructor(device) {
this.device = device
}
create() {
this.device.create()
this.update(this.device)
}
update() {
console.log(this.device + 'pro');
}
}
const device = new Device()
device.create()
const newDevice = new Decorator(device)
newDevice.create()
// 代理模式
// 使用代理人来替代原始对象
// 游戏防沉迷
class Game {
play() {
return 'playing'
}
}
class Player {
constructor(age) {
this.age = age
}
}
class GameProxy {
constructor(player) {
this.player = player
}
play() {
return (this.player.age < 16) ? 'too young to play' : new Game().play()
}
}
const player = new Player(18)
const game = new GameProxy(player)
game.play()
// 模式场景
// 中间转换参数, 保持模块间独立的时候 - 适配器模式
// 附着于多个组件上, 批量动态赋予功能的时候 - 装饰器模式
// 将代理对象与调用对象分离, 不直接调用目标对象 - 代理模式
// 实际应用
// 1. 两个模块: 筛选器和表格, 需要做一个联动. 但筛选器的数据不能直接传入表格, 需要做数据结构转换
// => 模块之间独立, 需要做数据结构转换 => 适配器
// 2. 目前有按钮, title, icon 三个组件. 希望开发一个模块, 让三个组件同时具备相同功能 => 套一层装甲
// 有统一的能力提升, 且可以动态添加功能进行拓展 => 装饰器
// 3. ul中多个li, 每个li上的点击事件 => 利用冒泡做委托, 事件绑定在ul上 => 代理
创建型(创建元素)
// 元素创建型
// 功能: 创建元素
// 目的: 规范创建步骤
//
// 工厂模式
// 隐藏创建过程, 暴露共同接口
// 需求: 游戏商店里下载初始化游戏, 并且可以运行游戏
class Stop {
create(name) {
return new Game(name)
}
}
class Game {
constructor(name) {
this.name = name
}
init() {
console.log('init')
}
run() {
console.log('run')
}
}
const show = new Shop()
const pubg = new Game('pubg')
pubg.init()
pubg.run()
// 创建商品时,快速生产了游戏
// 建造者
// 拆分简单模块, 独立执行 => 注重过程与搭配
// 需求: 优惠套餐单元, 商品 + 皮肤 进行打折售卖
//
class Product {
constructor(name) {
this.name = name
}
init() {
console.log('Product init')
}
}
class Skin {
constructor(name) {
this.name = name
}
init() {
console.log('Skin init')
}
}
class Shop {
constructor() {
this.package = ''
}
create(name) {
this.package = new PackageBuilder(name)
}
getGamePackage() {
return this.package.getPackage()
}
}
class PackageBuilder {
constructor(name) {
this.game = new Product(name)
this.skin = new Skin(name)
}
getPackage() {
return this.game.init() + this.skin.init()
}
}
// 每个模块独立解耦, 而建造者负责创建串联正题系统
// 单例模式
// 全局只有一个实例
class PlayStation {
constructor() {
this.state = 'off'
}
play() {
if (this.state === 'on') {
console.log('别闹, 已经在happy了')
return
}
this.state = 'on'
console.log('开始happy')
}
shutdown() {
if (this.state === 'off') {
console.log('已经关闭')
return
}
this.state = 'off'
console.log('=已经关机, 请放心')
}
// static getInstance() {
// return (() => {
// if (PlayStation.instance) {
// PlayStation.instance = new PlayStation()
// }
// return PlayStation.instance
// })()
// }
}
// main.js
PlayStation.instance = undefined
PlayStation.getInstance = () => {
return (() => {
if (PlayStation.instance) {
PlayStation.instance = new PlayStation()
}
return PlayStation.instance
})()
}
const ps1 = PlayStation.getInstance()
ps1.play()
const ps2 = PlayStation.getInstance()
ps2.shutdown()
// 全局只要一个实例, 不能乱
// 模式场景
// 1. 批量生产同类型应用来满足频繁使用同一种类型需求时 - 工厂模式
// 2. 当我们需要模块拆分一个大模块, 同时使模块间独立解耦分工 - 建造者模式
// 3. 全局只需要一个实例, 注重统一一体化 - 单例
// 实际应用
// Button Producer: 生产不同类型的按钮 => 生产多个本质相同, 利用传参区分不同属性的元素 => 工厂
// 全局应用 router store => 只需要一个实例 => 单例
// 页头组件Header: 包含了title, button, breadcum => 生产多重不同类型的元素 => 建造者