Tabla de contenido:
-
Tipo de creación
- Modo de prototipo
-
Tipo de estructura
- Modo Puente
- Modo de combinación
- Modelo de peso mosca
-
Conductual
- Modo de estrategia
- Modo de método de plantilla / modo de cadena de responsabilidad
- Modo de comando
- Modo de nota
- Modelo intermediario
- Modo visitante
- Modo intérprete
Tipo de creación
Modo de prototipo
- clonarse, generar un nuevo objeto
- Java tiene una interfaz de clonación de forma predeterminada, por lo que no es necesario que la implemente usted mismo.
Aplicación en 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()
Tipo de estructura
Modo Puente
- Se utiliza para desacoplar la abstracción y la realización.
- Para que los dos se puedan cambiar de forma independiente
Escenario:
hay muchas implementaciones posibles en algunas empresas.
Verificación del principio de diseño:
- Separación y desacoplamiento de abstracción e implementación
- Cumplir con el principio abierto y cerrado.
Modo de combinación
- Genere una estructura de árbol, que represente la relación "todo-parte"
- Deje que el todo y la parte tengan el mismo modo de funcionamiento.
Demostración: - En la aplicación JS clásica, no se encontró un tipo de datos tan complejo
- El vnode en el DOM virtual tiene esta forma, pero el tipo de datos es simple
- Utilice JS para implementar un menú, no una aplicación clásica, y relacionados con el negocio
- El funcionamiento del todo y de un solo nodo es el mismo
- La estructura de datos del todo y un solo nodo también es consistente
Verificación del principio de diseño
- Resumen del funcionamiento de los nodos completos e individuales.
- Cumplir con el principio abierto y cerrado.
Modelo de peso mosca
- Memoria compartida (considere principalmente la memoria, no la eficiencia)
- Mismos datos, uso compartido
- Los escenarios de aplicación clásicos no se encuentran en JS
Ideas similares: lista desplegable infinita, eventos de proxy a nodos de alto nivel, si todos están vinculados<a>, la sobrecarga de memoria es demasiado grande
Verificación del principio de diseño
- Resumen de las mismas partes
- Cumplir con el principio abierto y cerrado.
Conductual
Modo de estrategia
- Tratamiento separado de diferentes estrategias
- Evite grandes cantidades
if .. elseoswitch ... case - Escenarios de aplicación clásicos que no se encuentran en JS
Antes de:
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()
después:
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()
Verificación del principio de diseño
- Las diferentes estrategias se manejan por separado, no se mezclan
- Cumplir con el principio abierto y cerrado.
Modo de método de plantilla / modo de cadena de responsabilidad
- La operación de un solo paso se puede dividir en múltiples responsabilidades y roles para completar
- Suelta estos roles y déjalos encadenar juntos con una cadena
- Aislar el iniciador y cada procesador
// 请假审批，需要组长审批， 经理审批，最后总监审批
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()
Operación en cadena en JS
- Hay muchas combinaciones de modo de cadena de responsabilidad y negocio, y se puede pensar en la operación en cadena en JS
- Operación en cadena de jQuery, Promise.then operación en cadena
Verificación del principio de diseño
- El iniciador está aislado de cada procesador
- Cumplir con el principio abierto y cerrado.
Modo de comando
- Al ejecutar un comando, el emisor y el ejecutor se separan
- Agregue un objeto de comando en el medio como una estación de transferencia
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()
Aplicación en JS
- Operación del editor de texto enriquecido de la página web, el navegador encapsula un objeto de comando
document.execCommand('bold')document.execCommand('undo')
Modo de nota
- Registre el cambio de estado de un objeto en cualquier momento
- Puede restaurar un estado anterior en cualquier momento (como la función de deshacer)
- No se encontraron aplicaciones clásicas en JS, a excepción de algunas herramientas (como editores)
// 状态备忘
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
Verificación del principio de diseño
- Los objetos de estado están separados y desacoplados de los usuarios.
- Cumplir con el principio abierto y cerrado.
Modelo intermediario
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)
Verificación del principio de diseño
- Aislar objetos relacionados a través de intermediarios
- Cumplir con el principio abierto y cerrado.
Modo visitante
- Manipulación de datos y estructura de datos independientes
Modo intérprete
- Describir cómo se define la gramática del lenguaje, cómo interpretar y compilar.
- Para escenas profesionales (intérprete de babel ...)
Por fin
- Enfatice el patrón de diseño, debe obligarse a imitar y dominar
- Patrón de diseño muy útil, uso selectivo según escenarios comerciales