资讯专栏INFORMATION COLUMN

吐槽专用

zxhaaa / 1543人阅读

摘要:最终选择了兼容到的,终于使用上框架,虽然它只是个。没有对比就没有伤害本来想着技术栈统一,移动端也准备使用。于是,之后对移动端的技术选型上更加慎重了,最终采用了文档更漂亮的。易用还真不易用,坑还真多。

吐槽 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 ""
  }
})

{{@show(@aaa, "bbb", "ccc")}}

我有大量的数据,那不是要写很多?如果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压缩代码时遇到一个问题


 

 

 

可能大家对这个标签的语意和用法理解不同,先给html-minfer提了个issue

根据issue上的回复,发现这个是我自己配置的坑

任性的代码

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

总结一下

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

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

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

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

相关文章

  • Python之父发文吐槽现有解析器,考虑将它替换掉

    摘要:近日,他开通了账号,并发表了第一篇文章,透露出要替换的核心部件解析器的想法。这篇文章分析了当前的解析器的诸多缺陷,并介绍了解析器的优点,令人振奋。但问题是,如果你这样写语法,解析器不会起作用,将会罢工。 showImg(https://segmentfault.com/img/remote/1460000019893712?w=3936&h=2624); 花下猫语: Guido van...

    xiaoxiaozi 评论0 收藏0
  • 不同领域三本好书

    摘要:今天收到了图灵社区的三本好书。该不该看,很简单,玩的,你懂得的三本书基础教程第版基础教程第版电子版针对最新版的本书赞誉实战攻略 今天收到了@图灵社区 的三本好书。 《jQuery基础教程(第4版)》:最好的jQuery入门书!没有之一!讲解内容已更新至jQuery最新版,@李松峰 老师的精彩翻译,竟然累计重印14次,忒牛了!前一阵子买了电子版,这会儿纸质版也有了。掌握jQuery已...

    lakeside 评论0 收藏0
  • 学点Webpack吧

    摘要:下的包含很多匹配规则正则表达式,每一条代表加载什么类型的资源文件,上面写的就是加载样式文件,并使用和加载。现在问题来了,我想喝瓶茅台自动添加浏览器产商前缀。没问题,强大的生态圈给你提供了,一个更高大上的。 开始 webpack 之旅 npm install webpack --save-dev 这里如果没有指定 -g全局安装,那么需要调用 node_modules 下的 webpack...

    邱勇 评论0 收藏0
  • html

    摘要:服务器通常采用高性能的工作站或小型机,并采用大型数据库系统,如或。浏览器通过同数据库进行数据交互。本文介绍的也就是有关模式中前端部分的内容。在新窗口打开,默认是表示改变自己。用于将鼠标悬停到超链接的时候的显示内容。HTML介绍 (注:本人只是对前端简单的介绍,而且也只是达到会用的水平,前端工作者勿吐槽) 本文是前端部分的第一篇,在开始介绍html之前先做一些简单的说明 前端概述 首先我们需要...

    Dr_Noooo 评论0 收藏0

发表评论

0条评论

zxhaaa

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<