Resumen de patrones de diseño de JavaScript

1. Implemente el modo singleton
let Singleton = function (name) {
this.name = name;
this.instance = null;
}

Singleton.prototype.getName = function () {
console.log (this.name)
}

Singleton.getInstance = function (name) {
if (! This.instance) {
this.instance = new Singleton (name)
}
return this.instance;
}

let a = Singeton.getInstance ('hola mundo')

En segundo lugar, la
función javascrip del modo de estrategia también es un objeto, por lo que puede definir funciones con objetos como
let
Strategies = { "type1": (salario) => {
return salario 1
},
"type2": (salary) => {
return salario
2
},
"type3": (salario) => {
return salario * 3
}
}

dejar calcular = función (nivel, salario) { nivel de
estrategias de retorno }

Tres, modelo de agencia

No es para operar en el objeto original, consulte otro objeto para operar

let fruit = function (name) {
this.name = name;
}

fruit.prototype.getName = function () {
return this.name;
}

dejar que las personas que quieran comer manzanas = {
gouBuy: (nombre) => {
console.log ('Cómprame algunas manzanas' + nombre)
}
}

let
purchase = { buyCosmetic: function (fruit) {
Quiere comer manzana people.gouBuy (fruit.getName ())
}
}

shopping.buyCosmetic (fruta nueva ('manzana'))

Cuarto, el modo iterativo
es hacer coincidir los requisitos funcionales que se cumplen a través del ciclo
ar getActiveUploadObj = function () {
try {
return new ActiveXObject ("TXFTNActiveX.FTNUpload"); // Control de carga de IE
} catch (e) {
return false;
}
};
var getFlashUploadObj = function () {
if (supportFlash ()) {// La función supportFlash no se proporciona
var str = '<object type = "application / x-shockwave-flash"> </object>';
return $ (str). appendTo ($ ('body'));
}
return false;
};
var getFormUpladObj = function () {
var str = '<input name = "file" type = "file" class = "ui-file" />'; // carga de formulario
return $ (str) .appendTo ($ ('cuerpo'));
};

Cuarto, el modelo de publicación-suscripción El modelo de
publicación-suscripción también se llama modelo de observador. Define una relación de dependencia de uno a muchos entre objetos. Cuando el estado de un objeto cambia, todos los objetos que dependen de él serán notificados. En el desarrollo de JavaScript, generalmente usamos el modelo de eventos para reemplazar el modelo tradicional de publicación-suscripción.
var event = {
clientList: [],
listen: function (key, fn) {
if (! this.clientList [key]) {
this.clientList [key] = [];
}
this.clientList [key] .push (fn ); // El mensaje suscrito se agrega a la lista de caché
},
trigger: function () {
var key = Array.prototype.shift.call (argumentos), // (1);
fns = this.clientList [key];
if ( ! fns || fns.length === 0) {// Si el mensaje correspondiente no está vinculado,
devuelva falso;
}
for (var i = 0, fn; fn = fns [i ++];) {
fn.apply (this, argumentos); // (2) // los argumentos son los parámetros traídos cuando el disparador es
}
}
};
Defina una función installEvent, que pueda instalar dinámicamente funciones de publicación-suscripción para todos los objetos:
var installEvent = function (obj) {
for (var i in event) {
obj [i] = event [i];
}
};

5. Modo de comando El modo de
comando es uno de los modos más simples y elegantes El comando en el modo de comando se refiere a
una instrucción para realizar algunas cosas específicas.
El modo comando es el escenario más común: en ocasiones es necesario enviar una solicitud a determinados objetos, pero no sabe recibir la solicitud
quién es quién, no sabe qué operación se solicitó sí. En este momento, de una manera débilmente acoplada deseable para diseñar programas, dicha solicitud se envía al
emisor y al receptor de solicitudes para eliminar el acoplamiento entre sí. P.ej

var bindClick = function (button, func) {
button.onclick = func;
};
var MenuBar = {
refresh: function () {
console.log ('Refresh menu interface');
}
};
var SubMenu = {
add: function ( ) {
console.log ('Agregar submenú');
},
del: function () {
console.log ('Eliminar submenú');
}
};
bindClick (button1, MenuBar.refresh);
bindClick (button2, SubMenu. add);
bindClick (button3, SubMenu.del); El
modo de comando es un modo invisible en el lenguaje JavaScript.

6. Modo de combinación El modo de
combinación utiliza pequeños subobjetos para construir objetos más grandes, y estos pequeños subobjetos pueden estar compuestos a su vez por
"nietos" más pequeños. Estructura en forma de árbol

Propósito: representa parte de la jerarquía general del objeto. El modo combinado puede construir fácilmente toda la parte del objeto representado por una
estructura de árbol . Especialmente cuando no estamos seguros de cuántos niveles de este árbol existen durante el desarrollo. En la mayor parte de la estructura del árbol
después de la finalización de la final, solo las solicitudes de objetos más altas a través del árbol pueden unificar la operación de todo el árbol. En el modo de combinación,
en el que agrega y elimina nodos del árbol, es muy conveniente y se ajusta al Principio Abierto Cerrado.
El cliente quiere tratar todos los objetos del árbol de manera uniforme. El modo compuesto permite a los clientes ignorar la diferencia entre objetos compuestos y objetos hoja.
Cuando se enfrentan a este árbol , los clientes no necesitan preocuparse de si el objeto que se está procesando actualmente es un objeto compuesto o un objeto hoja, por lo
que no necesitan escribir un montón de declaraciones if y else para distinguir entre ellos. Tratar con ellos. El objeto compuesto y el objeto hoja harán sus propias cosas,
que es la capacidad más importante del modelo compuesto.

Supongo que te gusta

Origin blog.51cto.com/14582569/2594371
Recomendado
Clasificación