содержание:
-
Тип создания
- Режим прототипа
-
Тип структуры
- Мостовой режим
- Комбинированный режим
- Модель наилегчайшего веса
-
Поведенческий
- Стратегический режим
- Режим шаблонного метода / режим цепочки ответственности
- Командный режим
- Режим памятки
- Посредническая модель
- Режим посетителя
- Режим переводчика
Тип создания
Режим прототипа
- клонировать себя, сгенерировать новый объект
- По умолчанию Java имеет интерфейс клонирования, поэтому вам не нужно создавать его самостоятельно.
Приложение на JS: Object.create
// Object.create 用到了原型模式的思想（虽然不是java中的clone）
// 基于一个原型创建一个对象
let prototype = {
getName: function () {
return this.first + ' ' + this.last
},
say: function () {
console.log('hello')
}
}
// 基于原型创建x
let x = Object.create(prototype)
x.first = 'A'
x.last = 'B'
console.log(x.getName())
x.say()
// 基于原型创建y
let y = Object.create(prototype)
y.first = 'C'
y.last = 'D'
console.log(y.getName())
y.say()
Тип структуры
Мостовой режим
- Используется для разделения абстракции и реализации
- Так что два могут быть изменены независимо
Сценарий:
В некоторых компаниях существует множество возможных реализаций.
Проверка принципа проектирования:
- Разделение и разъединение абстракции и реализации
- Соблюдать принцип открытого и закрытого
Комбинированный режим
- Создайте древовидную структуру, представляющую отношение "целая часть"
- Пусть все и часть работают в одном режиме.
Демонстрация: - В классическом JS-приложении такого сложного типа данных не было.
- Vnode в виртуальной DOM находится в этой форме, но тип данных простой
- Используйте JS для реализации меню, а не классического приложения, и для бизнеса
- Работа всего и отдельного узла одинакова
- Структура данных всего и отдельного узла также согласована.
Проверка принципа конструкции
- Абстрагирование работы целых и отдельных узлов
- Соблюдать принцип открытого и закрытого
Модель наилегчайшего веса
- Общая память (в основном учитывайте память, а не эффективность)
- Те же данные, совместное использование
- Классические сценарии приложений не встречаются в JS.
Подобные идеи: бесконечный раскрывающийся список, прокси-события для узлов высокого уровня, если они все привязаны<a>, накладные расходы на память слишком велики.
Проверка принципа конструкции
- Абстрагируйте одни и те же части
- Соблюдать принцип открытого и закрытого
Поведенческий
Стратегический режим
- Раздельное лечение разных стратегий
- Избегайте большого количества
if .. elseилиswitch ... case - Классические сценарии приложений, которых нет в JS
до:
class User {
constructor(type) {
this.type = type
}
buy() {
if (this.type === 'ordinary') {
console.log('普通用户购买')
} else if (this.type === 'member') {
console.log('会员用户购买')
} else if (this.type === 'vip') {
console.log('vip用户购买')
}
}
}
// test
let u1 = new User('ordinary')
u1.buy()
let u2 = new User('member')
u2.buy()
let u3 = new User('vip')
u3.buy()
после того:
class OrdinaryUser {
buy() {
console.log('普通用户购买')
}
}
class MemberUser{
buy() {
console.log('会员用户购买')
}
}
class VipUser{
buy() {
console.log('会员用户购买')
}
}
let u1 = new OrdinaryUser()
u1.buy()
let u2 = new MemberUser()
u2.buy()
let u3 = new VipUser()
u3.buy()
Проверка принципа конструкции
- Различные стратегии обрабатываются отдельно, а не смешиваются вместе.
- Соблюдать принцип открытого и закрытого
Режим шаблонного метода / режим цепочки ответственности
- Одноэтапную операцию можно разделить на несколько обязанностей и ролей для выполнения
- Отпустите эти роли и позвольте им соединиться в цепочку
- Изолируйте инициатор и каждый процессор
// 请假审批，需要组长审批， 经理审批，最后总监审批
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()
}
}
}
let a1= new Action('组长')
let a2 = new Action('经理')
let a3 = new Action('总监')
a1.setNextAction(a2)
a2.setNextAction(a3)
a1.handle()
Цепная работа в JS
- Существует множество комбинаций режима цепочки ответственности и бизнеса, и работу цепочки можно представить в JS.
- Цепная операция jQuery, цепная операция Promise.then
Проверка принципа конструкции
- Инициатор изолирован от каждого процессора
- Соблюдать принцип открытого и закрытого
Командный режим
- При выполнении команды эмитент и исполнитель разделены
- Добавьте командный объект посередине в качестве станции передачи
class Receiver {
exec() {
console.log('执行')
}
}
class Command {
constructor(receiver) {
this.receiver = receiver
}
cmd () {
console.log('触发命令')
this.receiver.exec()
}
}
class Invoker {
constructor(command) {
this.command = command
}
invoke() {
console.log('开始')
this.command.cmd()
}
}
// 士兵
let soldier = new Receiver()
// 小号手
let trumpeter = new Command(soldier)
// 将军
let general = new Invoker(trumpeter)
general.invoke()
Приложение на JS
- Операция редактора форматированного текста веб-страницы, браузер инкапсулирует командный объект
document.execCommand('bold')document.execCommand('undo')
Режим памятки
- Записывайте изменение состояния объекта в любое время
- Вы можете восстановить предыдущее состояние в любое время (например, с помощью функции отмены)
- Классических приложений в JS не обнаружено, за исключением некоторых инструментов (например, редакторов)
// 状态备忘
class Memennto {
constructor(content) {
this.content = content
}
getContent() {
return this.content
}
}
// 备忘列表
class CareTaker {
constructor() {
this.list = []
}
add(memento) {
this.list.push(memento)
}
get(index) {
return this.list[index]
}
}
// 编辑器
class Editor {
constructor() {
this.content = null
}
setContent(content) {
this.content = content
}
getContent() {
return this.content
}
saveContentToMemento() {
return new Memento(this.content)
}
getContentFromMemento(memento) {
this.content = memento.getContent()
}
}
// test
let editor = new Editor()
let careTaker = new CareTaker()
editor.setContent('111')
editor.setContent('222')
careTaker.add(editor.saveContentToMemento()) // 将当前内容备份
editor.setContent('333')
careTaker.add(editor.saveContentToMemento()) // 将当前内容备份
editor.setContent('444')
console.log(editor.getContent()) // 444
editor.getContentFromMemento(careTaker.get(1)) // 撤销
console.log(editor.getContent()) // 333
editor.getContentFromMemento(careTaker.get(0)) // 撤销
console.log(editor.getContent()) // 222
Проверка принципа конструкции
- Объекты состояния отделены и отделены от пользователей
- Соблюдать принцип открытого и закрытого
Посредническая модель
class Mediator {
constructor(a, b) {
this.a = a
this.b = b
}
setA() {
let number = this.b.number
this.a.setNumber(number * 100)
}
setB() {
let number = this.a.number
this.b.setNumber(number / 100)
}
}
class A {
constructor() {
this.number = 0
}
setNumber(num, m) {
this.number = num
if(m) {
a.setB()
}
}
}
class B {
constructor() {
this.number = 0
}
setNumber(num, m) {
this.number = num
if (m) {
m.setA()
}
}
}
// test
let a = new A()
let b = new B()
let m = new Mediator(a, b)
a.setNumber(100, m)
console.log(a.number, b.number)
b.setNumber(100, m)
console.log(a.number, b.number)
Проверка принципа конструкции
- Изолируйте связанные объекты через посредников
- Соблюдать принцип открытого и закрытого
Режим посетителя
- Раздельное управление данными и структура данных
Режим переводчика
- Опишите, как определяется грамматика языка, как интерпретировать и компилировать
- Для профессиональных сцен (вавилонский переводчик ...)
Наконец
- Подчеркните шаблон дизайна, вы должны заставить себя подражать и осваивать
- Очень полезный шаблон проектирования, выборочное использование в зависимости от бизнес-сценариев