¿Qué es Knockout.js?
Knockout es una excelente biblioteca de JavaScript que lo ayuda a crear un texto rico en interfaz de usuario con buena visualización y funciones de edición utilizando solo un modelo de datos subyacente limpio y ordenado. En cualquier momento, su contenido de UI local debe actualizarse automáticamente (por ejemplo, dependiendo de los cambios en el comportamiento del usuario o los cambios en las fuentes de datos externas), KO se puede implementar fácilmente para usted y es muy fácil de mantener.
1. Diagrama de relación de categoría principal
II. Responsabilidades de clase
2.1. Observable (clase de objeto de monitoreo normal)
La implementación interna de observable (otro es una función):
1. Primero declare un FN llamado Observable (se puede decir que es una clase)
2. Agregue una propiedad única de Value de KO para almacenar el valor aprobado por el parámetro
3. Si es compatible con el atributo nativo __proto__, use aSownProperty para determinar si el atributo existe para heredar y juzgar el código __proto__ (en la clase Utils)
var cansetProTotype = ({__proto__: []} instancia de matriz);
4. El método init del atributo FN de Ko.SubscriteBable inicializa el observable (agrega principalmente suscripción y publica atributos relacionados)
5. Observable luego hereda los atributos y métodos relacionados con la FN observable (ObservableFn contiene las estrategias de ejecución antes de que cambie el valor y después de que cambie el valor)
// Definir prototipo para ObservableVar ObservableFn = {'IgualdadComparer': valoresePrimitiveAnDequal, Peek: function () {return this [ObservableLateStValue]; }, valueHasmutated: function () {this ['NotifySubscrips'] (this [ObservableLateStValue]); }, valueWillMutate: function () {this ['NotifySubscrips'] (this [ObservableLateStValue], 'Borforechange'); }};6. Devuelva la implementación del método observable (si se establecen los parámetros entrantes, y si no hay parámetro, se está obteniendo)
7. Esta clase también proporciona HasPrototype (para determinar si la instancia especificada tiene esta propiedad), ISOBServable (para determinar si la instancia especificada es un objeto de monitoreo), ISWRITABLEBServable (para determinar si es un objeto de monitoreo de escritura).
2.2. ObservableArray (clase de objeto de monitoreo de matriz)
1. Primero ejecute el método ko.observable para hacer de su objeto una clase monitorable (resultado llamado);
2. Luego expanda el objeto FN en ko.observableArray (Ko.observableArray's FN reescribe los métodos de operación relacionados con la matriz, como eliminar, empujar, etc.)
3. Extienda un método a través de extensiones (TrackArrayChanages, consulte 2.5 para más detalles)
4. Devuelva el objeto de resultado extendido.
ko.observableArray = function (inicialValues) {InitialValues = InitialValues || []; if (typeOf InitialValues! = 'Object' ||! ('Longitud' en InitialValues)) tire un nuevo error ("El argumento aprobado al inicializar una matriz observable debe ser una matriz, o nulo, o undefined."); Var resultado = ko.obServable (inicial); ko.utils.setProTototOtExtend (resultado, ko.observableRArtAray); ko.Utils.setProToToToFOREXTEN resultado.extend ({'TrackArrayChanges': true});};2.3. Suscríbete (suscripción clase de objeto)
1. Los módulos funcionales para suscribir y publicar son clases básicas esenciales para observables y observables.
2. Aquí hay un método suscritos, que se utiliza para suscribirse a los cambios de objetos de monitoreo. Para el desarrollo, puede usar este punto de herencia para ingresar.
Suscríbete: function (llameBack, llameBackTarget, Event) {var self = this; event = event || DefaultEvent; var boundCallback = CallbackTarget? callback.bind (CallbackTarget): Callback; var suscripción = new Ko.Subscription (self, BoundCallback, function () {ko.utils.arrayremoveItem (self._subscriptions [evento], suscripción); if (self.aftersubscriptionremove) self.AftersubscriptionRemove (event);}); if); si (self.beforesubscriptionAdd) self.beforesubscriptionAdd (evento); if (! self._subscriptions [event]) self._subscriptions [event] = []; self._subscriptions [event] .push (suscripción); return Subscription;}3.Extend: este método se utiliza para agregar la clase de extensión agregada por el método Extends (como la clase de extensión OvsemableArray.Changetracking)
4. El método de la extensión de la extensión se ejecutará inmediatamente después de registrar el objeto de monitoreo. Los parámetros pasados son objetivo (objeto actual) y opciones (parámetros pasados cuando se llama la extensión)
5.Extend es el método para instalar la extensión, y ejecutará inmediatamente el código en la extensión.
2.4. extiende (clase de objeto de monitoreo extendido)
1. Collection de extensión predeterminada de KO
2. Proporcione un método APLICEXTENTERS para instalar la extensión
function ApplicExtenders (requestExtenders) {var Target = this; if (requestExtenders) {ko.utils.ObjectForeach (requestExtenders, function (key, value) {var extenderHandler = ko.extenders [key]; if (typeOf extenderHandler == 'function') {ExtenderHandler (Target, value) || objetivo;}})2.5. Observablearray.Changetracking (una implementación específica del objeto de monitoreo extendido)
1. Esta extensión implementa principalmente el monitoreo de los cambios en la matriz, luego calcula las diferencias en la matriz y desencadena eventos de suscripción relacionados con
2.CachedifffForkNownOperation: Operaciones de caché en matrices para la comparación de diferencias
3. BefefefefefefefefefeScriptionAdd y AfterSubscriptionRemove suscripciones relacionadas (aún no se entiende completamente).
Lo anterior es un análisis en profundidad del análisis del código fuente de Knockout introducido por el editor para usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!