对框架的挑选 Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js , Angular.js
1. 轻量级的应用选择哪一个会比较好?2. 那一个比较简单,容易上手3. 哪一个开发周期最短?对比:
- angular是找大而面的道路,因此体积非常庞大,1.6-1.7万行;
- avalon旨在提供一种远离DOM操作的前端开发体验,0.6.3只有2420行,min只有29kb。
- avalon从angular抄来了不少好东西,如{{}}插值表达式,ms-model(通过事件实现双向同步),ms-controller(为了VierModel指定作用域范围),但都做了增强,{{aaa|html}添加html过滤器就能输出innerHTML,ms-model可以通过data-observe来开关双向同步,ms-controller拥有孪生兄弟ms-important。
- avalon的$watch与ms-bind方法提供比angular强大得多回调功能。
- avalon拥有像knockout, emberjs那样的计算属性, angular没有。
- avalon与angular都拥有监控数组,但avalon的监控数组像knockout那样拥有大量好用的方法,能自动同步页面,angular的则相当弱。
- avalon与angular都拥有定义UI的功能(将一个元素变成一个UI组件),angular是使用自定义标签,avalon是使用ms-ui属性,但自定义标签在旧式IE并不好使,并且可能随着浏览器的升级,浏览器会添加一个与你一模一样的新标签。avalon则安全多了,并且拥有12UI组件可做参考,实现起来非常简单。
- avalon是采取边扫描边转换绑定的策略,用户打开页面后立即能看到效果,angular是要全部扫描后才转换绑定,因此用户可能看到一些奇异的模板。
- avalon是通过define方法来定义ViewModel,并有scan方法指定作用的元素与ViewModel。angular要求用户将xxxxCtrl函数暴露到全局作用域下,框架自己去取去组装。
- avalon在ViewModel有个$json,就是ViewModel对应的纯数据的Model(ViewModel每次被操作,都会自动同步View与Model的),我们可以直接将它放到AJAX中使用。angular没有独立的Model,需要自己转换。
- avalon是使用Object.defineProperty与VBS实现ViewModel,angular则是将整个xxxxCtrl函数进行编译,转换一大堆getter, setter从而实现双向绑定,因此angular的体积是相当庞大的。
- avalon的绑定值可是ViewModel的属性或数组或表达式, angular则允许用户在视图定义新变量,新对象,这是个不好的特征,会让页面非常难维护。
- avalon的绑定已经强大到让用户完全脱离DOM写业务,顶多是取一下表单元素的checked, disabled等状态值,angular还是传统的思路,只是在1.0后添加数据绑定机制。
总结
如果你在考虑究竟那个是最适合你的项目,我觉得应该考虑两个方面:
除了不同的地方,我可以肯定上述这些技术都遵循的一个功能:模型和视图分离。这是一种在20年钱就已经存在的经典设计模式。即使你在构建最简单的web应用界面你也能从这种模式中受益。
该贴由koei123转至本版2015-7-26 22:50:12