Angular es bueno en el marco MVVM, pero con un marco tan grande e integral, no es bajo de aprender, y llevará al menos una o dos semanas comenzar. KnockoutJS se centra en la unión de datos y se puede poner en uso en solo uno o dos días, por lo que el costo de aprendizaje no debe ser demasiado bajo. En una era en la que la evolución front-end es tan rápida, el costo de aprendizaje también es un factor que debe considerarse. Muchas veces, nuestros proyectos no son tan complicados, y no necesitan un marco universal. Necesitan herramientas simples y fáciles.
Antes de knockoutjs
Supongamos que estamos construyendo un sistema de pedido y necesitamos mostrar el precio unitario del producto, y luego podemos calcular el precio total en función de la cantidad de entrada y mostrarlo. También es fácil de lograr con el código nativo, el efecto es:
El código es el siguiente:
< document.getElementById ('cuenta'), sumnode = document.getElementById ('sum'), precio = 100, cuenta = 11, sum = precio * cuenta; // inicializar. priceNode.inntext = precio; AccountNode.Value = Account; sumnode.TextContent = Sum; // Monitor de entrada del usuario de la capa de visión AccountNode.adDeventListener ('keydown', function (e) {window.setTimeOut (function () {cuenta = accountNode.Value; Sum = Sum = Price * cuenta; sumnode.textcontent = sum;}, 10);});Bueno, ¡es bastante simple! Oh, por cierto, mostramos 50 elementos a la vez, y hay 10 tipos de pantallas, así como varias promociones, como comprar 5 cajas de Okamoto y obtener una masa frita ...
Entonces, conoce el problema de la implementación nativa:
• Con el aumento de la interacción con la interfaz de usuario y los datos, la cantidad de código ha crecido rápidamente y es difícil de mantener
• Los nombres basados en consultas DOM, ID o clase son difíciles de administrar
• Acoplamiento de código alto, difícil de reutilizar
Introducción a Knockoutjs
Knockoutjs (en adelante, como KO) parecía resolver los problemas anteriores. Es una biblioteca MVVM liviana que se centra en implementar el enlace de datos y vistas. No proporciona clases de interfaz de usuario y funciones de enrutamiento, y es muy rápido comenzar. Al mismo tiempo, desde que KO ha estado fuera durante algunos años, se ha convertido en un marco relativamente maduro. Al hacer algunas páginas que se muestran más dinámicamente, KO es, sin duda, una mejor opción. No diré mucho sobre MVVM, solo una imagen para confundir:
KO se basa en tres características principales (introducción al sitio web oficial):
1. Observables y seguimiento de dependencia: use Observables para configurar una cadena de relaciones implícitas entre los datos del modelo para la transformación de datos y la unión.
2. Vinculaciones declarativas: use una sintaxis simple y fácil de leer para unir fácilmente los datos del modelo a los elementos DOM.
3. Plantilla: motor de plantilla incorporado, escriba rápidamente presentaciones de interfaz de usuario complejas para los datos de su modelo.
Usar KO es muy simple. Simplemente descárguelo directamente al sitio web oficial (http://knockoutjs.com/index.html) y preséntelo con <script>.
Objetos observables
Reescribe el ejemplo anterior usando KO (precio personalizado, que fue uno de mis deseos de la infancia):
El código se ve así:
< = función (p, a) {// establecer como un objeto observable e inicializar esto.price = ko.observable (p); this.account = ko.observable (a); // Al llamar a la función ko, esto se aprobará. De lo contrario, cuando ejecute el código interno de ko.purecomputed, esto es ko y ko.pice () informes un error. this.sum = ko.pureComputed(function() {//Because the observable object is a function object, you need to use price() to read the current value. //Set the value using price(NewValue), and supports chain writing: this.price(12).account(3)return this.price() * this.account();}, this);};var vm = new ViewModel(135, 10); // Aplicar este enlace, y la unión comienza a surtir efecto Ko.AplyBindings (VM);1) Veamos primero el código HTML:
Puede ver que se agrega un par de valor clave como Data-Bind = "XX: OO" a cada etiqueta. Esta es la sintaxis de unión de KO. ¿Qué representa xxoo? (Xxoo? El autor sigue siendo un niño ...) Del ejemplo, podemos ver que los atributos de xx son etiquetas, que pueden ser atributos de etiqueta como texto, valor, clase, verificación, etc., y de hecho, también pueden ser clic, enfoque, carga y otros eventos DOM. OO parece una variable, pero no es una variable, sino un objeto de función. Ejecución de esta función (con A ()) puede obtener el valor límite correspondiente. A través de XXOO, los atributos o eventos de un elemento pueden estar vinculados a los objetos de función en JS (si xxoo, deben ser responsables entre sí), esta es la vinculación declarativa de Ko. La definición de vinculación es en realidad un modo observador, pero este es un enlace bidireccional. El editor y el suscriptor se suscriben a los mensajes del otro. Esta es la unión bidireccional de MVVM. El resultado de la vinculación bidireccional de KO es que una parte puede actualizar automáticamente a la otra parte cambiando, es decir, los datos y la capa de presentación están estrechamente unidos a través de ViewModel. El efecto de unión es similar a:
2) Echemos un vistazo al código JS:
Puede ver que un objeto ViewModel se define en JS, y el Oo Bound in HTML se opera en el objeto. Aquí hay dos operaciones principales: ko.observable () y ko.purecomputed ().
• Ko.observable (P): vea el nombre, este es el método para establecer objetos observables. El parámetro pasado P es el valor inicializado. Los parámetros aquí pueden ser el tipo de datos básicos o un objeto JSON. Después de ser establecido como observable, significa que el sistema observará este valor todo el tiempo. Si el P en el Modelo View o el P en los cambios de objeto vinculado causará un evento de actualización, y todos los lugares que usan este valor se actualizarán al último estado. Obviamente, los objetos observables son relativamente que requieren rendimiento, por lo que para los valores que no requieren cambios dinámicos (como los precios), no se establecen como objetos observables. Por supuesto, todavía debe colocarse en ViewModel para la inicialización centralizada.
• Nota: El objeto observable devuelto por Ko.observable (p) es un objeto de función, por lo que debe usar Price () para leer el objeto observable; Del mismo modo, establecer el objeto observable requiere que el precio (NewValue) use el precio (NewValue). Lo que es más considerado es que al configurar, admite la escritura de cadena: ViewModel.price (100) .Count (10).
• Ko.purecomputed () es el llamado seguimiento de dependencia. Aquí está el precio unitario * La cantidad es igual al precio total. Tenga en cuenta que no puede usar directamente esto.sum = this.price () * this.account (); para especificar la suma. Este método de escritura no puede actualizar dinámicamente el objeto unido, pero cambia dinámicamente la variable de suma, pero se requieren otras operaciones para actualizar el objeto unido. Por lo tanto, los valores de unión relacionados con los cálculos deben establecerse utilizando la función de cálculo de KO. Por supuesto, el objeto de función devuelto también es un objeto de función. Además, KO también tiene una función calculada, que también se puede establecer, pero se recomienda usar puro para mejorar el rendimiento.
• Preste atención al método de escritura aquí: ko.purecomputed (fn, esto), es decir, vincule FN al alcance de ViewModel, que en realidad es la llamada/aplica en JS. Debido a que este es un objeto KO al ejecutar funciones internas de KO, para obtener el alcance del objeto ViewModel, esto debe pasar al método de escritura anterior. Por supuesto, también puede usarlo para guardar el objeto ViewModel fuera de la función KO, y luego usarla dentro de la función KO para llamar al objeto ViewModel. Como esto:
var that = this; this.sum = ko.pureComputed (function () {return that.price () * that.ACCount ();});Después de definir el constructor ViewModel, se instancia un objeto ViewModel, y luego se usa el método Ko.ApplyBindings () para que la unión surja en vigencia. No te pierdas este paso.
Modo de página simple usando KO:
<!-Código HTML-> <span data-bind = "text: bindText"> </span> // js Codevar ViewModel = {bindText: ko.observable ('initValue')}; ko.applybindings (ViewModel);Para resumir, es: Use Data-bind = "xx: oo" para declarar vinculante en HTML, crear un Modelo View en JS y establecer un objeto observable y finalmente aplicar el enlace.
Matriz de objetos observable
Echemos un vistazo al uso de matrices de objetos observables. En KO, las matrices y las variables no se pueden mezclar como JS. Para los objetos de matriz, debe usar ko.observableArray ([..., ...]) de la misma manera. Del mismo modo, los elementos de matriz pueden ser de tipos básicos o objetos JSON. La matriz de objetos observable en KO tiene una serie de métodos de operación de matriz, como SLICE (), SORT (), Push (), etc. El efecto es el mismo que los métodos de operación de matriz JS nativo. La única diferencia entre los cambios realizados a través del método KO se notificará al suscriptor para actualizar la interfaz, pero el método JS no actualizará la interfaz. Aquí hay un ejemplo simple:
<!-Código HTML-> <Seleccione Data-Bind = "Opciones: List"> </select> // JS Codevar vm = {// list: ko.observableArray () list: ko.observableArray (['luffy', 'zoro', 'sanji'])}; ko.applyebindings (vm);;Punto clave: KO monitorea el estado de la matriz, no el estado del elemento mismo. Es decir, cuando el estado de la matriz cambia (agregando elementos), el evento KO se activará para que el objeto unido se actualice, pero los cambios en los elementos dentro de la matriz (como los cambios de valor) no se monitorearán y no se puede activar el evento KO. Por ejemplo:
El uso de métodos nativos para cambiar dinámicamente a Luffy a Lucy en la consola no actualizará la página de la interfaz de usuario, mientras que el uso de la matriz de KO para cambiar la matriz actualizará inmediatamente la página. Vale la pena señalar que cuando se refrescan, los cambios anteriores también se actualizarán (Luffy> Lucy). En otras palabras, las variables en la memoria JS realmente han cambiado, pero todavía hay una falta de acción para actualizar el DOM. Como puede ver aquí, el método de leer una matriz es vm.list () [0], porque la lista también es un objeto de función, y ejecutar el valor de retorno es el contenido de la lista que queremos. Del mismo modo, puede restablecer la matriz de objetos observable a través de VM.List (["Girl", "Girl"]) y actualizar la interfaz de usuario de inmediato.
Si necesita reaccionar dinámicamente los cambios de elementos de matriz a la UI, debe establecer los elementos de la matriz en objetos observables y luego usar el método de Ko para cambiar el valor del elemento de matriz. ¡Tenga en cuenta que es usar la lista de métodos de KO () [0] ("Lucy")!
Hay dos tipos de métodos para operar matrices de objetos observables. Uno es el mismo nombre que el método de matriz JS nativo: Pop, Push, Shift, Deshift, Reverse, Sort, Splice. Esta parte es la misma que el uso y los efectos del método JS nativo, por lo que no la volveré a repetir.
Algunos otros métodos no están disponibles en JS, principalmente como sigue:
• Eliminar (SomeItem): elimine todos los elementos de elementos con valores iguales a SomeItem y devuélvalos en forma de matriz. Lo que esto significa aquí es que no puede eliminar directamente la primera lista de elementos. En resumen, el parámetro aprobado debe ser el valor del elemento del elemento. Se puede usar en forma de lista () [0], o puede ingresar directamente la cadena de valor (como "Luffy").
• Eliminar (función (elemento) {return item.age <18;}) - Elimine todos los elementos de elementos con atributos de edad inferiores a 18 y devuélvalos como una matriz. Este uso no es diferente de las funciones de orden superior de matriz ordinaria. El elemento se pasa como un parámetro de una función de orden superior. Al iterar a través de la matriz, el elemento se elimina cuando el valor de retorno de la función de orden superior es el valor real, de lo contrario irá al siguiente elemento.
• RemoveAll (['Chad', 132, indefinido]): elimine todos los elementos de elementos con valores iguales a 'Chad' o 123 o indefinidos y devuélvalos como una matriz.
• RemoveAll (): elimina todos los elementos y devuelve como una matriz.
Consejos: al tratar con objetos observables, si hay muchos objetos e interacciones frecuentes, refrescarse inmediatamente con cada cambio consumirá rendimiento. En este momento, puede usar la extensión myobservablearray.extend ({ratelimit: 1000}) para establecer la actualización retrasada. Por ejemplo, al insertar continuamente elementos en la matriz observable, puede establecer un tiempo de ciclo de 1000 ms para concentrar todas las operaciones dentro de 1000 ms en una actualización para evitar el deterioro del rendimiento causado por las operaciones DOM frecuentes.
Resumir
Este artículo presenta principalmente el concepto más importante en Knockoutjs: objetos observables (matrices). Un objeto observable es esencialmente un objeto de función. Al operar objetos observables a través del método KO, la UI se puede actualizar dinámicamente. Este es el método recomendado. Al mismo tiempo, también puede operar objetos observables a través del método JS nativo, pero el método nativo no actualizará la pantalla UI, y deberá esperar hasta que el próximo evento de actualización se actualice a la UI.