Avalon.js Source Analysis

Source: Internet
Author: User
Tags bind define definition

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.


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:

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: info-contact@alibabacloud.com 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.