What is Knockout.js?
Knockout is an excellent JavaScript library that helps you create a user interface rich text with good display and editing functions using just a clean and tidy underlying data model. At any time your local UI content needs to be automatically updated (for example, depending on changes in user behavior or changes in external data sources), KO can be easily implemented for you and is very easy to maintain.
1. Main category relationship diagram
II. Class Responsibilities
2.1. Observable (normal monitoring object class)
The internal implementation of observable (other is a function):
1. First declare a fn named observable (this can be said to be a class)
2. Add a ko unique latestValue property to store the value passed in by the parameter
3. If the native __proto__ attribute is supported, use hasOwnProperty to determine whether the attribute exists to inherit, and judge the __proto__ code (in the utils class)
var canSetPrototype = ({ __proto__: [] } instanceof Array);
4. The init method of the fn attribute of ko.subscribebable initializes the observable (mainly adds subscription and publishes related attributes)
5. Observable then inherits observableFn-related attributes and methods (observableFn contains the execution strategies before the value changes and after the value changes)
// Define prototype for observablesvar observableFn = {'equalityComparer': valuesArePrimitiveAndEqual,peek: function() { return this[observableLatestValue]; },valueHasMutated: function () { this['notifySubscribers'](this[observableLatestValue]); },valueWillMutate: function () { this['notifySubscribers'](this[observableLatestValue], 'beforeChange'); }};6. Return the implementation of the observable method (if the incoming parameters is set, and if there is no parameter, it is obtaining)
7. This class also provides hasPrototype (to determine whether the specified instance has this property), isObservable (to determine whether the specified instance is a monitoring object), isWriteableObservable (to determine whether it is a writable monitoring object).
2.2. ObservableArray (array monitoring object class)
1. First execute the ko.observable method to make its object a monitorable class (named result);
2. Then expand the fn object in ko.observableArray (ko.observableArray's fn rewrites the array-related operation methods, such as remove, push, etc.)
3. Extend a method through extends (trackArrayChanages, see 2.5 for details)
4. Return the extended result object.
ko.observableArray = function (initialValues) {initialValues = initialValues || [];if (typeof initialValues != 'object' || !('length' in initialValues))throw new Error("The argument passed when initializing an observable array must be an array, or null, or undefined.");var result = ko.observable(initialValues);ko.utils.setPrototypeOfOrExtend(result, ko.observableArray['fn']);return result.extend({'trackArrayChanges':true});};2.3. Subscribe (subscribe object class)
1. Functional modules for subscribing and publishing are essential base classes for observable and observableArray.
2. There is a subscrible method here, which is used to subscribe to monitoring object changes. For development, you can use this inheritance point to enter.
subscribe: function (callback, callbackTarget, event) {var self = this;event = event || defaultEvent;var boundCallback = callbackTarget ? callback.bind(callbackTarget) : callback;var subscription = new ko.subscription(self, boundCallback, function () {ko.utils.arrayRemoveItem(self._subscriptions[event], subscription);if (self.afterSubscriptionRemove)self.afterSubscriptionRemove(event);});if (self.beforeSubscriptionAdd)self.beforeSubscriptionAdd(event);if (!self._subscriptions[event])self._subscriptions[event] = [];self._subscriptions[event].push(subscription);return subscription;}3.extend: This method is used to add the extension class added by the extends method (such as the observableArray.changeTracking extension class)
4. The method of the extension of the extension will be executed immediately after the monitoring object is registered. The parameters passed are target (current object) and options (parameters passed when the extension is called)
5.extend is the method to install the extension, and it will immediately execute the code in the extension.
2.4. extends (extended monitoring object class)
1.ko's default extension collection
2. Provide an applyExtenders method to install the extension
function applyExtenders(requestedExtenders) {var target = this;if (requestedExtenders) {ko.utils.objectForEach(requestedExtenders, function(key, value) {var extenderHandler = ko.extenders[key];if (typeof extenderHandler == 'function') {target = extenderHandler(target, value) || target;}});}return target;}2.5. ObservableArray.changeTracking (a specific implementation of extended monitoring object)
1. This extension mainly implements monitoring of array changes, then calculates the differences in the array, and triggers related subscription events
2.cacheDiffForKnownOperation: cache operations on arrays for differences comparison
3. BeforeSubscriptionAdd and afterSubscriptionRemove related subscriptions (not fully understood yet).
The above is an in-depth analysis of the knockout source code analysis introduced by the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!