JS singleton patrón de diseño, el modo combinado, el patrón de observador, patrón de estrategia

Sobre JS se 设计模式与单例模式presentó en un blog hecho la introducción, como se detalla: patrones de diseño JS y modelo de un solo caso

---

Bueno, aquí voy a combinar algunos casos, que mi comprensión de los patrones y las combinaciones del patrón de observador:

1, el modo combinado:

• patrones de combinación se forman entre el objeto 树形estructura;
• Y los objetos de un modo de combinación de objetos básica compuesta 被一致对待;
• Sin preocuparse por los objetos tienen muchas capas, justo cuando se llama 根部进行调用;
• Una pluralidad de objetos funcionales, se ensamblan para lograr 批量执行;

Imagínese que ahora tenemos un control remoto universal, cuando nos vamos a casa, presiona el interruptor, se ejecutarán las siguientes cosas:

• Inicio, abra la puerta
• Abrir el ordenador
• Open Music

// 先准备一些需要批量执行的功能
class GoHome{
    init(){
        console.log("到家了，开门");
    }
}
class OpenComputer{
    init(){
        console.log("开电脑");
    }
}
class OpenMusic{
    init(){
        console.log("开音乐");
    }
}

// 组合器，用来组合功能
class Comb{
    constructor(){
        // 准备容器，用来防止将来组合起来的功能
        this.skills = [];
    }
    // 用来组合的功能，接收要组合的对象
    add(task){
        // 向容器中填入，将来准备批量使用的对象
        this.skills.push(task);
    }
    // 用来批量执行的功能
    action(){
        // 拿到容器中所有的对象，才能批量执行
        this.skills.forEach( val => {
            val.init();
        } );
    }
}

// 创建一个组合器
var c = new Comb();

// 提前将，将来要批量操作的对象，组合起来
c.add( new GoHome() );
c.add( new OpenComputer() );
c.add( new OpenMusic() );

// 等待何时的时机，执行组合器的启动功能
c.action();
    // 在内部，会自动执行所有已经组合起来的对象的功能

Por lo tanto, podemos resumir 组合模式的特点:

1.批量执行
2.启动一个方法，会遍历多个方法，同时执行，有点类似于递归的感觉
3.组合模式略微耗性能，但是执行方便
 目前只是一个基础组合。
 高级组合：
1.组合成树状结构，每个对象下，还会有自己的子对象
2.如果执行了父对象的某个方法，所有的子对象会跟随执行
3.组合模式一般建议使用在动态的html结构上，因为组合模式的结构和html的结构，出奇的一致
4.基本对象和组合对象被一致对待, 所以要保证基本对象(叶对象)和组合对象具有一致方法

2, el modo de observador:

• El patrón de observador también se denomina modo también llamado Observador, publicación / suscripción modelo, también propuesto por el GoF 23种软件设计模式的一种.
• observador modo 行为模式之一, que 作用es cuando se cambia el estado de un objeto, es posible notificar automáticamente a otros objetos relacionados, el estado de actualización automática del objeto o proceso (cambio de datos tema, notificar a otros individuos que realizan el objeto correspondiente, y hacer que la adecuada datos de actualización).
• Este modelo de diseño puede ser en gran medida 降低entre los módulos de programa 耦合度para facilitar 更加灵活el mantenimiento y la extensión.
• Para 观察的角度encontrar la situación correspondiente, lidiar con el problema.
• El patrón de observador contiene dos funciones:
  ① 观察者（订阅者）: actualizarán su información o de estado (los suscriptores pueden unirse o abandonar en cualquier momento);
  ② 被观察者（发布者）: Recepción de la información publicada por la editorial, con el fin de hacer los cambios correspondientes o ejecución.
• Fácil lograr una sencilla comunicación de difusión, para lograr 一对多la relación de correspondencia.
• 核心思想: Mientras el espectador está suscrito al observador evento, por lo que cuando se cambia el estado del observador, es el observador tomará la iniciativa de informar al espectador, sin preocuparse de qué hacer después del evento para conseguir el espectador, el procedimiento en sí puede ser los suscriptores de ejecución de la función de devolución de llamada.
• Implementado en un ejemplo de JavaScript:

// 我们向某dom文档订阅了点击事件，当点击发生时，他会执行我们传入的callback
element.addEventListener("click", callback, false)
element.addEventListener("click", callback, false)

• Un simple ejemplo:
  ①

// 模拟事件监听式处理事件的过程
// 需要一个观察者(班主任)，创建一个事件容器（小本本），并准备on等方法（如何操作小本本）...
function Observer(){
this.msg = {};
}
// 向小本本中添加事件，消息
Observer.prototype.on = function(type, cb){
// 判断小本本中，有没有当前传进来的这个类型
// 如何没有，走else
if(this.msg[type]){
    // 如果有，直接给第一次设置的这个数组，添加个新数据
    this.msg[type].push(cb);
}else{
    // 给他设置一个对应的属性，同时，属性值需要提前写成数组
    this.msg[type] = [cb];
}
}
Observer.prototype.emit = function(type){
// 首先判断小本本中是不是已经记录
if(this.msg[type]){
    var event = {
        type:type
    }
    // 如果已经记录了信息，那么就去执行这个消息对应的所有的处理函数
    this.msg[type].forEach(val=>{
        val.call(this,event);
    })
}
}
Observer.prototype.off = function(type, cb){
// 首先判断小本本中是不是已经记录
if(this.msg[type]){
    // 准备保存符合传参的处理函数的索引
    var i = 0;
    // 遍历，判断，当前类型对应的每一个处理函数，依次作比较
    var onoff = this.msg[type].some((val, idx)=>{
        i = idx;
        return val === cb;
    })
    // 判断是否获取到重复的函数
    if(onoff){
        // 如果有，那么就在当前的消息处理函数的队列中，删除这个函数
        this.msg[type].splice(i, 1);
    }
}
}

// 首先创建一个观察者对象
var ob = new Observer();
// 准备两个处理函数
function a(){
console.log("找来谈话");
console.log(this);
}
function b(){
console.log("叫来家长");
}

// 随便绑定一个消息，给了两个处理函数
ob.on("早恋",a);
ob.on("早恋",b);

// 模拟事件的执行
ob.emit("早恋");

// 删除一个处理函数
ob.off("早恋", b);

// 模拟事件的执行
ob.emit("早恋");

②

var obj = {
    data: {
    list: []
      },
 }
 // defineProperty 可以观察 obj对象 的list 属性的使用
  Object.defineProperty(obj, 'list', {
       get() {
          console.log('获取了list 属性');
          console.log(this.data['list']);
          return this.data['list'];
      },
   		set(val) {
                console.log('值被更改了')：

                this.data['list'] = val;
        }
   })
// 获取了list属性，那么get 方法就会被调用
console.log(obj.list);
// 设置了list属性set 方法就会被调用
obj.list = ['a', 'b'];

Nota: el contenido de la memoria el modo observador, que debe realizar en el cuadro de mensaje, por el método, la adición de la operación a realizar; emitir, liberación para realizar operaciones; fuera, realizan operaciones de borrado.

3, el modo de la estrategia:

Definir un modo de política: definir una familia de algoritmos, encapsula cada uno de ellos, y hacerlos intercambiables. Es decir: dado múltiples planes, cuando un cierto estado que ocurren en el futuro, la ejecución del programa correspondiente.

• el modo de estrategia 目的es implementar el algoritmo en uso de separado.
• A modo de programación basada en políticas de 至少由两部分composición.
  ①La primera parte es un conjunto de la clase política (variable), la clase política encapsula un algoritmo específico, y por un cálculo específico.
  ②La segunda parte es el contexto ambiental (sin cambios), Contexto aceptan la petición del cliente, la solicitud estará a cargo de una clase política. Para ello, Contexto explicar el fin de mantener una referencia a un objeto de directiva.
• Un simple ejemplo:

/*策略类*/
var test = {
    "A": function (money) {
        return money + 6;
    },
    "B": function (money) {
        return money + 4;
    },
    "C": function (money) {
        return money + 2;
    }
};
/*环境类*/
var calculateBouns = function (level, money) {
    return test[level](money);
};
console.log(calculateBouns('A', 6)); // 12
console.log(calculateBouns('B', 6)); // 10
console.log(calculateBouns('C', 6)); // 8

ventajas del modo de estrategia:

• modelo de política es un paquete completo de objetos de varios algoritmos, estos algoritmos pueden ser utilizados para una variedad de objetos, puede ser suministrado a cualquier determinación condición.
• patrón de estrategia usando una combinación de comisión y las técnicas e ideas polimórficas, puede evitar efectivamente múltiples condiciones seleccionar comunicado que el patrón de estrategia puede evitar una gran cantidad si la declaración condicional.
• patrón de estrategia se ajusta a la abierto - cerrado Principio, para hacer que el código sea más fácil de entender y extender.
• Código de modo de estrategia puede ser reutilizado.