Original address: http://mtmzorro.github.io/201...

Project Background

• Need to be compatible with IE7 (important persuasion to discard IE6 based on data support)

• The last version of the traditional jQuery DOM development model, after numerous manual maintenance has been horrible to see

• Core Business Processes, Maintainability and Robustness Requirements

• Major business logic process completed in one page

After receiving the revision plan of this project, the first thought is to introduce an MVVM framework to liberate the operation of DOM. The last version is basically due to the rapid decline in maintainability caused by the involvement of other departments in development.

The earliest plan was to use VUE + VUEX to reconstruct the project (after that, I did reconstruct myself). Considering that there were still some uncontrollable potential pits below IE8 in the previous VUE project, I turned my attention to avalon, which can support IE6.

It has been proved that avalon has accomplished this task well. With the increase of business logic, the overall project code has been reduced by 60%. The overall maintainability of business components has also been greatly improved after modularization, split and reuse. Praise one first!

Of course, everything has a relative aspect, this text mainly records some problems in the process of the project.

Question List

2.2.4 avalon.js IE8 error reporting provided by the official website

Use https://cdn.staticfile.org/av... IE8 has been reporting errors, and finally passed to avalon github The 2.2.4 version used for downloading is compressed and packaged by itself.

Component slot behaves differently in version 2.2.4 and API documents

• Official demo component slot https://segmentfault.com/a/11... Under version 2.1.17, there will be no communication mode inside or outside slot in version 2.2.4 after that (but the mode of switching low-version components will change completely).

• For this purpose, an avalon. extended Component method is specially rewritten to realize the inheritance and expansion of components and to meet the local custom requirements when reusing components.

// avalon extendComponent component inheritance extension
// Thanks aLoNeIT https://github.com/aLoNeIT/flyUI
avalon.extendComponent = function (sComName, sComParentName, sSettings) {

    oDefaults = sSettings.defaults;
    sTemplate = sSettings.template;

    var oParent = avalon.components[sComParentName];
    if (!oParent) return; //Exit without component
    sTemplate = sTemplate || null;
    oDefaults.$parents = {};
    avalon.each(oParent.defaults, function (key, value) {
        oDefaults.$parents[sComParentName + "_" + key] = value;
    });
    oDefaults.inherited = function (sPropertyName, sParentName, oParams) {
        if (avalon.isString(sPropertyName) && avalon.isString(sParentName) && this.$parents[sParentName + "_" + sPropertyName]) return this.$parents[sParentName + "_" + sPropertyName];
        else return null;
    }
    var oConfig = { //Subcomponent Configuration Items
        displayName: sComName,
        parentName: sComParentName,
        defaults: oDefaults
    };
    if (sTemplate) oConfig.template = sTemplate;
    oParent.extend(oConfig);
};

IE8 directly uses compatible JSON.stringfy to process data on avalon objects may return undefined

Customize the following extensions to remove avalon's own object attributes

// avalon getOriginObject 
// Removal of prototype chains on avalon objects to resolve exceptions in IE8 json stringfy object data
avalon.getOriginObject = function(data){
    var tempObj = {};
    for(var i in data) { 
        if(data.hasOwnProperty(i)){
            tempObj[i] = data[i];
        }
    }
    return tempObj;
}

Templates in component only support the outermost html closure structure with multiple non-renderable structures at the same level

In fact, referring to VUE 2.0, this issue also requires that there is only one top-level label on the outer layer of the component template.

// OK 
avalon.component('ms-process-quick', {
        template: '<div></div>'
})        
  // The second div doesn't render      
avalon.component('ms-process-quick', {
        template: '<div></div><div></div>'
})      

In the template of for loop, there are two layers: if in the class inner judgment loop will appear repeated rendering (not necessarily first, exclusion method can find the problem conflict point)

In the following code, the outer class has a judgment: class="@item.setGreyWhenBank InMaintenance?\\\\\\\\\\\\\\\

'            <li data-order="3" class="pl-item" :class="@item.setGreyWhenBankInMaintence ? \'\' : \'test\'">',
'                <span :attr="{id: \'bank-\' + @item.bankCode.toLowerCase()}" class="bank-logo">{{@item.bankName}}</span>',
'                <em class="pl-i-info">',
'                   <i :if="@item.debit">Savings deposit card</i>',
'                   <i :if="@item.credit">Credit Card</i>',
'                </em>',
'            </li>',

The input password type in IE browser (9, 10, 11) is not completely reproduced in the element of display none, so try to avoid it.

Using if on form elements such as input select in IE browser (9, 10, 11) has potential avalon error reporting crash risk and avoids it as far as possible.