【转】js入门

英文原文

Reposted from 翻译原文. Thanks!

若是你之前有编程经验，可是一名前端JavaScript开发的初学者，那么一系列的术语和工具容易引发混淆。咱们不会纠缠于细节的讨论，而是会纵览当前的“JavaScript生态圈”。这应该足够你找准方向，开启前端开发之旅。

关键术语显示为粗体。若是你想跳到能够工做的样板代码库，那么我已经将个人一些建议整理成了一个GitHub库。

客户端JavaScript是如何工做的，为何要使用它？

关键术语：DOM（文档对象模型）、JavaScript、async、AJAX

为了编写高效的前端代码，你须要对如何综合运用HTML、CSS和JavaScript建立Web页面有一个基本的了解。

当客户端（一般是浏览器）访问HTML页面时，它会下载它，解析它，而后使用它构造DOM（文档对象模型）。JavaScript能够同DOM交互及修改DOM，交互式站点就是这样建立的。这里有一个DOM的基本介绍。

JavaScript是如何包含到页面中的？那是另外一个复杂的问题，但它是以script标签开始的。

JavaScript的执行会阻塞DOM构造。这就是说，执行JavaScript的时间过长会让人以为页面没响应。为了不这种状况，客户端JavaScript常常都是大量使用异步。（你可能据说过AJAX，它就表明asynchronous JavaScript and XML。）

若是你正在构建一个交互式站点，那么你会须要使用JavaScript，你可能会使用这种或另外一种方式处理异步。

框架是什么？我须要使用trendy.js吗？

关键术语：React、Angular、Ember、Backbone、jQuery、Underscore、Lodash

“框架”这个词有许多意思。JavaScript框架的目标一般是减小构建交互式Web页面过程当中无谓的工做。从根本上说，框架就是脚手架，设计用来解决一个特定种类的问题。

许多当前流行的框架都是设计用来解决这样的问题的，“如何建立一个支持复杂用户交互的单页Web应用，并在前端管理全部的业务逻辑？”单页应用或者SPA是不须要刷新页面的Web应用，产品的大部分都是做为一个单独的“页面”而存在——回想下Facebook首页或者Gmail收件箱。

那么该用哪一个框架呢？React? Angular? 仍是Ember?甚至说你须要框架吗？选择麻痹症的信号！

全部这些项目都试图帮你编写更好的Web应用程序。对于选择哪一个框架，没有正确的答案，若是有，你就应该使用。

若是你是刚刚开始使用JavaScript，那么不使用框架可能会更好一些，尝试使用jQuery构建一个站点，其余的少用或不用。那很快就会变得让人厌烦，但你能作到，这会让你了解到一些重要的、有关JavaScript工做原理的东西。你还可使用jQuery践行好的软件工程准则。

若是你正在开发一个至关复杂的站点，那么你会发现框架颇有用。当前，Angular、React和Ember都是流行且明智的选择。Backbone是一个相对较小的老式框架；它也适合于许多项目。我为本文整理的初学者工具包使用了React，但实际上，没有错误的选择。TodoMVC使用不一样的框架实现了同一个清单应用程序，检出它，本身比较一下各类框架。

JavaScript还缺乏许多其余语言内置的标准库函数，像字符串填充或数组重排。为此，咱们一般会使用像jQuery、Underscore和Lodash这样的库来弥补这种不足。按照惯例，这些库在导入后要分别使用$、_和_引用，所以，若是你看到一个JavaScript文件中有许多美圆符号，几乎能够确定这是调用了jQuery。

若是你要开始一个新项目，我建议使用React或者Angular以及Lodash。

我应该编写JavaScript，仍是其余的什么？JavaScript的种类有哪些？

关键术语：ES五、ES六、ES201五、CoffeeScript、TypeScript、ClojureScript、Babel、“转译（transpiling）”、“编译（compiling）”、MDN参考

“JavaScript”实际上并非一门单独的语言。每一个浏览器供应商都实现了本身的JavaScript引擎，因为浏览器和版本之间的差异，JavaScript饱受碎片化之苦。CanIUse.com记录了部分不一致的状况；你也能够查看Mozilla开发者社群里的文档。

ES6又称 ES2015/Harmony/ECMAScript6/ECMAScript 2015，是JavaScript规范的最新版本。它引入了新的语法和功能。胖箭头、ES6类、本地模块和模板字符串都是这个JavaScript版本的一部分。Treehouse提供了一份不错的ES6入门教程。

虽然JavaScript处于一个碎片化的环境，但可以使用新的语言特性也不错。所以，像Babel这样的工具会把你闪亮的标准JavaScript代码转换成一个同旧平台兼容的版本。这个过程称为转译。这同编译没有太大的区别。使用像Babel这样的工具，你没必要太过担忧特定的浏览器是否支持你使用的JavaScript特性。

转译工具不仅是将ES6 JavaScript转换成ES5。还有一些工具能够对JavaScript的变体，如ClojureScript、TypeScript和CoffeeScript，作一样的事情。ClojureScript是Clojure的一个版本，能够编译成JavaScript。TypeScript本质上是JavaScript，但有一个类型系统。CoffeeScript同JavaScript很是像，但有更闪亮的语法；由CoffeeScript建立的许多语法糖都已经被ES6采用，这在很大程度上显得CoffeeScript不那么有用了。全部这些都会编译成普通的JavaScript。

那么你应该使用什么呢？若是你是前端开发的初学者，那么你也许应该编写ES6风格的JavaScript。大部分ES6特性都获得了各浏览器供应商的普遍支持。若是你须要支持相对较老的平台，那么像Babel这样的工具能够替你将ES6编译成兼容ES5的JavaScript。如今先不要考虑闪亮的compile-to-JavaScript选项，如ClojureScript，不过，一旦你有了更多的前端开发经验，那么它们固然值得研究。

 

如何使用其余人的代码？

关键术语：AMD、commonJS模块、ES6模块、npm、Github

在JavaScript中，代码共享和模块的历史有一点复杂。我强烈建议你阅读Preethi Kasireddy的文章“JavaScript模块入门指南”来了解更多信息。

对于咱们而言，术语模块和库基本上是等价的：它们表明大量的自包含代码，咱们能够在本身的项目中使用及重用。JavaScript模块通常经过node包管理器npm发布。你能够在npm或GitHub上搜索JavaScript模块。

模块定义（有时称为模块语法）有几种存在竞争关系的方式，主要包括CommonJS、AMD和ES6原生模块。CommonJS采用一种同步的、面向服务器的方法。相反，AMD（异步模块定义）容许你使用异步、非阻塞的方式定义和加载模块。CommonJS和AMD都是在JavaScript没有原生支持任何模块或依赖概念的状况下建立的。

ES6增长了原生JavaScript模块支持，它既支持CommonJS的声明式语法，又支持AMD的异步加载，还有其余一些特性。终于，模块成为现行语言的一部分。

在工做中，你极可能会遇到全部这三种类型的模块。对于新项目，你该应该使用ES6原生模块。构建工具，如webpack（下面会介绍），会帮助你在现有项目中使用各类类型的模块。

我须要Node.js吗？

关键术语：Node.js、npm、nvm

Node.js是一款编写服务器端JavaScript的工具。等一下，难道咱们谈论的不仅是前端JavaScript吗？

因为JavaScript模块一般在打包后经过node包管理器npm分享，因此你须要安装Node.js，即便你不会把它用于服务器端开发。在OS X或基于Linux的系统上，最好的方式是经过Node版本管理器nvm，这简化了不一样Node.js版本的管理。Windows用户应该看下nvm-windows。

我该用什么构建工具？

关键术语：grunt、gulp、bower、browserify、webpack、“热重载（hot reloading）”、sourcemap

一个script标签接一个script标签地请求将每一个JavaScript依赖做为页面的一部分会很慢。所以，大多数站点都使用所谓的JavaScript bundles。捆绑过程会获取全部依赖，并把它们“捆绑”在一块儿，生成一个单独的文件，包含到页面中。根据须要，有些开发人员还会使用一个“最小化（minifying）”步骤，将全部没必要要的字符从JavaScript代码中去除，而又不改变代码的功能。这能够减小客户端须要下载的数据量。

有些工具还支持诸如热重载及sourcemaps这样的特性，前者会在你保存一个文件时自动在浏览器中更新你的项目，后者提供了一个从捆绑好的JavaScript到其原始形式的映射，简化了调试工做。

本质上讲，我刚刚描述的是一个构建过程。无论是否大多数JavaScript开发人员都这样描述，你都是将代码编译成一个生产就绪的格式。“前端devops”或者管理构建、部署工具及依赖项的过程成为一项日益复杂的工做。

Grunt、gulp、broccoli、brunch、browserify和webpack都是JavaScript构建工具。比较它们很是困难，由于它们每个都致力于解决不一样的问题。它们中有许多使用了不一样的抽象概念来讨论相同的问题，咱们实在是尚未一个共用的术语库。

根据个人经验，开发人员每每对这些工具的配置文件不甚了解，所以就在项目之间粘来粘去。下面是我为初学者库整理的webpack配置文件，供参考：

var webpack = require('webpack');  
module.exports = {  
  entry: [
    "./app.js"
  ],
  output: {
    path: __dirname + '/static',
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
  ]
};

如上，该webpack配置文件指示webpack完成如下工做：

• 启动app.js做为入口点；
• 处理以.js结尾的全部文件；
• 使用babel-loader对它们进行转换，尤为是处理ES6转译（因此es2015 query）和JSX（因此react query）；
• 将全部JavaScript文件捆绑成一个文件static/bundle.js。

对于新项目，我推荐webpack。它有很强的适应性，并且可以很好地处理具备复杂依赖图的大型项目。

我如何测试代码？

关键术语：Mocha、Jasmine、Chai、Tape、Karma、Selenium、phantomjs

同许多其余类型的编程同样，前端JavaScript能够从测试中获益。大多数JavaScript开发人员都表示，他们至少会编写部分测试。

JavaScript缺乏一种内置的框架用于运行测试，所以，开发人员须要依赖外部库。不一样的测试工具致力于问题的不一样方面，这点同JavaScript构建系统很是像。

Mocha和Jasmine是两个流行的库，有时候称为测试框架，能够帮助你编写测试。他们的API十分相似；你描述应该出现的行为，而后使用断言测试它。

describe('helloWorld()', function() {
  it('should greet me by name', function() {
    // 在这里添加断言
  });
});

Mocha实际上没有内置断言库，所以，大多数开发人员都会将它同Chai结合使用。它们的断言语法相似：

// Jasmine
expect(helloWorld("Bonnie")).toEqual("Hello, Bonnie");

// Chai
expect(helloWorld("Bonnie")).to.equal("Hello, Bonnie");

为了运行测试，Mocha提供了一个命令行工具，而Jasmine没有。许多开发人员使用Karma，这是一个测试执行器，既能够运行Jasmine风格的测试，也能够运行Mocha风格的测试。

那很适合单元测试；对于基于JavaScript的集成测试，咱们须要更多工具。在前端领域，集成测试一般涉及使用一个浏览器实际地渲染和加载页面，模拟用户交互，并检查结果。

Selenium是一个Web驱动程序，一般能够用于这些测试。你须要为Selenium配备一个浏览器驱动程序，以便它可以启动浏览器。PhantomJS是一个所谓的无头浏览器——它运行时没有图形用户界面——一般用于测试中。因为它们不须要GUI，因此无头浏览器对自动化测试而言很是有用。你可能会发现Sinon有用；它提供了一个模拟服务器，能够用于模拟AJAX请求的响应。

你还能够设置JavaScript测试同持续集成（CI）系统一块儿运行，如Jenkins或Travis。

JavaScript测试工具备大量堪称完美的选择。对于新项目，我经常选择Karma和Jasmine，并使用PhantomJS做为测试浏览器，但Mocha + Chai也是一个不错的选择。

那么我如何入手呢？

我整理了一个GitHub库，里面包含一个基本的前端开发配置：https://github.com/bonniee/react-starter。

它使用：

• React；
• Babel转译；
• Webpack构建；
• ES6语法（针对React类和模块导出）；
• Karma + Jasmine + PhantomJS测试；

让咱们稍微详细地讨论下。React是咱们使用的框架，它让咱们能够更轻松地建立交互式站点。（你描述UI，React会为你渲染并处理DOM操做。）咱们将编写符合ES6规范的JavaScript代码。Webpack会使用Babel将ES6 JavaScript代码转译成兼容ES5的JavaScript代码。Webpack还会管理依赖和模块导入。最后，咱们使用Karma和PhantomJS运行测试，并使用Jasmine库编写这些测试。

首先，确保你有一个可用的npm版本。而后，安装这个GitHub库的依赖，并开始使用：

npm install

webpack

而后，使用它进行开发，运行：

webpack --watch

这会指示webpack监视项目，并在JavaScript文件变化时从新编译它。想要查看应用程序，就须要启动一个本地服务器。在OS X或Linux上，使用Python很容易作到：

python -m SimpleHTTPServer

……你已经准备好开始了!编辑app.js或Hello.js增长更多的React组件，并使用npm test来运行测试。

固然，有一个能够工做的初始代码库只是成功的一半。前端JavaScript开发领域很复杂，有大量的工具、术语以及新概念须要学习，同时也有大量的问题须要解决。上述任意一个主题都很容易写满一个博客。但愿这篇文章能让你对JavaScript生态圈有一些了解，能在你学习更多有关前端开发的知识时提供一些指导。

欢迎加入社区！

注意：徽标许可

1. React：React-docs许可协议及知识共享归属许可协议
2. Babel：MIT许可协议
3. Webpack：MIT许可协议
4. Karma：MIT许可协议
5. Jasmine：MIT许可协议
6. PhantomJS：BSD许可协议

关于做者

Bonnie Eisenman是Twitter的一名软件工程师，同时也是骇客空间NYC Resistor的成员之一，以前曾在Codecademy、Fog Creek Software和Google工做过。她是*Learning React Native*一书的做者，那是一本关于使用JavaScript构建原生iOS和Android应用程序的书，由O'Reilly Media出版。她曾在若干会议上作过演讲，主题涵盖从ReactJS到音乐编程和Arduinos的内容。在业余时间，她喜欢学习语言，摆弄硬件项目以及激光切割巧克力。她的Twitter帐号为@brindelle。