In-depth analysis of knockout source code analysis of subscription _javascript tips

What is Knockout.js?

Knockout is a very good JavaScript library that can help you create a rich text user interface with good display and editing capabilities using only a clean and neat underlying data model. Any time your local UI content needs to be updated automatically (for example, depending on user behavior changes or external data source changes), KO can be very simple to help you achieve, and very easy to maintain.

First, the main class diagram

Ii. Categories of responsibilities

2.1, observable (general Monitoring object Class)

Internal implementation of observable (he is a function):

1. First declare a FN named observable (this can be said to be a class)

2. Add a KO unique latestvalue (latest value) property to store the parameter incoming value

3. If the native __proto__ attribute is supported, the hasOwnProperty is used to determine the existence of the attribute, and the __proto__ code is judged (in the Utils Class)

var Cansetprototype = ({__proto__: []} instanceof Array);

The Init method of the FN property of the 4.ko.subscribable initializes the observable (mainly increasing subscriptions, publishing related properties)

5.observable re-inheritance OBSERVABELFN related properties and methods (OBSERVABELFN includes observations, changes in value before and after value changes)

Define prototype for observables
var observablefn = {
' equalitycomparer ': valuesareprimitiveandequal,
Peek:function () {return this[observablelatestvalue];},
valuehasmutated:function () {this[' notifysubscribers '] ( This[observablelatestvalue]); },
valuewillmutate:function () {this[' notifysubscribers '] (this[observablelatestvalue), ' BeforeChange '};

6. Returns the implementation of the observable method (if the incoming parameter is set, no parameter is obtained)

7, this class also provides hasprototype (to determine whether the specified instance owns this property), isobservable (to determine whether the specified instance is a monitoring object), iswriteableobservable (whether it is a writable monitoring object).

2.2, Observablearray (array monitoring object Class)

1. Execute the Ko.observable method first, let the object become a controllable class (named result);

2. Then extend the FN object in Ko.observablearray (Ko.observabelarray's FN overrides the array-related operations, such as remove, push, etc.)

3. Extension of a method through extends (trackarraychanages, see more information on 2.5)

4. Returns 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 a observable array must is 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, Subscribable (subscription object class)

1. Implementation of subscription, release of the functional modules, for observable, Observablearray is essential for the base class

2. There is a subscrible method for subscribing to the change of the monitor object, and development can be used as the starting point

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 extended classes (such as observablearray.changetracking extension classes) that the extends method joins

A method of 4.extend extension that executes immediately after the monitor object registers, passing in the target (current object), options (parameters passed in the Extend call)

5.extend is the way to install the extension, and he will immediately execute the code in the extension.

2.4, extends (extended Monitoring object Class)

1.ko Default Extension Collection

2. Provide a 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 (extended monitoring object of a specific implementation)

1. This extension primarily implements monitoring of array changes, and then computes differences in arrays and triggers related subscription events

2.cacheDiffForKnownOperation: Caching of array operations for difference comparisons

3.BEFORESUBSCRIPTIONADD, Aftersubscriptionremove related subscriptions (not fully understand the role).

The above is a small series to introduce you to the in-depth analysis of knockout source code analysis of the subscription, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!