avalon 項目實踐記錄

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

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

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

項目背景

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

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

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

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

接到這個項目改版規(guī)劃之后，首先想到的是引入一個 MVVM 框架來解放對 DOM 的操作，上個版本基本就是因為應該其他部門多次插手開發(fā)后造成可維護性急劇下降。

最早是計劃使用 VUE + VUEX 來重構此項目（之后確實自己重構了一把），考慮到之前 VUE 項目中對 IE8 以下還是有一些不可控的潛在坑，就把視線轉移到了 avalon 這個可以支持到 IE6 的框架上

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

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

問題List 官網(wǎng)提供的 2.2.4 avalon.js IE8 下報錯

使用 https://cdn.staticfile.org/av... IE8下一直報錯，最后通過到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 內外就沒有通信方式了（但切換低版本組件方式就全變）。

為此專門重寫一個 avalon.extendComponent 方法來實現(xiàn)組件的繼承和擴展，解決組件復用時局部自定義的需求。

// 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對象上的數(shù)據(jù)可能會返回 undefined

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

// avalon getOriginObject 
// 去除avalon對象上原型鏈方法 用于解決IE8 json stringfy 對象數(shù)據(jù)時異常
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不會渲染      
avalon.component("ms-process-quick", {
        template: "
"
})

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

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

"            ",
"                {{@item.bankName}}",
"                ",
"                   儲蓄卡",
"                   信用卡",
"                ",
"            ",

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

云服務器 GPU云服務器 php項目實踐 python實踐項目 python項目實踐 java新手項目實踐

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83694.html

avalon 單頁面程序（種子工程）之一用requirejs引入avalon

摘要：現(xiàn)在微軟終于痛定思痛決定放棄了不支持的安全更新，對我們前端來說，真的是重大利好啊言歸正傳，這篇文章的目的就是把怎么用構建一個單頁面程序介紹以下，是對自己的一個總結，也喜歡對大家有一定的借鑒作用，寫的不好不對的地方希望大家多評論評論謝謝。這篇文章是寫在公司項目結束之后的，因為我個人不太會把沒有實踐過的東西寫出來，實踐是檢驗真理的唯一標準么，用的怎么樣，好不好用，在成熟實踐過的項目上能體...

solocoder 2019-08-19 17:27 評論0 收藏0
發(fā)布基于 Avalon2 的 UI 組件庫與 SPA 腳手架

摘要：使用前端框架開發(fā)信息管理系統(tǒng)有三年了，最近半年花了些心血將這三年的積累凝聚起來，誕生了兩個開源項目和。，中文名安逸，是基于的端組件庫。有用于數(shù)據(jù)展示的組件用于數(shù)據(jù)提交的組件用于消息提示的與組件組件和用戶輸入組件等，并且還在不斷完善中。使用 Avalon 前端框架開發(fā)信息管理系統(tǒng)有三年了，最近半年花了些心血將這三年的積累凝聚起來，誕生了兩個開源項目 ms-bus 和 ane。 ms-b...

Sike 2019-08-21 15:52 評論0 收藏0
avalon與masonry的結合

摘要：相關組件版本最近，在公司的項目中，要開發(fā)一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測試的結果很令人沮喪，依然沒有控制節(jié)點的位置，所以應該不是這個問題。相關組件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的項目中，要開發(fā)一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發(fā)后臺...

Kosmos 2019-08-22 10:59 評論0 收藏0
《從零構建前后分離的web項目》：前端了解過關了嗎？

摘要：前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態(tài)圈有一切了解，并且最好帶有一定的技術前瞻性，好的技術架構可能日后會方便的擴展，減少重構的次數(shù)，即使重構也不需要大動干戈，我通常選型技術棧會參考以下三點一提出自身業(yè)務的需求是 # 前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...

lbool 2019-08-23 11:44 評論0 收藏0
《從零構建前后分離的web項目》：前端了解過關了嗎？

摘要：前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態(tài)圈有一切了解，并且最好帶有一定的技術前瞻性，好的技術架構可能日后會方便的擴展，減少重構的次數(shù)，即使重構也不需要大動干戈，我通常選型技術棧會參考以下三點一提出自身業(yè)務的需求是 # 前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...

cgspine 2019-08-19 11:06 評論0 收藏0