这里所指的angularjs是只angular早期的1.x版本。虽然vue, react在热度上已经碾压angularjs几条街,但是在面对web开发(以DOM为中心的开发)中,某些场景下面,angularjs可能比任何框架或库都做得好。这里,主要举例两个点。
Modal弹窗的隐现
现在是单向数据流和immutable的天下,其目的是为了数据流所蕴含的业务流清晰,但代价是代码编写变得复杂。举一个例子,用react写一个弹出框modal,按照单向数据流的范式,必须将modal的隐现通过一个prop来控制,而这个prop必须由外部组件传入,为了控制这个prop,就必须再配合一个回调函数来触发prop的改变。这是对modal组件而言,而对于外层调用modal组件而言,必须自建一个state传给对应的prop,同时,必须自建一个方法作为回调函数传给modal。这里面编程出错的几率远远大于保证业务流正确的几率,也就是成本的提升。因为,你必须在回调函数中,正确处理state的变化值。
而双向数据绑定则完全不需要,传入prop之后,不需要再在回调函数中修改state,双向绑定逻辑会自动修改state。(当然,这基于不同的数据思想,一个是immutable,一个是mutable,各自不同。)虽然基于的范式不同,但是一个modal的显示和隐藏在双向数据绑定范式下,更有利。
表格固定列
Web表格(grid table)是前端交互领域及其复杂的一个场景。其中的一个需求是,固定表格的前n列,剩下的可以左右滑动来查看。在基于 virtual dom 的 vue, react 编程中,自己手写是及其麻烦的,你需要手动在模板中拆分块,在脚本中拆分数据。总之,由于virtual dom的编程范式如此,本身就是要隔绝dom的操作。但是实际上,在前端领域,grid table的操作往往是virtual dom最早提出来的,基于数据变化,只修改小部分dom的需求。但是,实际上最终,virtual dom类编程,在这个点上,反而是最辣鸡的。辣鸡之点不在于性能,而在于编程的复杂。
而使用angularjs则太过便利。首先,angularjs也是基于数据响应更新界面的。其次,angularjs是基于DOM操作进行渲染的。所以,在angularjs中,如果要实现表格固定列的需求,只需要写一个directive,使用 template() 函数来动态返回模板,返回的模板是字符串,于是可以各种骚操作修改字符串来控制html结构,这比vue、react的结构编程快上10倍不止。接下来是对DOM的重新调整,当按照模板结构和样式完成渲染之后,你可能还需要调整列宽度、位置、滚动条是否显示、左右两边每行的点击联动、左右都可滚动(pointer-events: none;)等等操作,在不修改任何数据的情况下,瞬间通过DOM操作完成。而如果这些东西依赖virtual dom去做,可以说极其麻烦,代码量上翻10倍很正常。
除了上述这两个例子外,我在开发中还会碰到其他的一些场景,发现有的时候恨angular是垃圾,有的时候又觉得它diao。总之,在不同的场景下,不同的编程范式所带来的收益是不同的,但是问题点在于,我们无法真正的完全在同一套代码中享受不同范式的好处。这也是前端框架的一个不足之处吧。