Knockout.js Source Analysis

Source: Internet
Author: User
Tags closure documentation

Brief introduction

This article mainly to the source code and internal mechanism to do a deeper analysis, the basic part please refer to the official website documentation.

Knockout.js ( ko ) is one of the first important contributors to introducing MVVM to the front end. The current version has been updated to 3. Compared with the main characteristics of the same:

Duplex binding is based on observe mode and has high performance.

The plug-ins and extension mechanisms are perfect, both in the data layer and the presentation layer to meet a variety of complex requirements.

Down support to IE6

Documentation, testing is complete, community is more active.


The following analysis will be compared to the 3.x version on GitHub. One thing needs to know first: Ko uses google closure compiler for compression because closure compiler will change the code itself in a certain way when compressing, so there are many similar ko.exportsymbol in Ko Source ( ' Subscribable ', Ko.subscribable's statement to prevent references from being lost while compressing. Readers who are willing to get to know each other can read closure compiler first, and can skip it without understanding it.

Startup code Example:

var App = function () {
    this.firstname = ko.observable (' Planet ');
    This.lastname = ko.observable (' earth ');
    This.fullname = ko.computed ({
        read:function () {return
            this.firstname () + "" + this.lastname ();
        WRI Te:function (value) {
            var lastspacepos = Value.lastindexof ("");
            if (Lastspacepos > 0) {
                this.firstname (value.substring (0, Lastspacepos));
                This.lastname (value.substring (Lastspacepos + 1));
Ko.applybindings (New App,document.getelementbyid (' ID '))

Turn directly to the source/src/subscribables/observable.js the first line.

ko.observable = function (initialvalue) {var _latestvalue = InitialValue; function observable () {if (Arguments.length > 0) {//Write//Ignore writes if the VA Lue hasn ' t changed if (Observable.isdifferent (_latestvalue, arguments[0])) {OBSERVABLE.VALUEW
                Illmutate ();
                _latestvalue = Arguments[0];
                if (DEBUG) observable._latestvalue = _latestvalue;
            Observable.valuehasmutated (); return to this; Permits chained assignments} else {//Read KO.DEPENDENCYDETECTION.REGISTERDEP Endency (observable);
        The caller only needs to is notified of changes if they did a "read" Operation return _latestvalue;
    } (observable);
    Ko.utils.setPrototypeOfOrExtend (observable, ko.observable[' FN ']);
    if (DEBUG) observable._latestvalue = _latestvalue; /**Here omitted the special for closure compiler writes the statement **/<br> return observable; }

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.