xxholly32

JavaScript框架选择指南(初级)

xxholly32 · 2017-05-16翻译 · 1240阅读 原文链接

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

什么是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;

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

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

<div>
  <span>
    悬浮鼠标数秒后可以看到动态变化的title!
  </span>
</div>

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

学习资源:

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里面:

class ShoppingList extends React.Component {
  render() {
    return (
      <div>
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}
&lt;ShoppingList name="Mark" /&gt;

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

学习资源:

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-,下面这个例子:

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

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

// src/app/app.component.ts

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

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

&lt;my-app&gt;Loading AppComponent content here ...&lt;/my-app&gt;

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

学习资源:

Ember

First Commit Apr 30, 2011 File Size: ?

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

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

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

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

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的官网看到。

学习资源:

结论

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

译者xxholly32尚未开通打赏功能

相关文章