吐槽专用

吐槽 avalon.js

历史背景

• 需求重大调整，全部业务推倒重来（pc端主要任务涉及管理后台类型的网站）；

• 开发周期很紧，过年前要上线；

• 公司pc端业务要求兼容到ie8；

• 2015年前端工资猛涨（特别是p2p这块），离职潮加重，前来面试的要么不合适（99%的面试者技术水平对不起那份高工资，也许是我要求过高），合适的人没有选择咱们，最后只剩下2我的，一个作业务逻辑，一个作页面重构；

• 开发周期很紧，过年前要上线；

• 我刚入职不久，以前的前端团队没留下什么现成的代码或模式，几乎全部的东西都须要从新开发。

技术选型

在这种状况下，为了更快的开展业务，花了两三天时间，对技术选型作了一次任性而粗暴的预研：

• 抛弃了jquery这种基于dom操做的开发模式，后台有大量的数据交互和绑定，开发起来比较慢，维护性不高。由于ui都是彻底自主，像easyui这类很重的框架一方面定制起来比较繁琐，并且学习成本高，最重要的是我的不是很喜欢。

• 而当下最流行的mvvm框架，像ng，vue，react都有一个致命问题--兼容性，虽然ng，react早期版本兼容ie8，当考虑之后的维护升级，就没有考虑。

最终选择了兼容到ie6的avalon.js，终于使用上mvvm框架，虽然它只是个vm。
对比过1.5和以前版本，本着对做者的大名的神往及信任，项目使用了v1.5这个版本，为后来的开发买下伏笔。

没有对比就没有伤害

原本想着技术栈统一，移动端也准备使用avalon.js。因为一些需求和开发优先级等缘由，迟迟没有开始。
前期粗暴的预研，渐渐在pc端业务开发到了中期，一直在chrome上作开发，回头作ie兼容性时，却踩了史上最严重的坑。

因而，以后对移动端的技术选型上更加慎重了，最终采用了文档更漂亮的vuejs。虽说是慎重之选，其实更是一个幸运之选。

两个库我都在项目中使用，对vue愈来愈喜欢，而avalon越用越多槽点。

issue回复草率，bug坑死人，胡乱报错

像这个issue，我想知其因此然。
虽然我经过用vuejs同理可知是由于涉及生成虚拟dom，组件模版必须有惟一的根元素。

这算我要求过高了，做者没有那么多精力，那么接下来的有点难忍了。

avalon 在v1.5中竟然不兼容ie8-，包括官方的例子。
一样v2.0也是这样，本身写个教程，给的例子本身都不测试下。
他回复 issue的原话以下：

ms-modal关闭不了本身改改，那个原本就是教程！

太不负责了吧！若是连兼容--avalon的最重要的最基础一点都没作到，那我就没有使用他的必要了。

至于报错这项，好比父组件传值给子组件一个子组件未定义过的值，它竟然这样报错

TypeError: 对象不支持此属性或方法 onInit

那onInit是什么鬼？

组件

vue中有一个局部组件的概念，起初不明白为何要那么设计。后来慢慢发现，这个设计过重要了，特别是在把某一个组件太过复杂，把他拆分红更小的组件时，把这些更小的组件做为一个局部组件封装在父组件内部，而不会被暴露到外部。

反观avalon的组件系统，内层组件会把全部外层容器的属性都继承下来，并且组件一旦定义就是全局的了。并且组件的属性没有却份内部属性和外部属性，没有了私有属性和方法的概念，所有能被外部传值给覆盖。

语法糖

对一些语法包装上不是很友好，好比他写的教程

有一次调试ie兼容终性时，终于明白他为何要这么写，由于在ie8-中，this[cbName]被包裹了一层函数，全部在ie8-下，必须执行两次，以下

this[cbName]()             // 非ie8-
this[cbName]().call(this)  // ie8-

固然，或许是我使用的姿式不对。

对ms-if的设计很糟糕，对ms-if内部的语法限制颇多。好比：教程中提到的

注意,有许多人喜欢用ms-if作非空处理,这是不对的,所以ms-if只是决定它是否插入DOM树与否,ms-if里面的 ms-指令仍是会执行.

正确的作法是,当你知道这里面有非空断定,须要用方法包起来

avalon.define({
  $id: 'test',
  aaa: {},
  show: function(aaa, bbb, ccc){
     var obj = aaa[bbb]
     if(obj){
        return obj[ccc]
     }
     return ''
  }
})

<div ms-controller="test">
   <div ms-if="@aaa.bbb">
     {{@show(@aaa, 'bbb', 'ccc')}}
   </div>
</div>

我有大量的数据，那不是要写不少？若是ms-if里面还包着ms-if呢，写大量的这样丑陋的代码，太不人道了吧。到目前为止v2.1.14还存在大量的bug，好比组件中（非组件场景没注意）ms-if嵌套ms-for在ie8-不执行。

文档

可能由于vue的做者设计出身，相比之下，vuejs的文档设计的至关漂亮。

且不说vue支持多种语言（好像中文文档是社区提供的），avalon的教程中充斥这大量的口语话的表达，这点尚且能够忍。

做为一份教程，avalon没有很好的把使用用法，注意事项清晰系统的表述，给出的例子七零八落，甚至还夹杂着bug。

做为一份api文档，v1.5中只给出寥寥几个api接口，以及一些简单的说明；v2.0有所进步，可是连基本的完整性都没作到，好比组件的api就没有罗列。可能他想解释：“你去看教程啊，里面有写啊！”

项目推广

avalon 和国内不少开源库同样，没有作好推广工做，固然不是简单的拉来一堆人来助威，建个QQ群这样的堆人模式。

以前加过不少相关技术群，感受聊天的模式解决问题太没效率了，不如在github上看issue提issue或者看源码。

相比之下vue的做者在这方面更善于经营。

黑魔法的坑

定义组件时用wbr标签兼容低版本ie，用html-minifer压缩代码时遇到一个问题

<!-- 压缩前 -->
<wbr ms-a="a" ms-b="b"> 
<!-- 当前的html-minifer v2.1.3 全部空格被压缩-->
<wbrms-a="a"ms-b="b"> 
<!-- 最新的html-minifer v3.0.2 只有第一个属性前保留一个空格-->
<wbr ms-a="a"ms-b="b">

可能你们对这个标签的语意和用法理解不一样，先给html-minfer提了个issue

根据issue上的回复，发现这个是我本身配置的坑

任性的代码

avalon2.0内置了验证组件，可是却赤裸裸的用起了promise，说好的兼容低版本呢。并且使用时里面夹杂着不少dom操做，不是应该数据驱动，告别dom操做

总结一下

avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。

迷你 就不要内置什么插件，我可能几百年用不上。
易用 还真不易用，坑还真多。
拥有超优秀的兼容性 最起码的没作好。
组件开发 封装性太差
支持移动开发, 后端渲染 基于以上几点，一个不太敢用，并且没有什么优点可言