JavaScript框架选择指南（初级）

当我们开始为项目寻找框架的时候，会发现如今的框架遍地都是。本文能够指导大家如何在前端找到适合自己的前端框架。我们选择了一些框架并在下面会介绍每个框架的基本原理，语法，当然还有一些有用的学习资源。

什么是JavaScript框架？
在前端的预研中，开发一个“框架”一般定义为开发了一个JavaScript库，包括展现，数据驱动，交互接口。当一些交互触发是，框架能够同时改变数据。所有这些框架都有明显的不同，但目的都是相同的；当产生交互时产生新的数据呈现。

让我们深度学习下这些框架，从而帮助我们选择。

JavaScript框架使用者
这里有一些框架供大家选择，包括Vue, React，Angular和Ember。这里选的每一个框架都是有自己健康，成熟的社区，和GItHub的不断更新，经过了一些用户和项目的历练，同时也有很多大项目和公司专门采用这些框架。

Vue



First Commit July 27, 2013 File Size: 27.5KB minified

Vue 一直在上手速度，通用性，性能上不断的提升。所以你基本了解一些web的知识(HTML, CSS, JS)，你就已经可以使用Vue了。

“用户只需要关注页面的展现，使用vue对于别的框架的排斥性不高，对于整合到实际项目中，也比较容易。另一方面，Vue的工具和库)也是能够很好的的处理复杂单页模式的项目。” – VueJS Introduction Docs

再来说下语法，首先看下最简单的“Hello World”demo；

HTML:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
   message: 'Hello Vue!'
  }
})

这个框架在使用属性值上可以变得更有表现力。下面是使用在属性上的另一个复杂语法。

HTML:

<div id="app-2">
  <span v-bind:title="message">
   悬浮鼠标数秒后可以看到动态变化的title!
  </span>
</div>

除了语法，Vue.js也允许处理用户的输入，创建组件模板，构建DOM元素并绑定数据，结合条件判断，循环，并通过直接的语法的“声明式呈现”方法，这种模式参照web组件开发规范。

学习资源:

• Learn Vue 2: Step By Step on Laracasts
  
  
• Build a Bookmark Manager With Rails and Vue on Tuts+
  
  
• Vue.js Fundamentals by DevMarketer
  
  
• Vue Guide on vuejs.org

React



First Commit May 29, 2013 File Size: 7.3KB minified w/Add-ons: 11.3KB minified

React 是一个根据动态数据处理界面的JavaScript框架，FaceBook创建，并将其放在GitHub的开放资源上。对于一个能在js里面写HTML的脚本，你可能会感觉奇怪，不过这就是react的工作方式)。

让我直接看一段react的官方指导文档上的demo。我们可以在这个例子里看到，它创建了一个"组件类"，这个不同于之前的组件或者是类。类似xml的html code语法直接写在了js里面：

HTML:

class ShoppingList extends React.Component {
  render() {
   return (
     <div className="shopping-list">
       <h1>Shopping List for {this.props.name}</h1>
       <ul>
         <li>Instagram</li>
         <li>WhatsApp</li>
         <li>Oculus</li>
       </ul>
     </div>
   );
  }
}

<ShoppingList name="Mark" />

React开始变成了一种可复用的模块化插件。这个插件能够帮我们处理动画，变形，展现各种工具，测试等等。React文档中也建议开发人员在JavaScript使用React同时使用ES6和JSX的代码。这里提2个浏览器的插件，来帮开发人员检查我们的react组件：Chrome和Firefox。

学习资源:

• React For Beginners by Wes Bos
  
  
• Getting Started With React.js on Tuts+
  
  
• Tutorial: Intro To React

Angular



First Commit September 18, 2014 (GitHub reported) Initial Release (According to Wikipedia) October 20, 2010 File Size: CLI Tool. No Longer a standalone JS file.

Angular的开发团队是Google。HTML从创建开始就不是动态语言，而angular则将一些标记植入到HTML的属性中去。为了实现动态绑定数据和基于不同状态的页面展示，最终产生了这种"声明式绑定"事件。你可以基于Rxjs, Immutable.js 或者其他推送方式的数据模型创建你的页面。或者你还可以用你自己的组件继承模板语言，也可以使用组件库已有的组件。

“用angularjs去创建你的应用，可以复用在web，手机web，native mobile和native desktop中。”

angular的语法并没有什么新颖，只是运用了一些属性和占字符，比如用了一个命名空间的ng-，下面这个例子：

HTML:

<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>

Angular是结合着HTML模板和组件的一个类，主要是组件为主，用于控制页面的UI交互。

HTML:

// src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: <h1>Hello {{name}}</h1>
})
export class AppComponent { name = 'Angular'; }

<!-- index.html -->
<my-app>Loading AppComponent content here ...</my-app>

这上面有个扩展文件.ts是一个[TypeScript]的例子。TypeScript是一个和JavaScript的衍生语言。可以理解为语法增强的一种方式，或者说是语法糖。一些命令行工具能够帮助解析这种语言。

学习资源:

• Get Started With Angular 2 on Tuts+
  
  
• Modern Web Apps With Angular 2 on Tuts+
  
  
• Learning Angular on angular.io
  
  
• Angular Resources angular.io
  
  
• Angular2 on egghead.io

Ember



First Commit Apr 30, 2011 File Size: ?

Ember和之前的几种也比较像，但它集成了Handlebars。对Handlebars不熟悉的解释下，这是一种解析静态页面的模板语言，和Jekyll（将纯文本转化为静态网站和博客）比较像。开发人员也是可以根据交互需要，在模板中加入JavaScript代码实现需求。

“Ember是一款JavaScript框架，比较适用于在MVC模式的单页，客户端web应用”

Ember可以被Node创建，并用于nodejs的模块开发。同时Ember也是一个命令行工具（如果你想用，用npm安装），它有一套完整的插件开发体系。它也可以根据命令行创建服务和一些环境变量。

Ember的语法没有不寻常的地方，通过对象去创建我们要的类，并根据Handlebars模板生成页面。

HTML:

import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Trek',
  lastName: 'Glowacki'
});

Hello, <strong>{{firstName}} {{lastName}}</strong>

上面是一个简单的Ember例子。例子里面的代码继承自Ember controller 根据对象的属性值进行编译并生成想要的效果。

这里值得提一下的是Ember的路由Ember’s router capabilities ，它允许在网页中随时停止。就是如果你有地址，根据你创建的路由规则，你就可以跳转到你需要的路由。（这个和服务端实现路由的方式有点像）Ember.js是免费的，开源资源和更新状态都会在Ember的官网看到。

学习资源:

• EmberJS Framework Basics on Tuts+
  
  
• Getting Into EmberJS on Tuts+
  
  
• EmberJS Guides on emberjs.com

结论

框架的选择常常和开发人员个人喜好和对项目的长期眼光去看。如果你想更深的去探讨哪个框架好来帮助你选择的话，Vue有篇文章更为系统的描述了这些框架的差别，还包括Knockout，Polymer 和Riot。你也可以在上面提出你的问题，帮助你进行选择。