学习 JavaScript 正确的方式

Question

这是一份为 JavaScript 新手准备的指南，同时也包含了可以给高手学习的最佳资料

虽然本网站的名字是 the right way，但并不代表是学习 JavaScript 的唯一方法。

我们只是将一些顶尖开发者的文章、提醒和技巧收集于此。由于它是由一些非常厉害的网名身上收集而来，故称之为 the right way 或是最佳做法。

开始入门

关于

由网景公司在 1995 年给网景浏览器 2.0 创建的一个当做 HTML 扩展，JavaScript 最初主要的功能就是操作 HTML 文档和验证表单。 在取得这么大的名声之前，JavaScript 被叫做 Mocha，当它第一次发布 beta 版本时它的官方名字是 LiveScript，当被 Sun Microsystems 发布时，被称作这个名字一直到今天。 由于相似的名字，人们老是把 JavaScript 和 Java搞混。虽然两者都有编程的语法结构，但是他们是不同的语言。 和 C、C#、Java不同， JavaScript 是一个脚本语言，也就是说他需要一个 解释器，JavaScript 的解释器就是浏览器。

最新版本

ECMAScript 是 JavaScript 的标准。截至2012年止，所有最新流行的浏览器都可以支持 ECMAScript 5.1。老的浏览器至少会支持 ECMAScript 3。2015年6月 ES6/ES2015 规范已完成。前往阅读 ECMAScript 2015 规范 Ecma International.

JavaScript 的最佳参考版本、参考资料及最新消息可以前往 Mozilla Developer Network.

DOM

Document Object Model (DOM) 是 HTML 及 XML 文档的 API。它提供了文件的结构化展现，让你可以使用脚本语言（如 JavaScript）來更改它的內容及视觉展现。其他更详细的內容 Mozilla Developer Network - 文件对象模型（DOM）.

JavaScript 代码风格

编程风格规范

JavaScript 和其他编程语言一样，有各种版本的编程风格指南。或许大家会推荐 Google Code Style Guide for JavaScript，但我们更推荐 Idiomatic.js

代码检查

现在最好的 JavaScript 代码检查工具为 JSHint。我们强烈建议尽可能的使用检查工具来确认你的编码风格以及设计模式的正确性。

语言精粹

面向对象

JavaScriot 虽然和其他语言在面向对象上面有些不同的地方，但仍然具有面向对象的编程能力。

资源: JavaScript 面向对象编程介绍

匿名函数

匿名函数是在代码运行时动态声明的函数。之所以叫做匿名函数是因为他跟其他函数不同，它并没有函数名称。

资源: JavaScript anonymous functions

函数作为第一类对象

函数是 JavaScript 的一等对象。这意味着 JavaScript 中的函数只是一种特殊类型的对象，并拥有一般对象所具备的能力。

资源: Functions are first class objects in JavaScript

弱类型

对于许多前端开发者而言，JavaScript 是他们所使用的第一个脚本语言和/或解释语言, 对这些开发者来说，弱类型的概念和含义或许像第二天性一样自然; 然而现在网页应用的需求爆炸式增长，致使越来越多的后端开发者必须顾及客户端技术, 大部分此类开发者有强类型语言的背景, 例如 C# 或 Java,因此并不熟悉弱类型语言所带来的高度自由及潜在的缺陷。

资源: Understanding Loose Typing in JavaScript

作用域和提升

作用域： 在 JavaScript 中，函数是我们在声明变量时, 实际的作用域分隔符, 也就是说常见的循环及表达式（如 if, for, while, switch 及 try）并“不能“指定作用域, 这一点有别于大部分的程序语言。因此函数中的这些区块会共享作用域, 这样使得在这些区块内部声明只属于这些函数块的变量行为可能是危险的。

变量提升： 在运行时，所有的变量及函数声明将会被移到函数的起始位置（它的作用域）- 这就是所谓的变量提升。这么说，在作用域的一开始就声明所有变量，以避免因未声明就操作变量造成的未预期错误是一个好的实践。 -这是一个习惯使用支持块级作用域语言的开发者经常遇到的问题。

资源: JavaScript Scoping and Hoisting

函数绑定

函数绑定最有可能是 JavaScript 初学者最少关心的问题, 但当你意识到你需要一个解决方案以在另一个函数中保持 this 的上下文环境时, 你可能会了解到你真需要的其实是函数原型绑定（Function.prototype.bind()）。

资源: Understanding JavaScript’s Function.prototype.bind

闭包函数

闭包是引用独立(自由)变量的函数。换句话说, 闭包中定义的函数会“记住”它被创建时的环境。理解这个概念很重要, 因为它在开发过程中是有用的, 类似模拟的私有方法。它也可以帮助你学习如何避免一些常见的错误，例如在循环中使用闭包。

资源: MDN - Closures

严格模式

ECMAScript 5 的严格模式是一种可选的使用严格变量的 JavaScript 方式。严格模式并非只是一个子集：它特意地在语法上有别于一般的代码。各家浏览器对严格模式的支持也不同, 所以开启严格模式时建议进行功能测试。严格模式的代码与非严格模式的代码是可以并存的, 所以可以自由決定严格模式部分的多少。

来源: MDN - Strict mode

立即调用函数 (IIFE)

一个立即调用函数表达式是采用 JavaScript 的函数作用域产生一个词法作用域的模式。立即调用函数可避免变量从其所在的块内提升到上面的块, 以避免污染全局环境, 并可使用公共方法访问它,同事保留隐私。

这种模式被称为自执行匿名函数，但 @cowboy (Ben Alman) 为它定义了语义上更合适的名字 IIFE 。

资源: Immediately-Invoked Function Expression (IIFE)

设计模式

说明

虽然 JavaScript 有其独有的设计模式，但许多经典的设计模式仍然是可以实现的。

Addy Osmani 的开源书 Learning JavaScript Design Patterns 是很好的学习资料，下面大多数的链接都出自本书。

设计模式

• 工厂模式（Factory）
• 原型模式（Prototype）
• 混合模式（Mixin）
• 单例模式（Singleton）

创建型设计模式

• 适配器模式（Adapter）
• 桥接模式（Bridge）
• 组合模式（Composite）
• 装饰者模式（Decorator）
• 外观模式（Facade）
• 享元模式（Flyweight）
• 模块模式（Module）
• 代理模式（Proxy）
• 揭示模块模式（Revealing Module）

结构性设计模式

• 职责链模式（Chain of Responsibility）
• 命令模式（Command）
• 中介者模式（Mediator）
• 观察者模式（Observer）

行为设计模式

框架模式（MV* Patterns）

底下有一些 JavaScript 传统 MVC 模式及从中衍生出来的模式。

• MVC Pattern
• MVP Pattern
• MVVM Pattern

测试工具

说明

JavaScript 代码测试相关的函数库和框架。

Links

• Mocha 由 TJ Holowaychuk 维护。
• QUnit 由 jQuery 维护。
• Jasmine 由 Pivotal Labs 维护。
• Karma 由 the team behind AngularJS. Mostly by Vojta Jina 维护。
• Intern 由 Sitepen 维护。
• Istanbul JavaScript 代码覆盖率工具，由 Krishnan Anantheswaran 维护。
• Sinon.JS JavaScript 独立测试套件 Test spy, stub 及 mock）。 不依赖于任何的单元测试框架。由 Sinon.JS community 创作。
• DexterJS 模拟函数及 XHR 对象的测试帮助工具，由 Leo Balter 维护。
• AVA Тест-ранер (утилита для запуска тестов) с асинхронными тестами, поддерживается Sindre Sorhus
• Jest Безболезненное тестирование Javascript, поддерживается Facebook

框架

热门

• jQuery jQuery 是一个快速、轻巧及功能丰富的 JavaScript 库。由 John Resig 建立。
• YUI 由 Yahoo 建立！ YUI 是一个免费、开源的 JavaScript 及 CSS 库，用于建立富交互的 web 应用。 已于 2014年8月29日停止更新.
• ZeptoJS Zepto 是一个针对现在浏览器开发的，极简的 JavaScript 函数库，兼容大量的 jQuery API。只要你会用 jQuery，那么你已经会用 Zepto 了。
• Dojo Toolkit Dojo 是一个免费、开源的 JavaScript 工具包，用来建立高效能的网站应用。赞助商有 IBM 及 SitePen。
• Underscore.js Underscore.js 是一个提供整套函数式编程的好工具，同时并不扩展原生 JavaScript 的库。

MV*

• Backbone.js

非常热门的 JavaScript 客户端框架，由 @jashkenas 建立。

• Ember.js

由 @wycats 建立， jQuery 及 Ruby on Rails 核心开发者。

• Knockout.js

使用 Model-View-View Model (MVVM) 构建简单动态的 JavaScript 用户界面。

• Angular.js

由 Google 建立，Angular.js 类似 polyfill 用于 HTML。

• Angular

一个framework.Mobile和桌面。 一种使用Angular创建应用程序的方法，并使用您的代码和技能为每个部署目标创建应用程序。 对于web，移动网站，本机手机和本地桌面。

• Cappuccino

Cappuccino 是一个可以让人简单搭建运行在浏览器的桌面应用的开源框架。

• JavaScript MVC

JavaScriptMVC 是一个包含 jQuery 最佳创意的开源框架。

• Meteor

Meteor 是一个不管菜鸟还是高手都可以在短时间内建立起高质量的网络应用的开源平台。

• Spice.js

Spice 是一个非常小（< 3k）且有可扩展性的 javascript MVC 框架。 Spice 可以轻松的融合任何已有的应用正在使用的技术如 jQuery、pjax、turbolinks、node 或是和任何你正在使用的技术共同顺利工作。

• Riot.js

Riot 是快速且功能强大的轻量客户端（MV*）函数库，用于创建大型的网络应用。 尽管它的体积很小，但却包含以下组成：模版引擎、路由、事件函数库及标准的 MVP 模式，让代码保持模块化。

• CanJS

CanJS 是一个可以让开发复杂应用程序变得简单且快速的框架。 学习简单、轻巧并且不改变你的应用结构，同时更提供一些新的功能，如自定义标签和双向绑定。

函数库

• React

由 Facebook 创建。 React 是一个 JavaScript 函数库，用于开发 Facebook 及 Instagram 的用户界面。 许多人认为 React 是 MVC 中的 V。

• Handlebars

Handlebars 让你可以无痛的建立有语义的模板。

• Dust.js

浏览器和 node.js 的非同步模板。

• Dust.js

Асинхронный шаблонизатор для браузера и node.js.

动画

• Velocity.js

Velocity 是一个和 jQuery 的 $.animate() 有相同 API 的动画引擎。

• Bounce.js

Bounce.js 是一个让你创造精美 CSS3 动画的工具及 JS 函数库。

• TweenJS

一个简单且强大的 JavaScript 函数库，用来建立 HTML5 的。

• Move.js

Move.js 是一个基于 CSS3 极为简单又优雅 JavaScript 函数库。

• Snap.svg

SVG 是一个专门处理交互、高解析度的矢量图，让各种大小的屏幕都能完美的呈现画面。

• Rekapi

Rekapi 不但是一个创建 canvas 及 DOM 动画的 JavaScript 函数库，同时也是新一代浏览器中的 CSS @keyframe 动画。

• Favico.js

用标识、图片或视频来建立你喜爱的图标。

• Textillate.js

Textillate.js 结合许多写的不错的函数库来提供一个容易使用的的插件，让人可以在任何內容中使用 CSS3 的动画。

• Motio

Motio 是一个轻量的 JavaScript 函数库，基于动画和平移建立简单且强大的的 2D 动画。

• Anima.js

使用 Anima 可以让人简单的同时操控近百个对象。 每一个对象都能有仿真的质量及速度效果！

• Anima.js

С Anima очень легко анимировать сотни объектов. Каждый объект может иметь свои характеристики, что упрощает моделирование объектов реального мира.

游戏引擎

• MelonJS

MelonJS 是一个免费、轻量的游戏引擎。 这个引擎集成了地图拼接格式，让关卡设计变得更轻松。

• ImpactJS

ImpactJS 是从2010年底开始发布的可测试及运行的 HTML5 游戏引擎之一。 它保持良好的更新和维护，也用有一定的社区人员支持它。 它除了有两个关于如何使用此引擎建立游戏的书籍外，还有大量的文档可參考。

• LimeJS

LimeJS 是一个可以在各种触控屏幕及桌面浏览器上建立快速、原生体验游戏的 HTML5 游戏框架。

• Crafty

Crafty 是从 2010 年开始就存在的一个游戏引擎。 Crafty 开发 JavaScript 游戏变得相当容易。

• Cocos2d-HTML5

Cocos2d-html5 是一个 MIT 许可的开源 2D 游戏框架。 它是一个 HTML5 版本的 Cocos2d-x 计划。 Cocos2d-html5 的开发者终于让 Cocos2d 可以跨平台。

• Phaser

Phaser 依赖于 Flixel。 由已在 HTML5 社区活跃多年的 Richard Davey (Photon Storm) 维护。

• Goo

Goo 是一个基于 WebGL/HTML5 建立的 3D 游戏引擎。

• LycheeJS

LycheeJS 是一个 JavaScript 游戏函数库，提供原型及 HTML5 Canvas，WebGL 或 原生 OpenGL(ES) 在网络浏览器或本地环境部署的完整解決方案。

• Quintus

Quintus 是一个采用模块化设计的 HTML5 游戏引擎、轻量、使用容易具有简洁的 JavaScript 语法。

• KiwiJS

Kiwi.js 是一个有趣且友善的开源 HTML5 游戏引擎。 有些人称它为 HTML5 游戏引擎界的 WordPress。

• PandaJS

Panda.js 是一个用于手机及电脑，使用 Canvas 和 WebGL 渲染的游戏引擎。

• Rot.js

Rot.js - набор Javascript библиотек, призваный помочь с разработкой ролевых игр (roguelike) для браузеров.

• Isogenic

Isogenic - продвинутый игровой движек, который обеспечивает поддержку соверменных сетей и возможностей HTML5 для разработки многопользовательских игр c взаимодействием в реальном времени. Система основана на потоковой передаче данных и включает в себя мощные возможности по моделированию на стороне клиента на основе дельт-обновлений (передача изменений состояния).