同为javascript框架，react和angular各有什么优缺点，各自又适合什么开发场景？
按投票排序
对于 Angular 没有在项目中使用过, 只用过同为 MVVM 的 Vue.我花了很多时间在 React 上, 可以看下边两个网站相关的内容React 中文微博: React 中文论坛 Angular 和 React 相同的是 Model Driven View 的套路, 自动维护 View, 减少手工状态维护.把两者都当作是对 Backbone MVP 模式的改进的话, 上边这一点差不多的.不同的地方是 React 采用的方案有点像函数式的做法, Component, Immutable data 等等更着重于将 DOM 封装可以相互组合的 Component, 并且将 DOM 操作抽象为状态的改变.这样抽象之后, 学习和编写复杂应用的成本降下来很多React 的问题主要在它实现功能近似与 jQuery 的 DOM 操作和事件监听,要写完整的应用需要 MVC, 对 React 来说就是后来发布的 Flux 模型,而 Flux 并不是完整的一个框架, 只是 Facebook 发布的一套架构体系所以要写完整的大应用估计还有不少坑要淌过去.. 在这方面 Angular 东西多多了.
我算是用过React没用过Angular，所以正好补充下。首先我现在的经验是Angular和Ember都只玩过TODOMVC的tutorial，React的话自己正在写一个Chrome的App和公司的一个小项目。最近正好有个新项目在评估用Angular，Ember还是React(+Flux)，我随便谈一点自己的浅见。Angular.js首先Angular的背后是Google（难道这就是官网被墙的原因？），所以社区基础是不用担心的，整个生态也已经是非常的完整了，从最基本的Tutorial到StackOverflow的问题数到框架本身的剖析都有非常非常多，所以从这个角度看起来Angular应该算是上手比较容易的。不过Angular目前的问题看起来也很明显1. 性能
同样是TODOMVC的Sample，Angular完全载入用了1.1s（）。目前我用到的基于Angular的就是Kibana，不得不说，确实挺慢的。。2. Angular 2.0
Angular的2.0几乎是一个推翻重做的框架，估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话，会是一个很尴尬的时机。同样，如此大的改动似乎也反面印证了1.X并不是那么好。这篇文章推荐去看看React.jsReact很大的特点就是“轻”，再加上这个很好的idea让React非常非常快（在上面那个测试里面0.3s左右就载入完毕）。另外React和Angular一个很大的不同就是React采用的是one-way data flow。React的缺点嘛，大概就是现在还太新了很难说将来有没有大的API变化，目前在大的稳定的项目上采用React的，我也就只知道有Yahoo的Email。所以现在很少有批评React的声音也许不是他真的就没有坑，而是那些坑还没有被踩出来而已。还有就是React本身只是一个V而已，所以如果是大型项目想要一套完整的框架的话，也许还需要引入Flux和routing相关的东西。React的我没有研究过，但是Flux的话已经有出现一些了。总结Angular是真正的大而全的framework，他有自己一套思路，基本你follow这个思路往里面填代码就OK。React是一个简短有力的library，他只负责解决你某个单一的“痛点”。
react不是框架， 可以在这里看到他的介绍。 所以这两者不适合在框架这个层面比较。angular 是MV* 框架, react是用来构建可重复使用的UI组件的， 可以看成是个提供工具的library。react 可以和 angular 的 directive做比较。 这样比较的话， react是比angular directive 在组建UI上更powerful的。angular 是最适合CRUD的SPA 单页面的应用程序。 和 angularUI 一起使用就可以搭建还不错的web app.要真正理解react和angular 还要对比使用才可见一斑。 可以参见这个博客, 这个博主把react tutorial里面的一个例子用angular重新写出来了这个angular 写的源代码在这里 原来的tutorial 用 react 写在这里在这里，这个tutorial
的源代码在这里 我觉得两者比较区别还是非常明显的， angular 从 MV* 这个角度看很清晰。 我没使用过react, 所以可能对他的好处看不太出来。 就这个例子来讲， 我会直接用angular, 不会考虑使用 react. 希望有用过react的业界其他人士补充一下。
做界面，其实是在和状态打交道。你点击一个按钮，出现一个下拉菜单，这里界面的状态从下拉菜单隐藏变到了下拉菜单显示，你可以用 { dropdown: true/false } 来表示这个状态。 前面这个对象在 angular 里面就是 $scope，在 react 里面就是 this.state。这里是两者相思的地方，维护背后的状态，界面能自动更新。 而 react 的好处在于，它够简单直观。所有的状态改变都只有唯一一个入口 this.setState()，angular 就太复杂，我搞不清状态是在哪改变了，也不知道它背后都用了哪些黑魔法。
前两个月刚刚完成一个angular的项目，感触就是angular能够让程序员真正专注于业务逻辑，对js能力要求也不高（基本上只需要写业务逻辑，实在用不上那些高级的js技巧和知识呀），而且因为对html侵入不大，非常易于和designer协作。====2015/06追加=========
React是目标是UI组件，通常可以和其它框架组合使用，目前并不适合单独做一个完整的框架，想了解React在开发中实现什么样的角色，可以看看这个实际的简单编程例子：
如果做应用系统，angular的生态环境已经成熟 yeoman bower gulp可以很快的把架子搭起来如果做互联网前端，reactjs的模块化 + vdom + 搜索友好 可能就更合适
更新一下：还是redux 好用。backbone已经被我淘汰，因为太hacking react + backbone, 个人感觉非常灵活，debug也变得更容易，速度也够快。angular学习曲线其实比较陡，你觉得有时间折腾就搞吧，个人更喜欢react的便捷
reactjs和angularjs在某种程度上可以看出fb和google两家公司的文化facebook喜欢独立，小巧，快速，创新。抛开flux,react route不谈，reactjs作为view本身非常独立，不仅可以在浏览器上用，还可以在server端结合nodejs做模板。除了独立，reactjs还很灵活小巧，用起来像拼lego的积木，一个component接着另一个component。在性能方面，由于运用了virtual dom技术，reactjs只在调用setstate的时候会更新dom，而且还是先更新virtual dom，然后和实际dom比较，最后再更新实际dom。这个过程比起angularjs, knockoutjs的bind方式来说，一是更新dom的次数少，二是更新dom的内容少，速度肯定是快了的。另外reactjs用了jsx，这个相当于半个新语言了。google发展全面，组织结构清晰，分工明确，业务扩展虽缓慢，但是发展良好。angularjs是一个m-v-whateever framework。framework的一个特点就是很全面，除了m-v-whatever面面俱到，它还自带了很多$开头的service，$http, $route, $q(defer),$cookie等等，基本上只要你在做web开发用过的东西，它都有一个。angularjs的架构清晰，分工明确，model，view，controller谁在什么时候做什么事情说的很清楚，整个框架充满了DI的思路，耦合性非常低，对象都是被inject的，也就是说每个对象都可以轻易被替换而不影响其他对象。此外，angularjs的扩展性不错，但是略微有点笨拙，你可以自定义directive，当然如果嫌麻烦，只封装到controller+html很多时候也够了。至于应用场景根据上述总结，我个人觉得企业项目，或者说业务比较正规的用angularjs比较好。对于那种倾向于比较好玩的，有趣的，有创意的项目用reactjs比较好。企业文化这东西还是很重要的，这两个东西一直做下去，reactjs会越来越像fb，angularjs会越来越像google。
AngularJS是一套完整的框架，借鉴了很多后端的概念，熟悉服务器端MVC的工程师上手会很快。AngularJS适合较大规模的业务系统，水平一般的大团队是AngularJS做项目会很舒服，前提是团队有对AngularJS比较深入了解的人。ReactJS更关注UI的组件化，和数据的单向更新，提出了FLUX架构的新概念，现在React可以直接用Js ES6语法了，然后通过webpack编译成浏览器兼容的ES5，开发效率上有些优势，前提是你要适应React的开发方式。React Native生成的App不是运行在WebView上，而是系统原生的UI，React通过jsx生成系统原生的UI，iOS和Android的React UI组件还是比较相似的，大量代码可以复用
react本身只是view层！本身只是view层！本身只是view层！因为很重要所以说三遍！angular有自带的数据绑定、渲染、事件管理、路由、ajax……等等一系列工具，但是这些东西react自身都没有。react实际上只是提供了一套编写dom组件的工具，并且与原生一样，可以在组件上添加事件、操作数据，由于它是在内存中而不是在实际页面里实现的dom，所以性能极佳。但是由于缺少了太多其它成分，并不能称之为一个完整的框架（当然这里没有讨论flux）。但是它的伟大之处就在于，提出了virtual dom这种新颖的思路，并且这种思路衍生出了react native，有可能会统一WEB/NATIVE开发（虽然我觉得阻力重重）。------------更新--------------这半年时间里我把两个用了一遍，其中react用的是redux框架。感受如下：Angular生产效率高，很多情况下其实你根本不需要考虑什么双向绑定导致的逻辑混乱，因为实际生产中遇到的大都是 逻辑较为简单的绑定。单向数据流什么的想法非常好，但是写起来太！麻！烦！了！我只想变更个很简单的数据还要经过action、dispatcher、store、view四步，angular里一行代码就搞定的事情这里却如此麻烦。而且我感觉单向数据流这种模式和“事件发布/监听”模式其实没有太大的区别。Angular 1.x版本其实是个比较旧的东西了，现在看来有些理念过时了，比如依赖注入、自己独特的模块化，这些东西其实在ES6下已经很好地被解决了。React 即使配上 Flux 的组合，也不能称之一个完整的框架，比如你想用Promise化的AJAX？对不起没有，自己找现成的库去。而且第三方组件远远不如Angular多。现在觉得React就像一把精心打造的日本武士刀，在 某些特定场景下非常好用，但你想拿它来切瓜切菜？虽然可以，但总感觉哪里不对。Angular更像是一把玄铁菜刀，虽然有点重，有时还会钝（脏检查导致性能不高），现在看起来也有点过时了。但是适应性强，效率高，能比较好地应对90%的需求。
讲的都很好
我从“出身”来说下吧react的诞生是为了解决实在的FB scale后的问题angular是Google的天才们YY的
HELLO,ZHIHU
两大坨屎比有意义吗过2年连google facebook自己都不用了
用过A 第一天接触R看了R官网的Tutorial 和将R的Tutorial 用A改写的Demo感觉是A读起来更直观 直接看html就知道页面大概长啥样R前前后后过一遍才看明白会生成怎样的Html (或者把应用跑起来，在浏览器里面看)再从编码过程来想如果用A 拿到设计图就可以直接用html 写出页面 再做动态效果 表单的话双向绑定很爽啊如果用B 是不是要先思考将页面分成各个组件 然后每个组件要写一段代码来create 最后render 有点晕 但是当组件足够用的时候 (例如像Bootstrap里面各个组件都能直接用的时候) 页面之间复用起来是不是就能很快了还需要多实践一下R的思路 可能也不错 入门中。。
1. 2013年末的时候玩得 Angularjs， 当时折腾了一个星期。它引入了一堆的Concept，乱七八糟。Mental Model 过于复杂。我的感受是： what the fuck!!!这东西真的不是google故意放出来坑其他公司的嘛？前端已经这么乱了，还来这么一套。这两天由于要做一个Web客户端的项目，又看了一下Angular，发现这个社区基本没有长进。Core Team 基本都玩 Angular 2去了吧。Angular 1的设计算是彻底失败了。不知为什么会忽悠到这么多关注度。可能Angular引入的这么多concept，对于入门级的前端童鞋来说，不明觉厉？2. 由于受到 Angularjs 的影响，对于Reactjs 我也一直存怀疑态度，以至于都懒得去了解。因为这两天在调研，所以就顺带看了下。配合 react-route 和 flux 架构，辅以webpack，感觉就是： Awesome!! 非常Nice 的API，比 Angular 那一堆的 $*** 强太多了。做同样一个事情，使用 Angular，我用了将近一周的时间，才能勉强开动，看了好久文档，还是写不好directive，不断要翻文档。React只花了两个小时，已经可以用JSX写大部分的组件了，畅快无比。
React isn't an MVC framework.
React这种虚拟DOM的实现，性能肯定优于Angular，而开发大项目或者比较正规的项目，建议还是使用Angular，终归比较简单实用，React社区的活跃度会推进开发，但它的思想并不适合纯粹的前端开发者(虽然如今的前端逐渐脱离切图仔的身份)。我是Angular用户，对React没有项目实战，但我觉得对于移动端，React比Angular更有潜力，而且FaceBook比Google更看重JS，所以完全可以选择React，issue已经完全可以帮助你解决常规的问题了
没用过React，不过Angular的确很省心，通过two way data binding和directives 能够让人从前端开发各种细节中解放出来，而 MVC模型更能让整个前端结构清晰。
AngularJS 1.X 推倒重来，AngularJS 2.x 不是要重写游戏规则直接拿来用！最火的前端开源项目（一）
发表于 08:57|
来源CSDN编译|
摘要：对于开发者而言，了解当下比较流行的开源项目很是必要。利用这些项目，有时能够让你达到事半功倍的效果。为此，本文整理GitHub上最火的前端开源项目列表，这里按分类的方式列出前九个。
对于开发者而言，了解当下比较流行的开源项目很是必要。利用这些项目，有时能够让你达到事半功倍的效果。为此，本文整理GitHub上最火的前端开源项目列表，内容涵盖了、
、、、等，这里按分类的方式列出前九个。
详细内容如下：
一、Architecture
网站架构，一般认为是根据客户需求分析的结果，准确定位网站目标群体，设定网站整体架构，规划、设计网站栏目及其内容，制定网站开发流程及顺序，以最大限度地进行高效资源分配与管理的设计。
：该方法可以让开发人员快速开发出网站，延长网站的寿命；保持代码的重用性
：以原子的观点设计系统架构，从具体到抽象构建系统架构
托管地址：
：是一个事件驱动的架构，利用可重用的部件，开发可扩展的应用程序&
：提供一个可扩展的JavaScript架构，帮助你对JQuery/Zepto代码进行模块化。&
二、Workflow&
工作流就是一系列相互衔接、自动进行的业务活动或任务。一个工作流包括一组活动及它们的相互顺序关系，还包括流程及活动的启动和终止条件，以及对每个活动的描述。
：为开发者提供一系列健壮的工具、程序库和工作流，帮助他们快速构建出漂亮、引人注目的Web应用。&（3）
：是一个基于任务的关于JavaScript项目命令行构建工具（4）前端处理——扁平化构建与自动化
：是一个CSS的冗余分析仪，用于分析冗余
：通过JavaScript工具扫描网站，显示未使用的CSS
：是一个客户端应用程序框架，可以帮助那些不想订阅特定客户端的MVC框架，却想使用该框架的用户。
：是一个针对HTML5应用的汇编程序。
&：它是内置在JavaScript中的任务自动化的工具。
三、Frameworks
FrameWork即架构，提供了软件开发的框架，使开发更具工程性、简便性和稳定性。1.JavaScript篇JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能。
（1）Angular：&是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。
托管地址：
学习资源列表：
（2）jQuery：是一个兼容多浏览器的javascript库，核心理念是write
less,do more(写的更少，做的更多)。
（3）Backbone：是一种帮助开发重量级的javascript& MVC
：是一个新鲜出炉的现代网站开发平台，基础构架是 Node.JS + MongoDB，它把这个基础构架同时延伸到了浏览器端，可以同时在服务器端和客户端无差异地调用，本地和远程数据通过 DDP（Distributed Data Protocol）协议传输。
的最佳学习资源
by Facebook
：是一个事件驱动的Web框架，源于Twitter
：是开发单页Web应用程序
：通过应用模型-视图-视图-模型（MVVM）模式，简化动态JavaScript的用户界面
：是一个很小的JavaScript框架，为开发JavaScript应用程序提供一个基本的架构。
：是一个框架，使用该框架创建Web应用程序。
：针对于JavaScript应用程序的MVC框架。The real MVC、The Smalltalk MVC、The Gang
of Four MVC。
r：是一个前端开发框架构，专为构建高级前端而设计的
：轻量级且强大的数据绑定+模板解决方案为了创建Web应用程序。
2.CSS篇CSS称为“风格样式表（Style Sheet）”，它是用来对网页风格进行设计的。（1）（2）Twitter Bootstrap：是一个基于HTML，CSS，JAVASCRIPT的简洁灵活的 网站前端框架及组件包。：&Bootstrap资源列表Widgets：针对Bootstrap或 jQuery UI的JavaScript消息提醒机制：是基于Twitter Bootstrap开发的一个小型的JavaScript库，用来创建简单的可编程对话框：扩展自原生的Bootstrap对话框并提供一些额外的功能：动态分页的jQuery插件：基于Bootstrap实现各种方向的箭头图标：能够让你在页面上创建可编辑的元素（3）Themes：免费的Twitter Bootstrap主题：付费的Twitter Bootstrap主题：深色主题：一个基于Twitter Bootstrap的jQuery Mobile主题Wordpress：是一种使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL 数据库的服务器上架设自己的网志：&Metro风格的Web框架： Windows 8的主题风格&：只需点击 "Generate" 就可以编译 Bootstrap CSS文件（4）Misc ：一些混合项内容
：一个工具包主要是启动Web应用程序和网站
：为Twitter Bootstrap设计标志性字体
：为Bootstrap HTML/CSS/JS框架设计元素及代码片段
：&使用Adobe kuler / COLOURlovers颜色方案生成一个漂亮的Twitter Bootstrap主题
：一个针对Twitter Bootstrap的Google风格主题
：一个强大的、可扩展的、基于Sass、BEM、OOCSS框架四、Cross Browser（1）（2）（3）五、Cross Device（1）Reponsive&+&TablesEventsImagesText：该插件能够对文本大小自动调整：字体能够随着屏幕的大小进行自动调整（2）E-Mail（3）MobileFrameworks：为移动设备的优化触摸屏Web&Framework&：支持包括 iPhone、Android 等手机，提供一系列功能为手机浏览器WebKit服务的jquery插件。EmulatorsScrolling：是一个 jQuery 插件，用来最小化 iPhone 和 iPad 上的页面滚动效果处理。Gestures：&jQuery 插件允许你添加手势事件，比如： ‘pinch’、‘rotate’、‘swipe’、‘tap’ 和 ‘orientationchange’&：是一个多点触摸手势库。：是一个高度可配置的jQuery插件。&：是一个基于&jQuery小型库，允许在触摸设备上使用的复杂手势DOM Objects Manipulation：一个JavaScript插件触摸设备，允许多点触控Tap Acceleration：是一个简单、独立的库为触屏Web浏览器调用tap事件：是一个简单、易于使用的库，在移动浏览器上的实际反应与单击事件之间消除300ms的滞后性Layout&：允许为任何元素做触摸控制：是一个jQuery插件，可以控制一隐藏页面的显示与关闭&：是一个轻量级的移动滑动组件，支持1：1的触摸移动、阻力以及防滑：加速移动触摸滑块与硬件之间的转换：是一个非常重要的jQuery插件，为小屏幕提供的栈表，这在移动设备上具有重要的作用Reacting to Device Sensors：是一个jQuery插件为创建图片动画，可响应倾斜或鼠标事件iOS（4）Printers
六、Patterns & Snippets
（1）（2）（3）：是一组基本的网站概念、组件、插件和布局，以最小的风格易于适应和使用
七、DOM ManipulationDOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予Web开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对像。
（1）：为编写HTML5移动Web应用程序提供的超级微小的DOM库（2）：提供一个更轻量级的库替代如jQuery、Prototype和Zepto库
八、Typography
（1）（2）（3）（4）：获得免费使用Web字体（5）：在你的网站上轻松使用商业性的Web字体（6）（7）（8）（9）（10）（11）（12）（13）（14）（15）（16）（17）：是一个智能截断文本jQuery插件（18）（19）：提升网站的排版功能九、Services (免费的、商业化的)（1）（2）（3）（4）（5）（6）（7）（8）（9）（10）（11）文章来源：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;
欢迎您订阅我们的技术周刊
我们会向您分享我们精心收集整理的，最新的行业资讯，技术动态，外文翻译，热点文章;
我们使用第三方邮件列表向您推送，我们不保存您的任何个人资料，注重您的隐私，您可以随时退订,
欢迎分享您的观点，经验，技巧，心得
让我们一起找寻程序员的快乐，探索技术, 发现IT人生的乐趣;
本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG，请即时告知我们： ourjs(
订阅邮件周刊
JavaScript MVC框架的未来：Backbone.js还不够优秀
注意 转载须保留原文链接，译文链接，作者译者等信息。&&
作者：Vyacheslav Egorov (@mraleph)注* MVC模式（Model-View-Controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。相关阅读：注* 一篇相反观点的文章： Om 介绍我们都知道，ClojureScript出来已经有一段时间了 —— 我们用Java写的那些解决方案通过Clojure不需要改动即可以在Web端直接使用。现代JavaScript引擎已经有了很长足的发展，现在JS引擎比Java虚拟机快2.5倍已经不是什么新鲜事了。等等！你不想知道JavaScript MVC框架在数据持久化方面的性能究竟如何吗？原因后果我们将看到，或者从直觉上感觉到，新的Om库能像Backbone.js那样持久化数据，不需要任何手动优化就可以生成一个性能出众的JavaScript MVC结构。Om是从Facebook一个非常伟大的框架上建立起来的。如果你从来没有听说过它，我建议你看一看。非常有意思，Om的性能提升比直接使用React的更大。这些评测(benchmarks)不是去证明Om是世界上最快的UI组件。设计这些评测的目的是为了防止违反全局优化的事情产生，而且尽量避免你的用户犯同样的错误。你当然可以一个一个的在客户端解决这些问题，但重点是比起枯燥乏味的手工优化，Om的提供的组件优化更加方便。测评竞赛在第一个标签页（tab）里打开Om的TodoMVC，并跑第一个测评Case。他在我的11寸苹果机上使用500毫秒产生了200个todos(待完善任务列表)。在Chrome和火狐中，Om在我的机器上会快2~4倍。如果你关掉所有的todos你会感觉稍微自然一点，但是Backbone.js会感觉有点卡。这是因为只有当requestAnimationFrame事件触发时，Om会重新渲染。这个在你的程序里面是一个很好的优化方案。打开Chrome的开发者工具，切换到性能（profile）的图形化界面，然后你会得到一个令人吃惊的信息，React/Om的性能远远高于使用Backbone.js的性能。这是React/Om的：这是Backbone.js的：这张图表似乎表明，至少从我的角度观察来说，React/Om更适合全局优化。好吧，干的不错。但是在三种主流浏览器中快了2~4倍，这会让任何一个人都产生兴趣，尤其是当我们在持久化数据的时侯，不过他离Twitter宣称的快30~40倍还差得很远。试试第二个测评实例：他会产生200个todos，然后全部轮换5次，最后再删掉他们。我的11英寸苹果机上的Safari 7用了大约5豪秒渲染完成。然后确定你在Backbone.js里删除了所有的todos，再跑一下Backbone.js的评测。在我的机器里，Safari使用了大约4200毫秒。这怎么可能？很简单Om不做他不需要做的任何事，视图（Views）和控制器逻辑（Control）并没有绑定在一起。如果数据（data）发生了改变，不会立即触发渲染事件(render view)响应－我们只是通过requestAnimationFrame推入了一个渲染任务到列表里。Om把浏览器当成GPU考虑了。我怀疑很多JS MVC框架都跟Backbone.js TodoMVC差不多，会对model的改变进行绑定，视图（view）方面，其实将一系列的app的状态改变放到localStorage中是非常不方便的，只有很少的框架会去关注这些用户根本不关心的方面。因此这样结果就并不令人吃惊了，主流的做法都是使用字符串来实现模板(templates)，CSS选择器的，还有对DOM元素的直接操作，这些直接导向型编程都成为了性能瓶颈，使Om远远地超过了他们。当然你仍然可以使用Backbone.js或其他你喜欢的JS MVC来实现映射绑定，这样的绑定很有价值。但是我并不认为事件导向型的MVC系统是值得的－上面的性能图表已经说明了这一点。数据models和视图views抽象分离只是比较重要的一步。希望这篇文章能给那些JS MVCs迷们，甚至那些坚持使用原生JavaScript或jQuery的人一些启发。我已经展示了一门需要编绎成JavaScript的语言（尽管他的性能可能会比原生的差一点），但给最终用户体验带来非常明显的提升。排在前列的Om TodoMVC,只用了260行代码（包括所有的模板），并且最终的压缩包只有63K（包括27K的React框架）如果你是一名JavaScript程序员，仔细研究一下React是非常值得的。我认为将来通过数据绑定的框架（像mori）可以使JS应用跑在任何设备上。当然持久化数据会产生更多的垃圾内存，我认为现代JS引擎和移动硬件足以处理这样的缺陷。下面是一些技术细节它的工作原理修改和查询DOM结构是巨大的性能瓶颈，React避免了这种牺牲性能的操作。他设计了一系列面向对象的接口，但是所有的操作都已经被封装了，程序员仅需要关注他的业务逻辑。他会产生一系列虚拟的DOM视图，如果你的应用改变了DOM的状态，并且在一段时间之后这种改变还存在，它才会在DOM上面做一些不得不做的最小改动。Om使用ClojureScript数据结构来替代JavaScript Objects。正因为如此我们可以设计一些实现shouldComponentUpdate的接口来快速地检查DOM是否改变，引用匹配检测。所以当路径发生改变时，我们总能即时的从源头开始检测。所以我们不需要像setState一样的React操作，这样的方式既能很好的OO，又不损失性能。因为是从根部自顶向下更新的，所以他可以像闪电一样快。最后，因为只需要一部分数据我们就可以得到整个UI的状态，我们可以序列化（持久化）所有重要的APP状态。Om UI的状态永远是序列化的。这也意味着Om UIs随时可以撤消。你可以简单的在内存中截取一种状态，然后恢复他。这是内存级别的效率，因为ClojureScript数据结构都是引用类型的。最后的思考简单来讲，我并不认为现在的JavaScript MVCs会有多好的前景。我认为如果你坐下来思考一段时间，最后总会想出来一个类似React/Om的东西（即便它仍然套着传统mvc的外衣）,这个框架同样也会给你带来简单，性能，快速的提升。这里没什么特别的技术，如果你把浏览器当成一个远程的渲染引擎，然后不把它当成一个查询和存储东西的仓库，所有的东西就会变得很快。听上去是不是有点耳熟？对，这个就是计算机图形处理编程。未来我可能会发表更多的文章，来更深地阐述那我已经提及或者未提及的内容：UI状态VCR回放，琐碎的UI指令，服务/服务器端模板共享，用户界面关联等等。
原文地址：
&热门文章 - 分享最多
&相关阅读 - 技术前沿
&关键字 - 分享
&欢迎订阅 - 技术周刊
我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私，您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐，探索技术, 发现IT人生的乐趣;
我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊}