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报错崩溃风险，尽可能避免