avalon 項(xiàng)目實(shí)踐記錄

yvonne 發(fā)布于2019-08-20 17:35 / 3429人閱讀

摘要：業(yè)務(wù)組件模塊化拆分復(fù)用后整體可維護(hù)性也得到了很大提升。先贊一個(gè)當(dāng)然凡事都有相對(duì)的一面，此篇文字就主要記錄自己在項(xiàng)目過(guò)程中的一些問(wèn)題。

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

項(xiàng)目背景

需要兼容到IE7（根據(jù)數(shù)據(jù)支撐重要說(shuō)服拋棄IE6）

上個(gè)版本傳統(tǒng) jQuery DOM 開(kāi)發(fā)模式，經(jīng)過(guò)無(wú)數(shù)手維護(hù)已經(jīng)慘不忍睹

核心業(yè)務(wù)流程，可維護(hù)性、健壯性要求高

主要業(yè)務(wù)邏輯流程單頁(yè)內(nèi)完成

接到這個(gè)項(xiàng)目改版規(guī)劃之后，首先想到的是引入一個(gè) MVVM 框架來(lái)解放對(duì) DOM 的操作，上個(gè)版本基本就是因?yàn)閼?yīng)該其他部門多次插手開(kāi)發(fā)后造成可維護(hù)性急劇下降。

最早是計(jì)劃使用 VUE + VUEX 來(lái)重構(gòu)此項(xiàng)目（之后確實(shí)自己重構(gòu)了一把），考慮到之前 VUE 項(xiàng)目中對(duì) IE8 以下還是有一些不可控的潛在坑，就把視線轉(zhuǎn)移到了 avalon 這個(gè)可以支持到 IE6 的框架上

事實(shí)證明，avalon 很好的完成了此項(xiàng)任務(wù)，在業(yè)務(wù)邏輯增加的前提下，整體項(xiàng)目代碼比之前縮減了60%。業(yè)務(wù)組件模塊化拆分復(fù)用后整體可維護(hù)性也得到了很大提升。先贊一個(gè)！

當(dāng)然凡事都有相對(duì)的一面，此篇文字就主要記錄自己在項(xiàng)目過(guò)程中的一些問(wèn)題。

問(wèn)題List 官網(wǎng)提供的 2.2.4 avalon.js IE8 下報(bào)錯(cuò)

使用 https://cdn.staticfile.org/av... IE8下一直報(bào)錯(cuò)，最后通過(guò)到avalon github，下載所使用的2.2.4版本自己壓縮打包后解決。

組件slot在 2.2.4 版本中和API文檔中表現(xiàn)差異較大

官方demo 組件 slot https://segmentfault.com/a/11... 2.1.17版本下就可以之后的2.2.4 版本中 slot 內(nèi)外就沒(méi)有通信方式了（但切換低版本組件方式就全變）。

為此專門重寫(xiě)一個(gè) avalon.extendComponent 方法來(lái)實(shí)現(xiàn)組件的繼承和擴(kuò)展，解決組件復(fù)用時(shí)局部自定義的需求。

// avalon extendComponent 組件繼承擴(kuò)展
// 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 = { //子組件配置項(xiàng)
        displayName: sComName,
        parentName: sComParentName,
        defaults: oDefaults
    };
    if (sTemplate) oConfig.template = sTemplate;
    oParent.extend(oConfig);
};

IE8一下直接使用兼容過(guò)的JSON.stringfy 處理 avalon對(duì)象上的數(shù)據(jù)可能會(huì)返回 undefined

自定義如下擴(kuò)展方法去除掉avalon自身對(duì)象屬性

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

component 中模板只支持最外層一個(gè)html閉合結(jié)構(gòu) 同級(jí)多個(gè)無(wú)法渲染

其實(shí)這個(gè)問(wèn)題參考 VUE2.0 也要求組件模板最外層只有一個(gè)頂級(jí)標(biāo)簽

// OK 
avalon.component("ms-process-quick", {
        template: ""
})        
  // 第二個(gè)div不會(huì)渲染      
avalon.component("ms-process-quick", {
        template: "
"
})

for循環(huán)的模板中外層有:class 內(nèi)部判斷時(shí) 循環(huán)內(nèi)部的if會(huì)出現(xiàn)重復(fù)渲染（非必先，排除法才找到問(wèn)題沖突點(diǎn)）

如下面的代碼，外層class存在判斷:class="@item.setGreyWhenBankInMaintence ? "" : "test""，造成儲(chǔ)蓄卡 信用卡 重復(fù)渲染兩次。

"            ",
"                {{@item.bankName}}",
"                ",
"                   儲(chǔ)蓄卡",
"                   信用卡",
"                ",
"            ",

IE瀏覽器（9、10、11）中 input password 類型在 display none的元素內(nèi)，不完全重現(xiàn)，盡量考慮規(guī)避 IE瀏覽器（9、10、11）中在input select 等f(wàn)orm元素上使用 if 有潛在的 avalon報(bào)錯(cuò)崩潰風(fēng)險(xiǎn)，盡量避免