avalon 项目实践纪录

2019年8月25日 172次阅读 来源: mTmzorro

原文地点：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浏览器（9、10、11）中 input password 范例在 display none的元素内，不完全重现，只管斟酌躲避

IE浏览器（9、10、11）中 在input select 等form元素上 运用 if 有潜伏的 avalon报错崩溃风险，只管防止

    原文作者：mTmzorro
    原文地址: https://segmentfault.com/a/1190000009953170
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞