Modo proxy del modo de diseño de JavaScript: realice la carga de imágenes de carga

Tabla de contenido

3. El agente virtual se da cuenta de la carga de la imagen

1. Definición

El modo proxy es proporcionar un sustituto o marcador de posición para un objeto de modo que se pueda acceder a él mediante un valor nulo.

2. Clasificación

Agente virtual: retrase la creación de algunos objetos costosos en el agente hasta que sean realmente necesarios.
Proxy de caché: Proporcione almacenamiento temporal para algunos resultados de cálculo costosos. En el siguiente cálculo, si los parámetros pasados son consistentes con los anteriores, los resultados de cálculo almacenados previamente se pueden devolver directamente.
Agente de protección: se utiliza cuando los objetos deben tener diferentes derechos de acceso.
Proxy de firewall: controle el acceso a los recursos de la red y proteja los temas de los "malos".
Agente remoto: proporciona representación local para un objeto en diferentes espacios de direcciones. En Java, el agente remoto puede ser un objeto en otra máquina virtual.
Agente de referencia inteligente: en lugar de simples punteros, realiza algunas operaciones adicionales al acceder a objetos, como contar el número de veces que se hace referencia a un objeto.
Agente de copia en escritura: generalmente se usa para copiar un objeto grande. El agente de copia en escritura retrasa el proceso de copia y solo copia el objeto cuando realmente se modifica. El agente de copia en escritura es una variante del agente virtual, y DLL (biblioteca de vínculos dinámicos en el sistema operativo) es su escenario de aplicación típico.

El modo proxy incluye muchas categorías pequeñas, las más utilizadas en el desarrollo de JavaScript son el proxy virtual y el proxy de caché.

3. El agente virtual se da cuenta de la carga de la imagen

En el desarrollo real, habrá muchos requisitos para mostrar imágenes. Cuando la velocidad de la red es baja o la imagen es grande, aparecerá un espacio en blanco. En este momento, necesitamos una carga para informar al usuario que la operación de carga está en progreso, y la pantalla real no se mostrará hasta que se complete la carga. Las imágenes mejoran la experiencia. Como se muestra abajo:

La carga de imágenes sin el modo proxy es la siguiente:

const myImage = (function () {
    const imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    const img = new Image;
    img.onload = function () {
        imgNode.src = img.src;
    }
    return {
        setSrc: function (src) {
            imgNode.src = 'loading图';
            img.src = src;
        }
    }
})();
myImage.setSrc( '真实图片' );

Utilice el modo proxy para implementar la carga de imágenes de la siguiente manera:

// 本体对象
const myImage = (function () {
    const imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
        setSrc: function (src) {
            imgNode.src = src;
        }
    }
})();
// 代理对象
const proxyImage = (function () {
    const img = new Image;
    img.onload = function () {
        myImage.setSrc(this.src);          // 加载完成后本体设为真实src
    }
    return {
        setSrc: function (src) {
            myImage.setSrc('loading图片');  // 加载前loading
            img.src = src;                 // 让新建的img加载真实图
        }
    }
})();
proxyImage.setSrc('真实显示图片');

Primero, cree un objeto de ontología común myImage, que es responsable de crear una etiqueta img en la página y proporcionar una interfaz setSrc externa, que es llamada por el mundo exterior para establecer el atributo src.
Luego introducimos el objeto proxy proxyImage, a través de este objeto proxy, antes de que la imagen se cargue realmente, aparecerá una imagen de carga de marcador de posición en la página para recordarle al usuario que la imagen se está cargando; después de que se complete la carga, configure el src local en la pantalla real imagen.

4. ¿Por qué utilizar el modo proxy?

Hemos visto que las funciones anteriores se pueden lograr incluso sin ningún modo, y la cantidad de código es menor ¿Cuál es la ventaja de usar el modo proxy?

Cuando se utiliza el modelo de agencia, está más en línea con el principio de responsabilidad única y el principio abierto-cerrado.

Principio de responsabilidad única: para una clase (que generalmente incluye objetos y funciones, etc.), debe haber solo una razón para su cambio.
Principio abierto-cerrado: Los objetos (clases, módulos, funciones, etc.) en el software deben estar abiertos para extensión, pero cerrados para modificación.

Cuando no hay modo proxy, el objeto myImage no solo es responsable de configurar src para el nodo img, sino también de mostrar la carga. Cuando nos ocupamos de una de las responsabilidades, es posible que el fuerte acoplamiento afecte la realización de las otras responsabilidades. Más tarde, si no se requiere la carga debido a ciertas circunstancias (imágenes pequeñas, velocidad rápida de Internet), debe eliminar el código relevante en MyImage, lo que viola el principio de abierto-cerrado.

Por el contrario, cuando se utiliza el modo proxy, myImage se encarga de mostrar las imágenes y proxyImage se encarga de mostrar la carga, pudiendo cambiarse individualmente sin que se afecten entre sí, de conformidad con el principio de responsabilidad única. El objeto proxy es una extensión de la carga de imágenes, y cuando no necesitamos cargarlo, solo necesitamos cambiarlo a la ontología de solicitud en lugar del objeto proxy de solicitud, que se ajusta al principio de abierto-cerrado.

Nota: Libro de referencia "Patrones de diseño de JavaScript y práctica de desarrollo"