【轉】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。