1. Análisis de apertura
¡Hola a todos! La serie de artículos de hoy habla principalmente sobre cómo desarrollar el desarrollo de complementos basado en "JavaScript". Creo que muchas personas no están familiarizadas con la palabra "complemento".
Algunas personas pueden llamarlo "componente" o "componente", lo cual no es importante. La clave es observar cómo diseñar y cómo hacer una consideración integral. Este es el concepto en el que se centra este artículo. Creo que todos tienen razón
Tengo una cierta comprensión del "método de complemento jQuery". Lo discutiremos juntos según este tema y finalmente daremos planes de implementación relevantes para mejorar continuamente nuestra capacidad.
2. Ingrese el tema del complemento
En términos generales, el desarrollo de los complementos jQuery se divide en dos tipos: uno es una función global que cuelga bajo el espacio de nombres jQuery, que también puede llamarse un método estático.
Otro método es el método de nivel de objeto jQuery, es decir, el método colgado bajo el prototipo jQuery, de modo que las instancias de objeto jQuery obtenidas a través del selector también pueden compartir el método.
(1), desarrollo de complementos a nivel de clase
La comprensión más directa del desarrollo de complementos a nivel de clase es agregar métodos de clase a la clase "jQuery", lo que puede entenderse como agregar métodos estáticos. Un ejemplo típico es la función "$ .AJAX ()", que define la función en el espacio de nombres jQuery. Acerca de el desarrollo de complementos a nivel de clase se puede extender en los siguientes formularios:
1.1 Agregue una función global, solo necesitamos definirla de la siguiente manera y ver el código:
La copia del código es la siguiente:
$ .hello = function () {
alerta ("¡Hola, Big Bear!");
};
1.2 Agregue múltiples funciones globales, que se pueden definir de la siguiente manera:
La copia del código es la siguiente:
$ .extend ({
Hola: función (nombre) {
// Pon tu código aquí
},
World: function () {
// Pon tu código aquí
}
});
Descripción: "$ .extend (Target, [Object1], [ObjectN])" (este método se usa principalmente para fusionar el contenido (atributos) de dos o más objetos al primer objeto y devolver el primer objeto fusionado.
Si el método tiene solo un objetivo de parámetro, el parámetro extenderá el espacio de nombres de jQuery, es decir, se colgará bajo el objeto JQuery Global como un método estático).
(2), desarrollo de complementos a nivel de objeto
El desarrollo de complementos a nivel de objeto requiere dos formularios:
2.1 Monte dinámicamente los atributos relevantes a través de "$ .fn.extend ()" como prototipo.
La copia del código es la siguiente:
(función ($) {
$ .fn.extend ({
pluginName: function (opts) {
// Pon tu código aquí
}
});
}) (jQuery);
2.2 Agregue directamente atributos dinámicos a la cadena prototipo.
La copia del código es la siguiente:
(función ($) {
$ .fn.pluginname = function () {
// Pon tu código aquí
};
}) (jQuery);
Permítanme explicar: Los dos son equivalentes. Para un complemento JQuery, una función básica puede funcionar bien, pero para complementos más complejos, es necesario proporcionar varios métodos y funciones privadas.
Puede usar diferentes espacios de nombres para proporcionar varios métodos para su complemento, pero agregar demasiado espacio de nombres hará que el código sea desordenado y menos robusto. Entonces, la mejor solución es definir funciones y métodos privados de manera adecuada.
Por lo tanto, implementamos la unidad de complemento privado simulada combinando funciones de auto-ejecutación con cierres, al igual que en nuestro ejemplo anterior.
(3), damos un ejemplo simple para ver el proceso de implementación:
(1), el código de fragmento "HTML" es el siguiente:
La copia del código es la siguiente:
<div id = "bb">
<span> </span>
<Div
style = "Margin-top: 10px;
margen de fondo: 30px; "
> 8 </div>
</div>
(2), la definición de "data.json" es la siguiente:
La copia del código es la siguiente:
{
"Texto": "Hola, Big Bear {{bb}}!" ;
}
(3), el código "bb.js" es el siguiente:
La copia del código es la siguiente:
$ (function () {
$ ("#bb"). bigbear ();
});
(función ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
devuelve this.each (function () {
var elem = $ (esto);
elem.find ("span"). Text (opta ["título"]);
$ .get (opts ["url"], function (data) {
elem.find ("div"). texto (datos ["texto"]);
});
});
};
$ .fn.bigbear.defaults = {
Título: "Esta es una prueba simple",
URL: "data.json"
};
}) (jQuery);
Efecto de ejecución:
Resumamos :
(1) "$ .fn.bigbear.defaults" proporciona las opciones de parámetros predeterminadas para el complemento. Un complemento con buena extensibilidad debe permitir a los usuarios personalizar las opciones de parámetros de acuerdo con sus necesidades y controlar el comportamiento del complemento, por lo que es necesario proporcionar opciones predeterminadas restauradas. Puede establecer estas opciones a través del método de extensión de jQuery.
(2), "Devuelve this.each () {...}" atraviesa múltiples elementos y devuelve jQuery usando el motor Sizzle Selector, Sizzle puede proporcionar operaciones de elementos múltiples para sus funciones (como los mismos elementos para todos los nombres de clases). Esta es una de varias características excelentes de jQuery, e incluso si no está listo para proporcionar soporte de elementos múltiples para su complemento durante el desarrollo, prepararse para esto sigue siendo una excelente manera. Además, JQuery tiene una buena característica que puede realizar cascadas de métodos, que también se pueden llamar llamadas de cadena, por lo que no debemos destruir esta característica y siempre devolver un elemento en el método.
(Iv), resumen final
(1) JQuery ha introducido dos métodos para el complemento de desarrollo, a saber: jQuery.fn.extend (objeto); Agregue el método al objeto jQuery.
jQuery.extend (objeto); Agrega nuevos métodos a la clase para extender la clase jQuery en sí.
(2) Coloque todo el código en el cierre (una función de ejecución instantánea). En este momento, el cierre es equivalente a un alcance privado. El externo no puede acceder a información interna, y no habrá contaminación de las variables globales. Se explica la especificación de desarrollo oficial: a) Evite las dependencias globales; b) Evite el daño de terceros; c) Compatibilidad con los operadores jQuery '$' y 'jQuery'.
(3) Proporcione las opciones de parámetros predeterminadas para el complemento. Un complemento con buena extensibilidad debe permitir a los usuarios personalizar las opciones de parámetros de acuerdo con sus necesidades y controlar el comportamiento del complemento. Por lo tanto, es necesario proporcionar opciones predeterminadas restauradas. Puede establecer estas opciones a través del método de extensión de jQuery
(4), iterar a través de múltiples elementos y devolver jQuery usando el motor Sizzle Selector, Sizzle puede proporcionar operaciones de elementos múltiples para sus funciones (como elementos con el mismo nombre de clase). Esta es una de varias características excelentes de JQuery, e incluso si no está listo para proporcionar soporte de elementos múltiples para su complemento durante el proceso de desarrollo, prepararse para esto sigue siendo una buena práctica. Además, JQuery tiene una buena característica que puede realizar cascadas de métodos, que también se pueden llamar llamadas de cadena, por lo que no debemos destruir esta característica y siempre devolver un elemento en el método.
(5) Es importante colocar un código único fuera del bucle principal, pero a menudo se ignora. En pocas palabras, si tiene un código que es un montón de valores predeterminados que solo debe instanciarse una vez, en lugar de instanciar cada vez que llame a la función del complemento, debe colocar este código fuera del método del complemento.
(6) Después de aprender, pensemos en ello. Si la selección de tecnología del proyecto y el reemplazo de estos complementos, se basa en el mecanismo "jQuery", los complementos que escribimos antes no se utilizarán (suponiendo que JQuery no se use). ¿Cómo refactorizarlo?
El artículo de mañana hablará sobre este tema y refactorará la lógica clave del complemento, así que estad atentos. . .