avalon 項目實踐記錄

原文地址：http://mtmzorro.github.io/201...

項目背景

• 須要兼容到IE7（根據數據支撐重要說服拋棄IE6）

• 上個版本傳統 jQuery DOM 開發模式，通過無數手維護已經慘不忍睹

• 核心業務流程，可維護性、健壯性要求高

• 主要業務邏輯流程單頁內完成

接到這個項目改版規劃以後，首先想到的是引入一個 MVVM 框架來解放對 DOM 的操做，上個版本基本就是由於應該其餘部門屢次插手開發後形成可維護性急劇降低。

最先是計劃使用 VUE + VUEX 來重構此項目（以後確實本身重構了一把），考慮到以前 VUE 項目中對 IE8 如下仍是有一些不可控的潛在坑，就把視線轉移到了 avalon 這個能夠支持到 IE6 的框架上

事實證實，avalon 很好的完成了此項任務，在業務邏輯增長的前提下，總體項目代碼比以前縮減了60%。業務組件模塊化拆分複用後總體可維護性也獲得了很大提高。先贊一個！

固然凡事都有相對的一面，此篇文字就主要記錄本身在項目過程當中的一些問題。

問題List

官網提供的 2.2.4 avalon.js IE8 下報錯

使用 https://cdn.staticfile.org/av... IE8下一直報錯，最後經過到avalon github，下載所使用的2.2.4版本本身壓縮打包後解決。

組件slot在 2.2.4 版本中和API文檔中表現差別較大

• 官方demo 組件 slot https://segmentfault.com/a/11... 2.1.17版本下就能夠 以後的2.2.4 版本中 slot 內外就沒有通訊方式了（但切換低版本 組件方式就全變）。

• 爲此專門重寫一個 avalon.extendComponent 方法來實現組件的繼承和擴展，解決組件複用時局部自定義的需求。

// avalon extendComponent 組件繼承擴展
// 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; //不存在組件則直接退出
    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 = { //子組件配置項
        displayName: sComName,
        parentName: sComParentName,
        defaults: oDefaults
    };
    if (sTemplate) oConfig.template = sTemplate;
    oParent.extend(oConfig);
};

IE8一下 直接使用兼容過的JSON.stringfy 處理 avalon對象上的數據可能會返回 undefined

自定義以下擴展方法去除掉avalon自身對象屬性

// avalon getOriginObject 
// 去除avalon對象上原型鏈方法 用於解決IE8 json stringfy 對象數據時異常
avalon.getOriginObject = function(data){
    var tempObj = {};
    for(var i in data) { 
        if(data.hasOwnProperty(i)){
            tempObj[i] = data[i];
        }
    }
    return tempObj;
}

component 中模板只支持最外層一個html閉合結構 同級多個沒法渲染

其實這個問題參考 VUE2.0 也要求組件模板最外層只有一個頂級標籤

// OK 
avalon.component('ms-process-quick', {
        template: '<div></div>'
})        
  // 第二個div不會渲染      
avalon.component('ms-process-quick', {
        template: '<div></div><div></div>'
})

for循環的模板中 外層有:class 內部判斷時 循環內部的if會出現重複渲染（非必先，排除法才找到問題衝突點）

以下面的代碼，外層class存在判斷:class="@item.setGreyWhenBankInMaintence ? \'\' : \'test\'"，形成<i :if="@item.debit">儲蓄卡</i> <i :if="@item.credit">信用卡</i> 重複渲染兩次。

'            <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">儲蓄卡</i>',
'                   <i :if="@item.credit">信用卡</i>',
'                </em>',
'            </li>',

IE瀏覽器（九、十、11）中 input password 類型在 display none的元素內，不徹底重現，儘可能考慮規避

IE瀏覽器（九、十、11）中 在input select 等form元素上 使用 if 有潛在的 avalon報錯崩潰風險，儘可能避免