noob_Noob选择JavaScript框架指南

noob

在选择正确JavaScript框架时，无疑是一个令人困惑的混乱局面。 本指南将帮助您-一位崭露头角的前端开发人员-在时间到了选择适合您的框架的时候，驾驭那些晦暗的水面。 我选择展示的每个框架都将描述简要的基础知识，语言语法，还包括有用的学习资源。

什么是JavaScript框架？

在我们的开发世界中，“框架”可以定义为一个JavaScript库，用于显示和呈现数据驱动的交互式界面。 它们的存在是为了在触发交互时帮助将数据呈现给用户。 所有这些库之间的库略有不同，但是它们的目的是相同的。 发生互动时显示新数据。

让我们更深入地研究这些强大的框架，以帮助我们更好地筛选环境。

JavaScript框架播放器

选择框架时有很多选择-接下来是当前地形的列表，包括Vue，React，Angular和Ember。 根据社区的发展和可持续性，GitHub的活动，开发人员可以使用该项目的时间以及开发人员和开发公司是否仍在使用该项目来选择每个项目。

Vue

第一次提交 ，2013年7月27日
档案大小 ：27.5KB缩小

Vue声称这是一个渐进的框架，平易近人，用途广泛且性能卓越。 如果您对良好的Web堆栈（HTML，CSS，JS）有基本的了解，那么您已经可以使用Vue。

“核心库仅专注于视图层，非常容易拾取并与其他库或现有项目集成。 另一方面，当与现代工具和支持库结合使用时，Vue也完全能够为复杂的单页应用程序提供支持 。” – VueJS 简介文档

关于语法，这是库将使用其简单的“ Hello World”演示提供的内容：

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

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

使用标记中的“属性值”，该库也将变得更具表现力。 这是使用这些属性的更复杂的语法：

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

除了语法以外，Vue.js将允许处理用户输入，构建组件模板 ，使用条件和循环将数据绑定到DOM的结构以及通过在Web组件上松散建模的直接语法实现的“声明式呈现” 规格 。

学习资源：

• 无论您是经验丰富的编码人员还是希望使用新的前端开发技术的网站设计师，都可以通过我们完整的Vue.js教程指南学习Vue.js。

React

第一次提交 ，2013年5月29日
文件大小 ：7.3KB（最小）， 带有附件 ：11.3KB（最小）

React定义自己为一个JavaScript库，用于构建由动态数据驱动的接口。 它是由Facebook员工开发的，也是GitHub上的开源程序。 当我说要用 JavaScript编写HTML时，您可能会感到有些毛骨悚然，但是不幸的是，这就是React的工作方式 。

让我们直接看一下React intro教程文档中的语法示例。 这个示例创建了React所谓的“组件子类”，尽管它也具有几种不同类型的组件。 您将在以下HTML代码中注意到，组件调用的语法类似于XML：

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文档还建议将React与Babel一起使用，以允许在JavaScript代码中使用ES6和JSX 。 还有一个方便的针对Chrome和Firefox的 React Devtools扩展，可让您在浏览器的开发工具中检查React组件树。

学习资源：

• 对初学者的React Wes Bos
• Tuts +上的React.js入门
• 教程：Retro简介

角度的

首次提交 2014年9月18日（GitHub报告）
初始版本 （根据Wikipedia ）2010年10月20日
文件大小 ： CLI工具 。 不再需要独立的JS文件。

Angular由Google团队开发。 由于HTML从来都不是动态语言，因此Angular通过允许在标记中扩展属性来扩展HTML词汇表。 最终，这允许对事件进行“声明性绑定”，以便基于交互显示动态数据和状态。 通过在RxJS ，Immutable.js或其他推模型上构建数据模型，可以满足大数据需求。 您可以使用自己的组件扩展模板语言， 并使用各种现有组件。

“学习一种使用Angular构建应用程序并重用代码和功能来为任何部署目标构建应用程序的方法。 对于网络，移动网络，本机移动和本机桌面。”

就HTML属性和类似Mustache的占位符而言，Angular语法并不是什么新鲜事物，除了使用ng-的命名空间ng-如以下示例所示：

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

Angular还主要由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从上面的例子中被写入打字稿 。 一种从JavaScript的相同语法和语义开始的语言。 它是JavaScript的超集，可编译为JavaScript，或者您可能会认为是“语言增强器”，即语法糖。 在需要编译代码时，CLI工具将在此提供帮助。

学习资源：

• 在Tuts +上使用Angular 2入门
  
• Tuts +上带有Angular 2的现代Web应用程序
  
• 在angular.io上学习Angular
• Angular资源 angular.io
• Egghead.io上的Angular2

余烬

第一次提交 ，2011年4月30日
档案大小 ：

Ember是一个类似于我们已经讨论过的库，它也与Handlebars集成在一起。 对于那些不熟悉Handlebars的人来说，这是一种用于构建静态页面的模板语言，就像您可能对Jekyll熟悉的那样。 开发人员可以使用Handlebars来描述标记，并可以使用JavaScript基于交互作用为组件实现自定义行为。

“ Ember是一个用于创建单页客户端Web应用程序JavaScript应用程序框架，该框架使用模型-视图-控制器（MVC）模式。”

Ember是使用Node构建的，并使用各种Node.js模块进行操作。 Ember还具有一个命令行界面工具（如果需要，可通过npm安装），该工具提供标准的项目结构和一组开发工具，包括附加系统。 它还与开发服务器打包在一起，并且可以通过命令行传递构建环境标志。

依赖于我们在JavaSript中非常熟悉的对象文字和点符号，再加上用于模板调用的Handlebars，Ember的语法看起来并不稀奇。

import Ember from 'ember';

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

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

上面的示例是语法和文件结构的非常基本的味道。 演示代码将导出并扩展Ember控制器 ，并将名称从对象文字编译为标记。

还值得一提的是， Ember的路由器功能使您可以停止网络中断。 默认情况下，您在创建的每条路由中都会获得URL和一个后退按钮，并且该API易于使用（熟悉服务器端Web框架的人都很熟悉）。 Ember.js是免费的开放源代码，并且将始终保持其网站上的状态。

学习资源：

• 关于Tuts +的EmberJS框架基础
  
• 在Tuts +上进入EmberJS
• emberjs.com上的EmberJS 指南
  

结论

框架的选择总是归结为个人编码偏好和对项目长期的信心。 如果您想更深入地了解X与Y来做出选择，Vue在其网站上进行了不错的解释和比较 ，其中还包含有关其他库的信息，例如Knockout，Polymer和Riot。 您可能还想参加我们的测验，这可以帮助您缩小选择范围！

翻译自: https://webdesign.tutsplus.com/tutorials/the-noobs-guide-to-choosing-a-javascript-framework--cms-28538

noob