Análisis del patrón de diseño de JavaScript

Análisis del patrón de diseño de JavaScript

El primer origen del patrón de diseño es en realidad de la arquitectura, una solución propuesta para un problema determinado

01 Prefacio

---

Hemos escuchado mucho acerca de los patrones de diseño, pero cuando alguien pregunta qué son o qué patrones de diseño están disponibles, es posible que no sepamos o respondamos de manera incompleta. De hecho, raramente podemos usar patrones de diseño en el proceso de desarrollo, porque muchas cosas han sido encapsuladas por nosotros, podemos usarlas directamente.

El desarrollo del front-end se vuelve extremadamente fácil después de ser encapsulado nuevamente. Somos útiles en el proceso de aplicación, y solo lo veremos en el proceso de leer el código fuente. Probablemente he hojeado el libro de Patrones de diseño de JavaScript, por lo que para resumir algunos patrones comúnmente utilizados, la entrevista también puede preguntar.

02 modo de diseño

---

Modo de fábrica

Como su nombre lo indica, podemos ver literalmente que es concebible que una fábrica produzca continuamente los mismos productos y trabaje en líneas de ensamblaje. Así es, el modelo de fábrica es así.

class Person {
    constructor(name) {
        this.name = name
    }
    getName() {
        console.log(this.name)
    }
}
class Factory {
    static create(name) {
        return new Person(name)
    }
}
Factory.create('alanwu').getName()  //alanwu

Primero creamos una fábrica, simplemente pasamos los parámetros, no necesitamos preocuparnos por el proceso específico y finalmente devolvemos un objeto.

Patrón Singleton

El patrón singleton es garantizar que solo haya una instancia de una clase y proporcionar un punto de acceso global para acceder a ella. De hecho, esto es un poco como la implementación en nuestro vuex, también es una gestión de estado global y proporciona un acceso a la interfaz.

var Singleton = function (name) {
    this.name = name;
}

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

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

var a = Singleton.getInstance('alan1');
var b = Singleton.getInstance('alan2');

console.log(a===b); //true

Modo adaptador

El modo adaptador es equivalente a una interfaz de conversión. Todos piensan que nuestros cargadores de teléfonos móviles son generalmente dos horquillas, pero la fuente de alimentación es solo tres horquillas. En este momento, se necesita un adaptador para convertir la rama tres en la rama dos.

Su función es en realidad resolver el problema de la interfaz incompatible entre dos entidades de software, y puede funcionar en conjunto después de su uso.

var googleMap = {
    show: function () {
        console.log('googleMap show!');
    }
}
var baiduMap = {
    show: function () {
        console.log('baiduMap show!');
    }
}

var renderMap = function (map) {
    if (map.show instanceof Function) {
        map.show()
    }
}
renderMap(googleMap);
renderMap(baiduMap);

El programa anterior puede ejecutarse porque el mismo método de presentación utilizado por Baidu Maps y Google Maps, pero cuando no conocemos la interfaz de la función utilizada por el otro lado, no podemos usarlo de esta manera (tal vez Baidu usa el método de visualización para mostrar) . El baiduMapAdapter a continuación es el adaptador que utilizamos.

var googleMap = {
    show: function () {
        console.log('googleMap show!');
    }
}
var baiduMap = {
    display: function () {
        console.log('baiduMap show!');
    }
}

var renderMap = function (map) {
    if (map.show instanceof Function) {
        map.show()
    }
}

var baiduMapAdapter = {
    show:function(){
        return baiduMap.display()
    }
}
renderMap(googleMap);
renderMap(baiduMapAdapter);

Modo proxy

En realidad, utilizamos el modo proxy cuando estamos representando el evento. Al entregar todos los eventos de supervisión al nodo principal para la supervisión, no es necesario cambiar el código de supervisión al agregar o eliminar nodos.

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    let ul = document.querySelector('#ul')
    ul.addEventListener('click', (event) => {
        console.log(event.target);
    })
</script>

Modelo de publicación y suscripción

Este patrón se puede ver en todas partes de la vida. Por ejemplo, si se suscribe a una clase en línea, se le recordará que vaya a la clase 10 minutos antes del comienzo. Este es en realidad un modelo de publicación-suscripción. Usted se suscribe a la información del curso, pero no recibirá otra información del curso porque no tiene suscripción.

document.addEventListener('click', () => {
	console.log("You click me!");
},false)

document.addEventListener('wheel', () => {
	console.log("Your wheel!");
},false)

El primero es escuchar el evento de clic y el otro es escuchar el evento de la rueda de desplazamiento, que imprimirá contenido diferente.

Modo de estrategia

Lleve a cabo diferentes programas según la situación, por ejemplo, si desea viajar, especifique cuánto dinero tiene y luego elija el método de viaje.

• Sin dinero, camina
• Rico, avión
• OK entrenar

Aquí viene el modelo de estrategia.

var strategies = {
    "rich": function () {
        console.log("You can go with plane!");
    },
    "poor": function () {
        console.log("OH, You can go with your feet!");
    },
    "middle": function () {
        console.log("You can go with train!");
    }
}
var howShouldGo = function (money) {
    return strategies[money]();
}
console.log(howShouldGo("rich"));

Patrón de iterador

El modo iterador se refiere a proporcionar un método de acceso secuencial. Por ejemplo, el método forEach que usamos a menudo es a través del modo de acceso secuencial. Podemos escribir el método forEach por nosotros mismos.

var myForEach = function (arr, callback) {
    for (var i = 0, l = arr.length; i < l; i++) {
        callback.call(arr[i], i, arr[i]) //把元素以及下标传递出去
    }
}f

myForEach([1, 2, 3], function (item, n) {
    console.log([item, n]);
})
//[ 0, 1 ]
//[ 1, 2 ]
//[ 2, 3 ]

03 Resumen

---

De hecho, hay algunos lugares donde usamos patrones de diseño, pero no prestamos atención. Anteriormente dijimos que todos son patrones de diseño comunes, y hay muchas cosas que no hemos impresionado, como el modo de comando, el modo de peso mosca, el modo de combinación, el modo intermediario, etc.

Si está interesado, puede echar un vistazo al libro Patrones de diseño de JavaScript, que son más detallados. Probablemente lo leí nuevamente, algunos de los ejemplos anteriores también están en el libro.