楔子
最近月影大神翻译的一篇文章很火——《别责怪框架:我使用 AngularJS 和 ReactJS 的经验》,标题看似客观,不过先扬后抑,借黑Angular之际狠赞了一下React。
看完之后也让我有感而发。写这篇文章的目的,并不是想反作者之道,褒Angular贬React,只是希望读者抛开个人情绪,对两者(或者Angular?)有一个更客观地认识。
ReactJS与Angular
还记得一年前刚接触Angular的时候感觉既惊喜又恐惧。惊喜的是双向绑定、指令…这些功能太炫酷了,恐惧的是感觉是在重新学习一门新的语言,如果说小米重新定义了手机的话,那么Angular应该是重新定义了javascript。
它的模块功能以及依赖注入很像AMD规范的requirejs,它的视图数据绑定更像是DOM操作升级版,它的路由功能又与backbone有异曲同工之妙,内置的$q
和$http
服务很好的解决了异步通信问题,不和jquery冲突的同时内置了类似jquery风格的原生DOM操作方式…最难能可贵的是,它还提供了单元测试和端到端的解决方案。
而对ReactJS我还只停留在hello world的层次,曾经在知乎上看到有人评价react的时候说是因为Angular的指令系统太难学,所以搞了一套这个玩意,不知真假。参考官网宣传及各种文章对react的吹捧,觉得优点应该有3个吧:
组件化
Angular的指令完全能实现组件化,支持嵌套和数据绑定,它的依赖注入使得引用也非常方便。
虚拟DOM提升性能
PC端上就现代浏览器内核的渲染性能而言,用Angular没出现过什么性能问题。
移动端在操作比较多的DOM时,低端机上会出现卡顿。不过还是有优化方案的,而且Angular本身也是不提倡频繁、大量的操作DOM,比如HTML游戏。
React Native
我看好React的原因很大程度在于它,这种跨平台能力还是很有价值的。这一点也是可以秒杀Angular的,不过目前还不了解是否有成熟的大型应用~
解决方案
对于文中所提问题,我以自己对Angular的粗浅了解,花了几分钟,试着解答了一下~
1.改变 URL 的时候不重新加载 controller 或者渲染基础模板。
如果认真看了官方文档关于$location服务的介绍之后,要解决这个问题并不难。通过$location
服务在hash值中添加url参数,这个参数不在路由中配置就不会刷新controller和视图,同时,又可以通过$location
服务来获取它。具体方法我已写在了issue上。
2.想要从一个准备发送给服务器的 JSON 中移除一些空白字段时,发现 UI 中对应的数据也被一并移除了 —— 丫的双向绑定 ╮(╯▽╰)╭。
双向绑定应该是利大于弊的(虽然脏检测机制经常遭人诟病),基本上不再需要手动操作DOM。简化了逻辑,少了很多重复代码,同时也减少了视图与数据层忘记同步带来的错误。
这个问题当然也非常好解决,前提是如果你读过官方文档关于表达式的表述。那就是用用双冒号::
可以实现单次绑定,之后操作数据就不会再与视图同步了,或者直接创建一个只含需要属性的新对象更简单,方法很多~
3.当想要使用 ngShow 和 ngHide 来显示一个 HTML 块同时隐藏另一个 HTML 块时,在一瞬间,两者同时显示了。
ng-cloak和loading页,随便选一个即可。
写在最后
很多人都有一种畏难的心理,放弃学习Angular,或者向之前文章作者那样赶鸭子上架地被迫学习,从而变得痛恨,(就像你没有使用过VIM就无法理解为什么它被称作编辑器之神,不知道它是如何依靠“模式”来实现无鼠标操作光标,不知道它的宏之强大…)这其实是一种损失。因为Angular确实是一个优秀的框架,它的优秀不仅仅在于前面我说的那些优点。它不单单是强大的开发框架,更像是饱含了作者设计思想和理念的艺术品(当你阅读完官网开篇介绍的最后一部分:Angular的禅道之时愈发会有此感)。
最后引用罗胖说过的一句话做为文章的结尾。
“我创业之后越来越少负面地区评价一个人和一件事,是因为我清楚地知道,一旦我做出这样一个结论,以我的知识和逻辑能力,我马上会编造一套理由,在自己内心里来论证自己这个判断。而因此的结果就是我从此丧失了对这个人这个事代表的所有现象的好奇心和求知欲,也就是说,我认知的大门就关上了。”