1. Análisis de apertura
¿Qué decimos hoy en este artículo? Jejejeje. Luego reconstruimos las deficiencias en el artículo anterior y las analizamos paso a paso de una manera fácil de entender, para que todos puedan mejorar paso a paso. Menos tonterías, llega al punto. Primero revisemos el anterior
El código de pieza JS es el siguiente:
La copia del código es la siguiente:
function itemSelector (elem, opts) {
this.Elem = Elem;
this.opts = opts;
};
var isproto = itemselector.prototype;
Isproto.getElem = function () {
devolver esto.Elem;
};
Isproto.getOpts = function () {
devolver esto.opts;
};
/* Manip de datos*/
Isproto._setCurrent = function (actual) {
this.getOpts () ["Current"] = Current;
};
Isproto.getCurrentValue = function (corriente) {
devuelve this.getOpts () ["actual"];
};
/* Manip de datos*/
Isproto.init = function () {
var que = esto;
this.getOpts () ["Current"] = null; // cursor de datos
this._setItemValue (this.getOpts () ["currentText"]);
var itemSelem = that.getElem (). Find (". Content .Items");
this.getElem (). Find (". Title Div"). ON ("Click", function () {
itemselem.toggle ();
});
this.getElem (). Find (". Title Span"). ON ("Click", function () {
itemselem.toggle ();
});
$ .each (this.getOpts () ["elementos"], function (i, item) {
item ["id"] = (nueva fecha (). gettime ()). toString ();
que._render (ítem);
});
};
Isproto._setitemValue = function (valor) {
this.getElem (). Find (". Title Div"). Text (valor)
};
Isproto._render = function (item) {
var que = esto;
var itemElem = $ ("<iv> </div>")
.Text (elemento ["texto"])
.attr ("id", elemento ["id"]);
if ("0" == item ["discapacitado"]) {
itemElem.on ("hacer clic", function () {
var onChange = that.getOpts () ["cambio"];
que.getElem (). Find (". Content .Items"). Hide ();
que._setItemValue (item ["Text"]);
que._setCurrent (elemento);
OnChange && onChange (item);
})
.MouseOver (function () {
$ (esto) .AddClass ("Artículo-balance");
})
.MouseOut (function () {
$ (this) .removeclass ("item-hover");
});
}
demás{
itemelem.css ("color", "#ccc"). on ("hacer clic", function () {
que.getElem (). Find (". Content .Items"). Hide ();
que._setItemValue (item ["Text"]);
});
}
itemElem.appendTo (this.getElem (). find (". content .Items")));
};
El efecto se muestra en la figura a continuación:
a) -------- estado no operable
b) ------ Estado operable
(Ii) Abra sus ideas y reconstruya
No es difícil para usted ver por el código que se ha organizado de manera efectiva de manera orientada a objetos a través de las características de sintaxis en "JS", que es mucho mejor que el método de organización basado en procesos sueltos, pero aún encontrará muchas deficiencias.
(1) Hay demasiadas repeticiones
(2) La división de responsabilidades no está clara
(3) El proceso no está completo
Nos hemos refactorizado efectivamente en función de los puntos anteriores. Primero, necesitamos resolver los requisitos de este componente, y los puntos funcionales son los siguientes:
(1) Inicializar el componente de configuración
La copia del código es la siguiente:
$ (function () {
var itemSelector = new itemSelector ($ ("#item-selector"), {
CurrentText: "por favor elija el artículo",
elementos: [
{
Texto: "JavaScript",
Valor: "JS",
Desactivado: "1"
},
{
Texto: "CSS",
Valor: "CSS",
Desactivado: "0"
},
{
Texto: "html",
valor: "html",
Desactivado: "0"
}
]
});
itemselector.init ();
});
Este código es muy claro y no requiere ninguna modificación, pero puede extender las funciones en función de la configuración anterior, como agregar el elemento de configuración "Modo" para admitir múltiples opciones. Por ejemplo: "Modo de verificación de casilla de verificación".
Lo siguiente es completar la lógica de inicialización, como sigue:
La copia del código es la siguiente:
Isproto.init = function () {
var que = esto;
this.getOpts () ["Current"] = null; // cursor de datos
this._setItemValue (this.getOpts () ["currentText"]);
var itemSelem = that.getElem (). Find (". Content .Items");
this.getElem (). Find (". Title Div"). ON ("Click", function () {
itemselem.toggle ();
});
this.getElem (). Find (". Title Span"). ON ("Click", function () {
itemselem.toggle ();
});
$ .each (this.getOpts () ["elementos"], function (i, item) {
item ["id"] = (nueva fecha (). gettime ()). toString ();
que._render (ítem);
});
};
Este código tiene muchos problemas, responsabilidades poco claras, y la lógica de inicialización contiene implementaciones detalladas de puntos funcionales.
Continúe viendo el código de renderizado:
La copia del código es la siguiente:
Isproto._render = function (item) {
var que = esto;
var itemElem = $ ("<iv> </div>")
.Text (elemento ["texto"])
.attr ("id", elemento ["id"]);
if ("0" == item ["discapacitado"]) {
itemElem.on ("hacer clic", function () {
var onChange = that.getOpts () ["cambio"];
que.getElem (). Find (". Content .Items"). Hide ();
que._setItemValue (item ["Text"]);
que._setCurrent (elemento);
OnChange && onChange (item);
})
.MouseOver (function () {
$ (esto) .AddClass ("Artículo-balance");
})
.MouseOut (function () {
$ (this) .removeclass ("item-hover");
});
}
demás{
itemelem.css ("color", "#ccc"). on ("hacer clic", function () {
que.getElem (). Find (". Content .Items"). Hide ();
que._setItemValue (item ["Text"]);
});
}
itemElem.appendTo (this.getElem (). find (". content .Items")));
};
El problema es obvio. Se han encontrado operaciones repetibles y se deben realizar una abstracción razonable, y se ha logrado el propósito de la reutilización.
Todo el proceso de construcción incluye inicialización, representación (enlace de eventos) y métodos de operación de datos relacionados y métodos auxiliares de operaciones DOM.
Para resumir, después de una clasificación simple, debemos establecer el propósito operativo de la función y la asignación de tareas de la línea principal del proceso, cada uno de los cuales será responsable de sus propias responsabilidades.
Entonces, el propósito de nuestra reconstrucción es muy claro, ¡verdad! Es para abstragar puntos funcionales y dividir las responsabilidades con la división amigable, entonces, ¿cómo lo logramos?
El primer paso es establecer funciones de proceso: (interfaz de método)
La copia del código es la siguiente:
Isproto.init = function () {
// ¡Ponte código aquí!
};
Isproto._render = function () {
// ¡Ponte código aquí!
};
Parte 2: Establecer una interfaz de método abstracto:
La copia del código es la siguiente:
Isproto._fnitemselectordelegateHandler = function () {
// ¡Ponte código aquí!
};
Isproto._fntriggerHandler = function () {
// ¡Ponte código aquí!
};
Isproto._addorremoveclass = function () {
// ¡Ponte código aquí!
};
El tercer paso es establecer una interfaz de operación de datos:
La copia del código es la siguiente:
Isproto._setCurrent = function () {
// ¡Ponte código aquí!
};
Isproto._getCurrent = function () {
// ¡Ponte código aquí!
};
También hay algunas referencias al código fuente completo a continuación, que es solo la idea mencionada aquí.
(Iii), el código completo es para aprender, este código ha sido probado
La copia del código es la siguiente:
function itemSelector (elem, opts) {
this.Elem = Elem;
this.opts = opts;
this.Current = -1; // cursor de datos
};
var isproto = itemselector.prototype;
/* Getter API*/
Isproto.getElem = function () {
devolver esto.Elem;
};
Isproto.getOpts = function () {
devolver esto.opts;
};
Isproto._getCurrent = function () {
devolver esto. Current;
};
/* Getter API*/
/* Manip de datos*/
Isproto._setCurrent = function (actual) {
this.Current = Current;
};
Isproto._setitemtext = function (text) {
this.getElem (). Find (". Title Div"). Text (texto);
};
/* Manip de datos*/
/ * Actualización en 2015 1/31 23:38 */
Isproto._fntriggerHandler = function (índice, texto, valor) {
if (this._isDisable (valor)) {
índice = -1;
text = this.getOpts () ["currentText"];
}
this._setItemText (texto);
this._setCurrent (índice);
this.getElem (). Find (". Content .Items"). Hide ();
};
Isproto._addorremoveclass = function (elem, classname, addis) {
if (addis) {
elem.addclass (classname);
}
demás{
elem.removeclass (className);
}
};
Isproto._fnitemselectordelegateHandler = function () {
var que = esto;
this.getElem (). On ("Click", "[Data-Toggle]", function () {
that.getElem (). Find (". Content .Items"). Toggle ();
});
};
Isproto._isDisable = function (valor) {
return ("1" == valor)? verdadero: falso;
};
/ * Actualización en 2015 1/31 23:38 */
Isproto.init = function () {
var que = esto;
this._fnitemSelectordElegateHandler ();
$ .each (this.getOpts () ["elementos"], function (i, item) {
item ["índice"] = i;
que._render (ítem);
});
this._fntriggerHandler (this._getCurrent (), this.getOpts () ["currentText"], "1");
};
Isproto._render = function (item) {
var que = esto;
var itemElem = $ ("<Viv> </div>"). Text (item ["Text"]). Attr ("id", item ["index"]);
var activeClass = ("0" == item ["discapacitado"])? "Artículo-baleario": "Elemento-discapacitado-hover";
itemElem.on ("hacer clic", function () {
que._fntriggerHandler (item ["índice"], elemento ["text"], elemento ["deshabilitado"]);
})
.MouseOver (function () {
que._addorremoveclass ($ (this), activeclass, true);
})
.MouseOut (function () {
que._addorremoveclass ($ (this), activeclass, falso);
});
itemElem.appendTo (this.getElem (). find (". content .Items")));
};
(Iv), resumen final
(1) Un análisis razonable de los requisitos funcionales en una forma de pensar orientada a objetos.
(2), organice nuestra lógica de complemento de manera de clase.
(3) Reconstruir continuamente los ejemplos anteriores, ¿cómo reconstruirlo razonablemente? No se diseñe en exceso, esté a gusto. El método recomendado es combinar el diseño del proceso con un diseño de pensamiento orientado a objetos.
(4) El siguiente artículo ampliará las funciones relacionadas, como la propiedad "Modo". Cuando es "1", es compatible con el modo de control de casilla de verificación, pero ahora es solo el modo desplegable predeterminado.
Mirando mi artículo, ¿es mucho mejor que el código anterior? Los amigos deben pensar y hacer más proyectos por sí mismos e intentar hacer que su propio código sea más razonable.