有人关注 avalon 这个 MVVM 框架吗?

2013-09-25 09:38:39 +08:00
 clino
https://github.com/RubyLouvre/avalon 国产的,感觉完全不想国际化/有兼容到 ie6和只兼容到 ie10 的两个版本可选/小巧
http://vdisk.weibo.com/s/aMO9PyIQCnLOF/1375154475 MVVM框架介绍,内有 knockout ember angular 等的介绍和比较
http://www.cnblogs.com/rubylouvre/p/3181291.html 入门教程,里面最开始把其他的 MVVM 的缺点说了一堆,说得我现在不想用 angular 了
17621 次点击
所在节点    JavaScript
25 条回复
yakczh
2013-09-25 09:57:32 +08:00
还有其他兼容ie6的框架吗,掰着指头数一下
chrisyipw
2013-09-25 10:56:56 +08:00
Client-side 的 MVVM 建议还是用社区成熟的,除非你有能力也愿意去贡献。

针对第三个链接的回复:

首先,看到「司徒正美」就呵呵了……

他说的 AngularJS 问题我只认同一点:「空间换时间」,AngularJS 团队也是建议「在 DOM nodes 小于 2000 的项目上用」,以达到最佳的开发效率和性能的平衡。

而其他,并没有他说得那么严重,一个 injection 也就是这样:

angnular.controll('MainCtrl', [ '$scope', '$q', '$timeout', '$window', function ( $scope, $q, $timeout, $window ) {} ])

上述代码这是抗压缩的。

AngularJS 为了达成 <input ng-model='username'> <h1 ng-bind='user'></h1> 的自动更新和 $scope.$watch('username', function (username) { if (!username) { $scope.username = 'Tell me your name' } }) 的数据监控,自然不可避免地阻止「实时」 DOM 更新,否则性能会有隐患。

这一切,都是一种选择的问题。

AngularJS 的上手是很快的,完全感觉不到司徒正美说的「上手难度非常高」(好吧,为了 single-page app 确实耗费了不少时间在 nested views 上,直到我遇到 ui-router,这也侧面证明了 AngularJS 的社区力量)—— @sofish 和我看了一下文档就知道怎么写,他当天问我一些问题之后,几天内就发布了 AngularJS 版的 staticfile.org。难吗?用 AngularJS 甚至可以不改原有架构(见 http://joome.net/lab/partners 源码,不是一个好例子,这场景该用 doT)。

最后,对司徒正美的个人看法:我也订阅过他的博客很长时间,很清楚他的技术积淀有多深厚,同时也察觉到他对性能的异样追求,所以在他 AvalonJS 入门文章出来之后,果断取消了订阅。

正如七牛云储存许式伟说的「大部分 C++ 程序员热衷于性能偏执,甚至是异常的偏执」( http://open.qiniudn.com/golang-and-cloud-storage.pdf ),我也在司徒正美身上看到了这个偏执。

我们这个时代其实是不错的时代,因为:

- I/O 瓶颈?上 SSD。
- CPU 瓶颈?上集群。
- Client-side 速度慢?V8 引发了引擎竞赛的大潮,Blink 也很有可能引发 DOM 性能竞赛的潮流。

过度关注性能,有意义吗?我知道这没有正确答案,但从 Rails 和 AngularJS 的火,多少可以窥见大众和市场的选择。(此外 AngularJS 对技术的选择相当前卫,可以让你保持 updated,有兴趣可以粗略了解一下 http://blog.chrisyip.im/posts/2013/09/11/great-posts-about-angularjs-and-emberjs

但「我们」这个时代也是一个糟糕的时代,IE 6、7 的份额降不到 0,欲哭无泪。
xlhuang
2013-09-25 11:38:30 +08:00
其实我也非常关注性能……
clino
2013-09-25 12:54:21 +08:00
@yakczh 使用者也可以选择不兼容ie6的版本嘛.我想能兼容ie6也说明这个框架比较小巧才比较容易能做到

@chrisyipw 没看懂你说的抗压缩和他说的有没有矛盾,不过我看angularjs官方文档翻译版里有提到:"由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果你要压缩)PhoneListCtrl控制器的JS代码,它所有的参数也同时会被压缩,这时候依赖注入系统就不能正确的识别出服务了。"
你举的栗子是规避的方法吗?

"「上手难度非常高」" 这话我也觉得可能会比较夸张,不过你没怎么碰到问题会不会是因为还没怎么碰到 angular 比较坑的地方? "由于基于编译,许多行为都不是即时的,可预见的。"这个说法应该是靠谱的吧?

"过度关注性能,有意义吗?" 这句话我觉得你本身就给出了答案,因为已经有一个"过度",但问题到底是不是"过度",我觉得如果提供的功能差不多,性能明显有问题和性能较好的两个肯定选性能较好的了,当然要考虑其他方面,不过性能也是一个重要的指标
FrankFang128
2013-09-25 12:55:50 +08:00
谈客户端JS的性能?算了吧。绝大部分网站没必要谈这个。
FrankFang128
2013-09-25 13:01:17 +08:00
选择开源框架,还是选择一个社区成熟的比较好。
chrisyipw
2013-09-25 14:50:24 +08:00
@clino 我举的例子就是官方的方案,官方文档和翻译都比较坑,没有很明确地说明其实可以和压缩器友好相处,详情可以看 $inject 的文档。

司徒说的其实这样:angular.controller('MainCtrl', function($scope){}) -> angular.controller('MainCtrl', function(a){}),因为 AngularJS 的黑技术原因,需要 $scope 保持 $scope 这个名字,理解成字符串匹配好了,匹配不了,就认为这有错。

angular.controller('MainCtrl', ['$scope', function($scope){}]) 就像 source map,明确告诉 AngularJS,函数参数的第一个变量,就叫 $scope,这样 AngularJS 就知道找什么对象。另一个用法:

function MainCtrl ($scope) {}
MainCtrl.$inject = ['$scope']

一样的效果。我手头的 AngularJS 全部都是经过 uglify.js 压缩的,用的是 CoffeeScript,都正常运行。

上手难度的问题嘛,别说我没碰到问题,比如 $httpProvider 自定义 headers 的坑……只不过大部分都可以通过 StackOverflow、文档解决,所以谈不上坑,这也就是我说的社区力量。

关于性能的问题,你的话也有问题,「性能明显有问题 vs 性能较好」,本身就有答案。事实上 AngularJS 真不是有问题( http://jsperf.com/angularjs-vs-backbone http://jsfiddle.net/jashkenas/CGSd5/ )。

$parse getter 的效率 http://jsperf.com/angularjs-parse-getter/4

但 AngularJS 不适合重型 app 是事实,看这个 http://jsperf.com/angularjs-digest/2 :利用 $new 建立了 100 个 $scope,每个 $scope 还要设立 100 个 $watch,在 Chrome v30 里只有可怜巴巴的 2000 ops/sec(AngularJS 版本是 1.0.1/1.0.2)。

拿 10s 和 1s 比,傻子也知道该选 1s,但 10ms 和 100ms,就没所谓了。这就是为什么 http://builtwith.angularjs.org/ 里的项目有 10 页之多。

我认为司徒对性能过度偏执,就是这个原因。比如 forEach 等方法和 for loop 的选择,司徒会毫不犹豫选择 for loop 吧,毕竟在 Chrome v29 里 forEach 跑 7000 ops/sec 的时候,for loop 是 20000 ops/sec 的( http://jsperf.com/for-vs-foreach/100 ),但是一秒跑 7000 ops/sec 对我来说足够满足大部分场景,所以我喜欢:

if ( arr.some(function(item){ return item == whatever } ) { /* do something */ }

or

arr.some(function(item){ if (item == whatever) { /* do something */; return true; })

而不是:

for (var i = arr.length; i--;) {
if (arr[i] == whatever) { /* do something */ }
}

我对性能的看法是,针对场景选择最适合的,比如说,不管是什么 MVVM 都不可能比得上 elem.innerHTML 的效率,算上下载的体积,生成模板必定比不上 doT 等模板库(不算额外库,doT.js 3,324 bytes, AngularJS 1.2.0rc2 91,028 bytes,Ember.js 235,368 bytes,屌爆了有没有)。
est
2013-09-25 15:40:00 +08:00
@clino @chrisyipw

有人能给我举一个国内网站,因为单页DOM太重,angularjs不适合的例子么?
est
2013-09-25 15:44:19 +08:00
其实我用angularjs就一个原因:你们其他社区能有那么多widgets直接套着用嘛?谁谁给我个emberjs的select2看看?支持icon和多选神马的。
kangjia
2013-09-25 16:11:58 +08:00
@est 看看淘宝旅行的list页 DOM重的网站太多了。
lisposter
2013-09-25 16:17:42 +08:00
轮子太多了。。随手选一个大家在用的就好
est
2013-09-25 16:23:35 +08:00
@kangjia 看了下

/jipiao 这个页面
document.getElementsByTagName("*").length
2284

搜索航班结果页面
document.getElementsByTagName("*").length
1138
dimfox
2013-09-26 19:22:38 +08:00
@est 2000 dom node 指的是所有还是需要实时监控的?
chrisyipw
2013-09-27 16:24:41 +08:00
补充:为什么 AngularJS 选择 dirty-checking 而不是 change listneners http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
est
2013-09-28 11:42:03 +08:00
@dimfox 实时监控的当然没这么多。但是我记得ng是需要init的时候把所有DOM扫一遍的。
clino
2013-09-28 21:42:04 +08:00
@chrisyipw @est 刚看了司徒正美翻译的一篇“ 为什么移动Web应用程序很慢” http://www.cnblogs.com/rubylouvre/p/3213632.html 觉得在某些情况下性能还是挺重要的,特别是在移动终端上
est
2013-09-28 21:59:53 +08:00
@clino 移动设备上做web app或者CRUD也是比较疯狂的。
chrisyipw
2013-09-28 22:55:17 +08:00
@clino
@est

极度有限的资源还要使用带 **chache** 的框架——脑子有病。

我做移动项目向来不喜欢过多的框架,很多时候都直接上 zepto 了,真心要 tweak 的话,必然是 native JavaScript。

另外,抛开 jQuery、zepto 等问题不说,其实想要在 single page 里承载过多功能都是疯狂的。PhoneGap 就是一直面临着做出来的 app 各方面都达不到 native app 的一半的。浏览器跑 HTML app 就像跑 Java,外头套一层 JVM 还能比得上 native app 才有鬼哩。
chrisyipw
2013-09-28 22:55:48 +08:00
typo #18: chache -> cache
chrisyipw
2013-09-28 22:59:42 +08:00
@dimfox
@est

建议少于 2k node 简单的原因是因为 angular 会监控 $scope properties 的变动然后去 render templates,比如更新 {{username}}。

简单的例子,v2ex 某帖子有 2k 的回复,针对每个回复做关键字过滤,不做分页的话,一次跑 2k 势必能感觉得到处理过程,但做成分页,一页十条、二十条,就不会有感觉。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/83579

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX