avalon 项目实践记录

yvonne 发布于2019-08-20 17:35 / 3303人阅读

摘要：业务组件模块化拆分复用后整体可维护性也得到了很大提升。先赞一个当然凡事都有相对的一面，此篇文字就主要记录自己在项目过程中的一些问题。

原文地址：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不会渲染      
avalon.component("ms-process-quick", {
        template: "
"
})

for循环的模板中外层有:class 内部判断时循环内部的if会出现重复渲染（非必先，排除法才找到问题冲突点）

如下面的代码，外层class存在判断:class="@item.setGreyWhenBankInMaintence ? "" : "test""，造成储蓄卡 信用卡 重复渲染两次。

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

IE浏览器（9、10、11）中 input password 类型在 display none的元素内，不完全重现，尽量考虑规避 IE浏览器（9、10、11）中在input select 等form元素上使用 if 有潜在的 avalon报错崩溃风险，尽量避免

私有云海外云主机 php项目实践 python实践项目 python项目实践 java新手项目实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83694.html

avalon 单页面程序（种子工程）之一用requirejs引入avalon

摘要：现在微软终于痛定思痛决定放弃了不支持的安全更新，对我们前端来说，真的是重大利好啊言归正传，这篇文章的目的就是把怎么用构建一个单页面程序介绍以下，是对自己的一个总结，也喜欢对大家有一定的借鉴作用，写的不好不对的地方希望大家多评论评论谢谢。这篇文章是写在公司项目结束之后的，因为我个人不太会把没有实践过的东西写出来，实践是检验真理的唯一标准么，用的怎么样，好不好用，在成熟实践过的项目上能体...

solocoder 2019-08-19 17:27 评论0 收藏0
发布基于 Avalon2 的 UI 组件库与 SPA 脚手架

摘要：使用前端框架开发信息管理系统有三年了，最近半年花了些心血将这三年的积累凝聚起来，诞生了两个开源项目和。，中文名安逸，是基于的端组件库。有用于数据展示的组件用于数据提交的组件用于消息提示的与组件组件和用户输入组件等，并且还在不断完善中。使用 Avalon 前端框架开发信息管理系统有三年了，最近半年花了些心血将这三年的积累凝聚起来，诞生了两个开源项目 ms-bus 和 ane。 ms-b...

Sike 2019-08-21 15:52 评论0 收藏0
avalon与masonry的结合

摘要：相关组件版本最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得最成熟，所以就选用了它。测试的结果很令人沮丧，依然没有控制节点的位置，所以应该不是这个问题。相关组件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得masonry最成熟，所以就选用了它。而在之前开发后台...

Kosmos 2019-08-22 10:59 评论0 收藏0
《从零构建前后分离的web项目》：前端了解过关了吗？

摘要：前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解，并且最好带有一定的技术前瞻性，好的技术架构可能日后会方便的扩展，减少重构的次数，即使重构也不需要大动干戈，我通常选型技术栈会参考以下三点一提出自身业务的需求是 # 前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/146000001626972...

lbool 2019-08-23 11:44 评论0 收藏0
《从零构建前后分离的web项目》：前端了解过关了吗？

摘要：前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解，并且最好带有一定的技术前瞻性，好的技术架构可能日后会方便的扩展，减少重构的次数，即使重构也不需要大动干戈，我通常选型技术栈会参考以下三点一提出自身业务的需求是 # 前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/146000001626972...

cgspine 2019-08-19 11:06 评论0 收藏0