開始入門

關於

由 Netscape 於1995年為了 Netscape Navigator 針對 HTML 所開發的擴充套件，JavaScript 主要的功能為操作 HTML 文件及表單驗證。在贏得今日的廣為人知的名字前，JavaScript 原名為 Mocha。在它發布第一次測試版時，官方將它命名為 LiveScript，最後在 Sun Microsystems 公布發行版時，被重新命名為今日廣為人知的名字。由於 JavaScript 名字相近於 Java，所以常讓人搞混。雖然兩者在名字組成上有部分相同，但並不是相同的語言。不同於 C、C# 及 Java，JavaScript 是直譯式語言。這意味者它需要一個“直譯器“。就 JavaScript 而言，瀏覽器就是它的直譯器。

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。我們強烈建議盡可能使用檢查工具來確認你的編碼風格及設計模式的正確性。

語言精粹

物件導向

JavaScript 即使跟其他語言在物件導向方面有些爭論的地方，但仍具有強烈物件導向的編程能力。

來源: JavaScript 物件導向介紹

匿名函式

匿名函式是在程式運行時動態宣告的函式。之所以稱為匿名函式是因為它跟其他一般函式不同，它並沒有給予指定的函式名稱。

來源: JavaScript anonymous functions

第一級物件為函式（function）

函式（function）是 JavaScript 的第一級物件。這意味著 JavaScript 中的函式（function）只是一種特殊型態的物件，並且能做到一般物件所能執行的行為。

來源: 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)

MUST SEE

設計模式

說明

雖然 JavaScript 包含了自身語言獨有的設計模式，但許多經典的設計模式仍然可以實作。

Addy Osmani 的開源書 Learning JavaScript Design Patterns 是很好的學習範本，下面大多數的連結都出自本書。

設計模式

創建型設計模式

結構型設計模式

行為型設計模式

框架模式（MV* Patterns）

底下有一些 JavaScript 傳統 MVC 模式及從中衍生的變形模式的實作。

測試工具

說明

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

框架

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 影格動畫。

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 взаимодействием в реальном времени. Система основана на потоковой передаче данных и включает в себя мощные возможности по моделированию на стороне клиента на основе дельт-обновлений (передача изменений состояния).