10种顶级javascript框架比较-The Top 10 Javascript MVC Frameworks

阳光穿透心脏的1/2处 2021-12-22 09:07 176阅读 0赞

转载于：http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

Gordon L. Hempton是西雅图的一位黑客和设计师，他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架，并[在博客中总结][Link 1]了每种框架的优缺点，最终的结果是，[Ember.js][]胜出。

<table style="width:518px;"> 
 <tbody> 
 <tr> 
 <td>Framework</td> 
 <td> UI Bindings UI绑定 </td> 
 <td> Composed Views 复合视图 </td> 
 <td> Web Presentation Layer Web表现层 </td> 
 <td> Plays Nicely With Others 与其他框架良好协作 </td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#backbone" rel="nofollow">Backbone.js</a></td> 
 <td>✗</td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✓</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#sproutcore" rel="nofollow">SproutCore 1.x</a></td> 
 <td>✓</td> 
 <td>✓</td> 
 <td>✗</td> 
 <td>✗</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#sammy" rel="nofollow">Sammy.js</a></td> 
 <td>✗</td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✓</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#spine" rel="nofollow">Spine.js</a></td> 
 <td>✗</td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✓</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#cappuccino" rel="nofollow">Cappuccino</a></td> 
 <td>✓</td> 
 <td>✓</td> 
 <td>✗</td> 
 <td>✗</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#knockout" rel="nofollow">Knockout.js</a></td> 
 <td>✓</td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✓</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#javascript-mvc" rel="nofollow">Javascript MVC</a></td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✓</td> 
 <td>✓</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#gwt" rel="nofollow">Google Web Toolkit</a></td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✗</td> 
 <td>✗</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#closure" rel="nofollow">Google Closure</a></td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✓</td> 
 <td>✗</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#ember" rel="nofollow">Ember.js</a></td> 
 <td>✓</td> 
 <td>✓</td> 
 <td>✓</td> 
 <td>✓</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#angular" rel="nofollow">Angular.js</a></td> 
 <td>✓</td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✓</td> 
 </tr> 
 <tr> 
 <td><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#batman" rel="nofollow">Batman.js</a></td> 
 <td>✓</td> 
 <td>✗</td> 
 <td>✓</td> 
 <td>✓</td> 
 </tr> 
 </tbody> 
</table>

### 1. Backbone.js ###

[Backbone.js][] 是web人士的最爱和首选.  [GroupTalent][].

**优点pros:** 良好的兼容性. Underscore.js (也比较大量地使用) 则是另一个很好框架. 强大的社区，强劲的势头

**缺点Cons:** Lacks strong abstractions and leaves something to be desired. The entire framework is surprisingly lightweight and results in lots of boilerplate. The larger an application becomes, the more this becomes apparent.  抽象较弱，很多功能亟待增加

### 2. SproutCore 1.x ###

[SproutCore][] is what Apple used on its iCloud initiative. Despite having a horrible name, it is actually an extremely well thought out framework. It is also one of the largest frameworks.

**优点pros:**Bindings support. Solid community. Tons of features. 对绑定的支持，可靠的社区，大量特性；

**缺点Cons:** Overly prescriptive. Hard to decouple from unneeded features. Forces a native-like paradigm. I have a serious problem with any framework which discourages using html for layout.  过度规范，难以和不需要的特性解耦。

### 3. Sammy.js ###

[Sammy.js][] was a smaller framework that I stumbled upon. Due to its simplicity, it almost didn’t make this list. It’s core feature is a routing system to swap out areas of an application with AJAX.

**优点pros:**Simple learning curve. Easier to integrate with an existing server side app. 易于学习，更容易和现存的服务端应用程序整合

**缺点Cons:** Too simple. Not sufficient for larger applications. 过于简单，无法应用于大型应用程序中。

### 4. Spine.js ###

Based on the name, [Spine.js][] is obviously heavily influenced by backbone. Like backbone, it is very lightweight and follows a similar model.

**优点pros:** Lightweight with good documentation. 轻量级，文档很完备；

**Cons:** Fundamentally flawed. A core concept of spine is “is asynchronous UIs. In a nutshell, this means that UIs should ideally never block”. Having built a serious non-blocking realtime application in the past, I can say this is entirely unrealistic unless the backend has something like [operational transformation][]. 它的核心概念“spine”是异步的用户界面，这意味着理想状况用户界面永远不会发生堵塞，而这个基础有缺陷。

### 5. Cappuccino ###

[Cappuccino][] is one of the more unique frameworks, coming with its own language Objective-J. Cappuccino tries to emulate Cocoa in the browser.

**优点pros:** Large thought-out framework. Good community. Great inheritance model.  大型深思熟虑后的框架，良好的社区，很棒的继承模型；

**缺点Cons:** Out of all the languages you could emulate in javascript, Objective-C would be my last choice. This is coming from an iOS developer. I simply can’t get past the idea of programming Objective-J in the browser.  由iOS开发者创建，使用JavaScript模拟Objective-C。

### 6. Knockout.js ###

[Knockout.js][] is an MVVM framework that receives lots of praise from its supporters. It stresses declarative UI bindings and automatic UI refresh.

**优点pros:** Binding support. Great documentation and amazing tutorial system. 对绑定的支持，完备的文档和教程；

**缺点Cons:** Awkward binding syntax and lacks a solid view component hierarchy. I want to be able to reuse components easily. I also feel like identifying as an MVVM framework is deleterious. Hardly any of these frameworks are MVC, but are of the MV\* variety (MVP, MVVM, etc). 绑定语法拙劣，缺少统一的视图组件层级关系。

### 7. Javascript MVC ###

[Javascript MVC][], in the interest of full disclosure, is a framework that I didn’t spend very much time evaluating.

**优点pros:** Solid community and legacy.  可靠的社区；

**缺点Cons:** Awkward inheritance model based on strings. Controllers are too intimate with views and lack bindings. The name is way too generic - the equivalent would be if RoR was called “Ruby Web Framework”.  基于字符串的继承模型很差，控制器与视图关系过密而缺少绑定。

### 8. Google Web Toolkit ###

[GWT][] is a serious client-side toolkit that includes more than just a framework. It compiles Java to Javascript, supporting a subset of the standard java library. Google used it internally for Wave.

**优点pros:** Comprehensive framework with great community. Solid Java-based component inheritance model. Great for behemoth client-side applications.  全面的框架，良好的社区，可靠的基于**Java**的组件继承模型；

**缺点Cons:** Despite what Google says, GWT is not going to stand the test of time. With initiatives like [DART][] its clear that Java is not the future of the web. Furthermore, the abstraction of Java on the client is slightly awkward.  可能无法经受时间的考验，另外，Java在客户端上的抽象有些笨拙。

### 9. Google Closure ###

[Google Closure][] is more of a toolkit than simply a javascript framework. It comes bundled with a compiler and optimizer.

**优点pros:** Use by Google for many of their major apps. Nice component-based ui composition system.  很好的基于组件的UI组合系统。

**缺点Cons:** Lack of UI-binding support. 缺少UI绑定支持。

### 10. Ember.js ###

[Ember.js][Ember.js 1] (formerly Amber.js SproutCore 2.0) is one of the newest contenders. It is an attempt to extricate the core features from SproutCore 2.0 into a more compact modular framework suited for the web.

**优点pros:** Extremely rich templating system with composed views and UI bindings.  很丰富的模板系统，拥有复合视图和UI绑定；

**缺点Cons:** Relatively new. Documentation leaves lots to be desired.  相对较新，文档不够完备。

### 11. Angular.js ###

[Angular.js][] is a very nice framework I discovered after I originally posted this review. Developed by Googler’s, it has some very interesting design choices.

**优点pros:** Very well thought out with respect to template scoping and controller design. Has a dependency injection system (I am a big fan of IOC). Supports a rich UI-Binding syntax to make things like filtering and transforming values a breeze. 对模板范围和控制器设计有很好的考虑，拥有依赖注入系统，支持丰富的UI绑定语法。

**缺点Cons:**Codebase appears to be fairly sprawling and not very modular. Views are not modular enough (will address this in more detail in the cons of [Batman.js][]).  代码的模块性不强，视图的模块化也不够。

### 12. Batman.js ###

[Batman.js][Batman.js 1], created by Shopify, is another framework in a similar vein to Knockout and Angular. Has a nice UI binding system based on html attributes. The only framework written in idiomatic coffeescript, it is also tightly integrated with Node.js and even goes to the extent of having its own (optional) Node.js server.

**优点pros:**Very clean codebase. Has a nice simple approach to binding, persistence, and routing.  代码清晰，绑定、持久化的方法简单；

**缺点Cons:** I very much dislike singletons, let alone the idea of enforcing singleton controllers. Suffers from the same ailments as Knockout and Angular with regards to nested components. I want to be able to declaratively reuse more than just templates. What Ember has over these frameworks is a way to declaratively re-use entire components that are backed by their own (possibly controller-level) logic.   使用了单例控制器。

（注解：英语水平有限，慢慢来翻译）

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/31/2664734.html

[Link 1]: http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
[Ember.js]: http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#ember
[Backbone.js]: http://documentcloud.github.com/backbone/
[GroupTalent]: http://grouptalent.com
[SproutCore]: http://sproutcore.com/
[Sammy.js]: http://sammyjs.org/
[Spine.js]: http://spinejs.com/
[operational transformation]: http://en.wikipedia.org/wiki/Operational_transformation
[Cappuccino]: http://cappuccino.org/
[Knockout.js]: http://knockoutjs.com/
[Javascript MVC]: http://javascriptmvc.com/
[GWT]: http://code.google.com/webtoolkit/
[DART]: http://www.dartlang.org/
[Google Closure]: http://code.google.com/closure/
[Ember.js 1]: http://emberjs.com/
[Angular.js]: http://docs.angularjs.org
[Batman.js]: http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#batman
[Batman.js 1]: http://batmanjs.org/