Avalon.js Source Analysis

Brief introduction

Avalon is a MVVM framework written by the domestic Masaki, which is characterized by the following similar framework:

Use observe mode, high performance.

Overriding the original object with Object.defineproperty does not require the user to display the various attributes as they were knockout.

The low version of IE uses VBScript to be compatible, always compatible to IE6.

Need to see the basic introduction of the words suggested directly to see the blog of Stu. Search on the Internet a lap, found that there has been a good source of Avalon analysis, here also recommend: address. Avalon in the circle has been criticized not enough to standardize the problem, please do not need to leave message here, see the source is nothing but the essence to its dross. Can comment on, but always discuss with which frame good which bad is meaningless, if they can't hold, with nothing bad.

Today's analysis is based on the Avalon.mobile 1.2.5, Avalon.mobile is specially prepared for advanced browsers, incompatible with IE8 below.

Entrance

Or look at the boot code first.

Avalon.ready (function () {
    avalon.define ("box", function (VM) {
        VM.W =;
        vm.h = m;
        Vm.area = function () {
            get:function () {return THIS.W * this.h}
        }
        VM.LOGW =function () {console.log (VM.W)}
  })
    Avalon.scan ()
})

There are two things: defining ViewModel and performing scans. Turn to define definition:

Avalon.define = function (ID, factory) {
        if (Vmodels[id]) {
            log ("WARNING:" + ID + "already in Avalon.vmodels")
        }
  var scope = {
            $watch: NoOp
        }
        Factory (scope)//get all defined
        var model = modelfactory (scope)//Steal, Change scope to model
        Stoprepeatassign = True
        factory (model)
        Stoprepeatassign = False
        model. $id = ID return
        Vmodels[id] = Model
    }

In fact, it can be understood at a glance. Here is a point, why do two times factory? Advise the reader to think for yourself first. I'm just saying this here: because in Modelfactory, if the property is a function, it will be copied directly to the new model, but the VM in the function still points to the VM in the original definition function, so there is an error. So the reference error is corrected through two execution factory.

So why not use the Function.bind or other methods to specify the reference directly in the modelfactory? And you can change the scope object to ViewModel directly after the scope is obtained, right?

Here the code is actually directly from the Avalon compatible with the full version of IE moved out, because the old browser to create VBScript objects, so you can only pass a scope to get the definition, in accordance with the definition to create. and older browsers do not support bind and other methods. We'll take a look at the overall mechanism chart: