1. Análisis de apertura
¡Hola a todos! ¿Todavía recuerdas el artículo anterior? ----- el comienzo de esta serie (JavaScript Plug-in Development Tutorial 1). Principalmente cuenta la historia de "Cómo desarrollar complementos en jQuery",
Así que hoy continuaremos nuestro viaje de desarrollo de complementos con las preguntas de ayer. Las preguntas anteriores son las siguientes:
(1) 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?
(2) Refactorizar la lógica clave de los complementos, ¿cómo organizaremos eso?
Bien, aprendamos el artículo de hoy con preguntas.
En primer lugar, no niego el "método de complemento jQuery", y en segundo lugar, necesitamos analizar el problema desde diferentes perspectivas, como "el complemento jQuery tiene las siguientes ventajas":
(1) 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.
(2), a) Evite las dependencias globales; b) Evite el daño de terceros; c) Compatible con los operadores jQuery '$' y 'jQuery'.
Entonces, ¿de qué manera organizaremos el código, que es la idea orientada a objetos (OOP)? ¿O deberíamos proceder a la idea basada en procesos? ¿O es una combinación de los dos? Jajaja, sigue mirando. . . . . .
2. Reconstruya el ejemplo de ayer
El siguiente es la parte del código fuente de la parte JS de ayer:
La copia del código es la siguiente:
(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);
Analicémoslo paso a paso:
Primero, determine las funciones de este complemento
(1), muestre la información de texto del título que establecemos.
(2) Obtener dinámicamente información de contenido a través de medios asíncronos.
¡está bien! Es fácil discutirlo si los requisitos son claros. No es difícil ver en el código anterior que la lógica está suelta y el pensamiento basado en el proceso es obvio, por lo que el primer paso es poner nuestros requisitos funcionales en
Organice de manera efectiva de forma de clase. Mire el código refactorizado de la siguiente manera:
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);
var bb = new BigBear (Elem, Opts);
bb.getElem (). Trigger ("Datos");
});
};
$ .fn.bigbear.defaults = {
Título: "Esta es una prueba simple",
URL: "data.json"
};
}) (jQuery);
función bigbear (elem, opts) {
this.Elem = Elem;
this.opts = opts;
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getElem = function () {
devolver esto.Elem;
};
bbproto.getOpts = function () {
devolver esto.opts;
};
bbproto.init = function () {
var que = esto;
this.getElem (). on ("data", function () {
that._settitle (that.getOpts () ["title"]);
$ .get (that.getOpts () ["url"], function (resultado) {
que.getElem (). Find ("Div"). Text (resultado ["Texto"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). Find ("Span"). Text (texto);
};
Jajaja, ¿hay mucho más código? De hecho, este método es observar el problema desde una perspectiva orientada a objetos, primero analizar los requisitos funcionales y luego diseñar nuestra clase. Aunque es imposible para nosotros diseñarlo muy bien a la vez.
Sin embargo, la perspectiva del problema ha cambiado, nuestro código se ha vuelto más legible y podemos mantenerlo mejor, para que nuestro propósito se pueda lograr.
La siguiente es la implementación de código fuente relevante extraída de la sección JS "Bootstrap", como se muestra a continuación:
No es difícil ver que también hay métodos de implementación similares, que mantienen la lógica principal de nuestro complemento a través de las clases.
(Iii), agregar nuevas funciones e introducir clases adicionales
Ahora la demanda ha aumentado, y debe haber algunos cambios en la experiencia, y hay un efecto de "carga" al cargar datos.
La idea de implementación puede ser así: configure el texto en la palabra "Cargar datos ..." en el área de contenido original, y luego introducir una nueva clase, como sigue:
La copia del código es la siguiente:
function overlay () {
};
var olproto = Overlay.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// No escribiré la implementación específica
De acuerdo, la capa de máscara ya está allí, ¿cómo podemos integrarla ahora? Accedemos a él en una combinación, como sigue:
La copia del código es la siguiente:
función bigbear (elem, opts) {
this.Elem = Elem;
this.opts = opts;
this.overlay = new Overlay ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getElem = function () {
devolver esto.Elem;
};
bbproto.getOpts = function () {
devolver esto.opts;
};
bbproto.init = function () {
var que = esto;
var LoadingText = "Carga de datos ...";
this.getElem (). on ("data", function () {
that._settitle (that.getOpts () ["title"]);
que.overlay.show ();
que.getElem (). Find ("Div"). Text (LoadingText);
$ .get (that.getOpts () ["url"], function (resultado) {
que.overlay.hide ();
que.getElem (). Find ("Div"). Text (resultado ["Texto"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). Find ("Span"). Text (texto);
};
Esto es solo para el final de nuestras funciones. Creo que el complemento escrito de esta manera es mucho mejor que la primera versión. Por supuesto, esta no es la implementación óptima y debe refactorarse constantemente de los detalles, pero este método es una forma opcional de desarrollar complementos.
Aquí está el código completo:
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);
var bb = new BigBear (Elem, Opts);
bb.getElem (). Trigger ("Datos");
});
};
$ .fn.bigbear.defaults = {
Título: "Esta es una prueba simple",
URL: "data.json"
};
}) (jQuery);
función bigbear (elem, opts) {
this.Elem = Elem;
this.opts = opts;
this.overlay = new Overlay ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getElem = function () {
devolver esto.Elem;
};
bbproto.getOpts = function () {
devolver esto.opts;
};
bbproto.init = function () {
var que = esto;
var LoadingText = "Carga de datos ...";
this.getElem (). on ("data", function () {
that._settitle (that.getOpts () ["title"]);
que.overlay.show ();
que.getElem (). Find ("Div"). Text (LoadingText);
$ .get (that.getOpts () ["url"], function (resultado) {
que.overlay.hide ();
que.getElem (). Find ("Div"). Text (resultado ["Texto"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). Find ("Span"). Text (texto);
};
function overlay () {
};
var olproto = Overlay.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// No escribiré la implementación específica
Este artículo ha terminado por ahora. ¿Tiene una nueva comprensión del desarrollo de complementos de JavaScript?