前言
雖然各種框架、庫發(fā)版之快，但并不會阻止部分人去研究應(yīng)用。昨天的文章可能帶給你的是一些前端的名詞解釋，那么今天由@謝麗翻譯的文章可能會給你另一番不同的感受。

正文從這開始～

如果你以前有編程經(jīng)驗，但是一名前端JavaScript開發(fā)的初學(xué)者，那么一系列的術(shù)語和工具容易引起混淆。我們不會糾纏于細(xì)節(jié)的討論，而是會縱覽當(dāng)前的“JavaScript生態(tài)圈”。這應(yīng)該足夠你找準(zhǔn)方向，開啟前端開發(fā)之旅。

關(guān)鍵術(shù)語顯示為粗體。如果你想跳到可以工作的樣板代碼庫，那么我已經(jīng)將我的一些建議整理成了一個GitHub庫。

客戶端JavaScript是如何工作的，為什么要使用它？

關(guān)鍵術(shù)語：DOM（文檔對象模型）、JavaScript、async、AJAX

為了編寫高效的前端代碼，你需要對如何綜合運用HTML、CSS和JavaScript創(chuàng)建Web頁面有一個基本的了解。

當(dāng)客戶端（通常是瀏覽器）訪問HTML頁面時，它會下載它，解析它，然后使用它構(gòu)造DOM（文檔對象模型）。JavaScript可以同DOM交互及修改DOM，交互式站點就是這樣創(chuàng)建的。這里有一個DOM的基本介紹。

JavaScript是如何包含到頁面中的？那是另一個復(fù)雜的問題，但它是以script標(biāo)簽開始的。

JavaScript的執(zhí)行會阻塞DOM構(gòu)造。這就是說，執(zhí)行JavaScript的時間過長會讓人覺得頁面沒響應(yīng)。為了避免這種情況，客戶端JavaScript經(jīng)常都是大量使用異步。（你可能聽說過AJAX，它就代表asynchronous JavaScript and XML。）

如果你正在構(gòu)建一個交互式站點，那么你會需要使用JavaScript，你可能會使用這種或另一種方式處理異步。

框架是什么？我需要使用trendy.js嗎？

關(guān)鍵術(shù)語：React、Angular、Ember、Backbone、jQuery、Underscore、Lodash

“框架”這個詞有許多意思。JavaScript框架的目標(biāo)通常是減少構(gòu)建交互式Web頁面過程中無謂的工作。從根本上說，框架就是腳手架，設(shè)計用來解決一個特定種類的問題。

許多當(dāng)前流行的框架都是設(shè)計用來解決這樣的問題的，“如何創(chuàng)建一個支持復(fù)雜用戶交互的單頁Web應(yīng)用，并在前端管理所有的業(yè)務(wù)邏輯？”單頁應(yīng)用或者SPA是不需要刷新頁面的Web應(yīng)用，產(chǎn)品的大部分都是作為一個單獨的“頁面”而存在——回想下Facebook首頁或者Gmail收件箱。

那么該用哪個框架呢？React? Angular? 還是Ember?甚至說你需要框架嗎？選擇麻痹癥的信號！

所有這些項目都試圖幫你編寫更好的Web應(yīng)用程序。對于選擇哪個框架，沒有正確的答案，如果有，你就應(yīng)該使用。

如果你是剛剛開始使用JavaScript，那么不使用框架可能會更好一些，嘗試使用jQuery構(gòu)建一個站點，其他的少用或不用。那很快就會變得讓人厭煩，但你能做到，這會讓你了解到一些重要的、有關(guān)JavaScript工作原理的東西。你還可以使用jQuery踐行好的軟件工程準(zhǔn)則。

如果你正在開發(fā)一個相當(dāng)復(fù)雜的站點，那么你會發(fā)現(xiàn)框架很有用。當(dāng)前，Angular、React和Ember都是流行且明智的選擇。Backbone是一個相對較小的老式框架；它也適合于許多項目。我為本文整理的初學(xué)者工具包使用了React，但實際上，沒有錯誤的選擇。TodoMVC使用不同的框架實現(xiàn)了同一個清單應(yīng)用程序，檢出它，自己比較一下各種框架。

JavaScript還缺少許多其他語言內(nèi)置的標(biāo)準(zhǔn)庫函數(shù)，像字符串填充或數(shù)組重排。為此，我們通常會使用像jQuery、Underscore和Lodash這樣的庫來彌補這種不足。按照慣例，這些庫在導(dǎo)入后要分別使用$、和引用，因此，如果你看到一個JavaScript文件中有許多美元符號，幾乎可以肯定這是調(diào)用了jQuery。

如果你要開始一個新項目，我建議使用React或者Angular以及Lodash。

我應(yīng)該編寫JavaScript，還是其他的什么？JavaScript的種類有哪些？

關(guān)鍵術(shù)語：ES5、ES6、ES2015、CoffeeScript、TypeScript、ClojureScript、Babel、“轉(zhuǎn)譯（transpiling）”、“編譯（compiling）”、MDN參考

“JavaScript”實際上并不是一門單獨的語言。每個瀏覽器供應(yīng)商都實現(xiàn)了自己的JavaScript引擎，由于瀏覽器和版本之間的差別，JavaScript飽受碎片化之苦。CanIUse.com記錄了部分不一致的情況；你也可以查看Mozilla開發(fā)者社群里的文檔。

ES6又稱 ES2015/Harmony/ECMAScript6/ECMAScript 2015，是JavaScript規(guī)范的最新版本。它引入了新的語法和功能。胖箭頭、ES6類、本地模塊和模板字符串都是這個JavaScript版本的一部分。Treehouse提供了一份不錯的ES6入門教程。

雖然JavaScript處于一個碎片化的環(huán)境，但能夠使用新的語言特性也不錯。因此，像Babel這樣的工具會把你閃亮的標(biāo)準(zhǔn)JavaScript代碼轉(zhuǎn)換成一個同舊平臺兼容的版本。這個過程稱為轉(zhuǎn)譯。這同編譯沒有太大的區(qū)別。使用像Babel這樣的工具，你不必太過擔(dān)心特定的瀏覽器是否支持你使用的JavaScript特性。

轉(zhuǎn)譯工具不只是將ES6 JavaScript轉(zhuǎn)換成ES5。還有一些工具可以對JavaScript的變體，如ClojureScript、TypeScript和CoffeeScript，做同樣的事情。ClojureScript是Clojure的一個版本，可以編譯成JavaScript。TypeScript本質(zhì)上是JavaScript，但有一個類型系統(tǒng)。CoffeeScript同JavaScript非常像，但有更閃亮的語法；由CoffeeScript創(chuàng)建的許多語法糖都已經(jīng)被ES6采用，這在很大程度上顯得CoffeeScript不那么有用了。所有這些都會編譯成普通的JavaScript。

那么你應(yīng)該使用什么呢？如果你是前端開發(fā)的初學(xué)者，那么你也許應(yīng)該編寫ES6風(fēng)格的JavaScript。大部分ES6特性都得到了各瀏覽器供應(yīng)商的廣泛支持。如果你需要支持相對較老的平臺，那么像Babel這樣的工具可以替你將ES6編譯成兼容ES5的JavaScript。現(xiàn)在先不要考慮閃亮的compile-to-JavaScript選項，如ClojureScript，不過，一旦你有了更多的前端開發(fā)經(jīng)驗，那么它們當(dāng)然值得研究。

如何使用其他人的代碼？

關(guān)鍵術(shù)語：AMD、commonJS模塊、ES6模塊、npm、Github

在JavaScript中，代碼共享和模塊的歷史有一點復(fù)雜。我強烈建議你閱讀Preethi Kasireddy的文章“JavaScript模塊入門指南”來了解更多信息。

對于我們而言，術(shù)語模塊和庫基本上是等價的：它們代表大量的自包含代碼，我們可以在自己的項目中使用及重用。JavaScript模塊一般通過node包管理器npm發(fā)布。你可以在npm或GitHub上搜索JavaScript模塊。

模塊定義（有時稱為模塊語法）有幾種存在競爭關(guān)系的方式，主要包括CommonJS、AMD和ES6原生模塊。CommonJS采用一種同步的、面向服務(wù)器的方法。相反，AMD（異步模塊定義）允許你使用異步、非阻塞的方式定義和加載模塊。CommonJS和AMD都是在JavaScript沒有原生支持任何模塊或依賴概念的情況下創(chuàng)建的。

ES6增加了原生JavaScript模塊支持，它既支持CommonJS的聲明式語法，又支持AMD的異步加載，還有其他一些特性。終于，模塊成為現(xiàn)行語言的一部分。

在工作中，你很可能會遇到所有這三種類型的模塊。對于新項目，你該應(yīng)該使用ES6原生模塊。構(gòu)建工具，如webpack（下面會介紹），會幫助你在現(xiàn)有項目中使用各種類型的模塊。

我需要Node.js嗎？

關(guān)鍵術(shù)語：Node.js、npm、nvm

Node.js是一款編寫服務(wù)器端JavaScript的工具。等一下，難道我們談?wù)摰牟恢皇乔岸薐avaScript嗎？

由于JavaScript模塊通常在打包后通過node包管理器npm分享，所以你需要安裝Node.js，即使你不會把它用于服務(wù)器端開發(fā)。在OS X或基于Linux的系統(tǒng)上，最好的方式是通過Node版本管理器nvm，這簡化了不同Node.js版本的管理。Windows用戶應(yīng)該看下nvm-windows。

我該用什么構(gòu)建工具？

關(guān)鍵術(shù)語：grunt、gulp、bower、browserify、webpack、“熱重載（hot reloading）”、sourcemap

一個script標(biāo)簽接一個script標(biāo)簽地請求將每個JavaScript依賴作為頁面的一部分會很慢。因此，大多數(shù)站點都使用所謂的JavaScript bundles。捆綁過程會獲取所有依賴，并把它們“捆綁”在一起，生成一個單獨的文件，包含到頁面中。根據(jù)需要，有些開發(fā)人員還會使用一個“最小化（minifying）”步驟，將所有不必要的字符從JavaScript代碼中去除，而又不改變代碼的功能。這可以減少客戶端需要下載的數(shù)據(jù)量。

有些工具還支持諸如熱重載及sourcemaps這樣的特性，前者會在你保存一個文件時自動在瀏覽器中更新你的項目，后者提供了一個從捆綁好的JavaScript到其原始形式的映射，簡化了調(diào)試工作。

本質(zhì)上講，我剛剛描述的是一個構(gòu)建過程。不管是否大多數(shù)JavaScript開發(fā)人員都這樣描述，你都是將代碼編譯成一個生產(chǎn)就緒的格式?！扒岸薲evops”或者管理構(gòu)建、部署工具及依賴項的過程成為一項日益復(fù)雜的工作。

Grunt、gulp、broccoli、brunch、browserify和webpack都是JavaScript構(gòu)建工具。比較它們非常困難，因為它們每一個都致力于解決不同的問題。它們中有許多使用了不同的抽象概念來討論相同的問題，我們實在是還沒有一個共用的術(shù)語庫。

根據(jù)我的經(jīng)驗，開發(fā)人員往往對這些工具的配置文件不甚了解，因此就在項目之間粘來粘去。下面是我為初學(xué)者庫整理的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結(jié)尾的所有文件；
• 使用babel-loader對它們進(jìn)行轉(zhuǎn)換，尤其是處理ES6轉(zhuǎn)譯（所以es2015 query）和JSX（所以react query）；
• 將所有JavaScript文件捆綁成一個文件static/bundle.js。

對于新項目，我推薦webpack。它有很強的適應(yīng)性，而且能夠很好地處理具有復(fù)雜依賴圖的大型項目。

我如何測試代碼？

關(guān)鍵術(shù)語：Mocha、Jasmine、Chai、Tape、Karma、Selenium、phantomjs

同許多其他類型的編程一樣，前端JavaScript可以從測試中獲益。大多數(shù)JavaScript開發(fā)人員都表示，他們至少會編寫部分測試。

JavaScript缺少一種內(nèi)置的框架用于運行測試，因此，開發(fā)人員需要依賴外部庫。不同的測試工具致力于問題的不同方面，這點同JavaScript構(gòu)建系統(tǒng)非常像。

Mocha和Jasmine是兩個流行的庫，有時候稱為測試框架，可以幫助你編寫測試。他們的API十分類似；你描述應(yīng)該出現(xiàn)的行為，然后使用斷言測試它。

describe('helloWorld()', function(){
   it('should greet me by name', function(){
        // assertions go here
   }); 
});

Mocha實際上沒有內(nèi)置斷言庫，因此，大多數(shù)開發(fā)人員都會將它同Chai結(jié)合使用。它們的斷言語法類似：

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

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

為了運行測試，Mocha提供了一個命令行工具，而Jasmine沒有。許多開發(fā)人員使用Karma，這是一個測試執(zhí)行器，既可以運行Jasmine風(fēng)格的測試，也可以運行Mocha風(fēng)格的測試。

那很適合單元測試；對于基于JavaScript的集成測試，我們需要更多工具。在前端領(lǐng)域，集成測試通常涉及使用一個瀏覽器實際地渲染和加載頁面，模擬用戶交互，并檢查結(jié)果。

Selenium是一個Web驅(qū)動程序，通?？梢杂糜谶@些測試。你需要為Selenium配備一個瀏覽器驅(qū)動程序，以便它能夠啟動瀏覽器。PhantomJS是一個所謂的無頭瀏覽器——它運行時沒有圖形用戶界面——通常用于測試中。由于它們不需要GUI，所以無頭瀏覽器對自動化測試而言非常有用。你可能會發(fā)現(xiàn)Sinon有用；它提供了一個模擬服務(wù)器，可以用于模擬AJAX請求的響應(yīng)。

你還可以設(shè)置JavaScript測試同持續(xù)集成（CI）系統(tǒng)一起運行，如Jenkins或Travis。

JavaScript測試工具有大量堪稱完美的選擇。對于新項目，我常常選擇Karma和Jasmine，并使用PhantomJS作為測試瀏覽器，但Mocha + Chai也是一個不錯的選擇。

那么我如何入手呢？

我整理了一個GitHub庫，里面包含一個基本的前端開發(fā)配置：https://github.com/wzxm/react-starter.git。

它使用：

• React；
• Babel轉(zhuǎn)譯；
• Webpack構(gòu)建；
• ES6語法（針對React類和模塊導(dǎo)出）；
• Karma + Jasmine + PhantomJS測試；

讓我們稍微詳細(xì)地討論下。React是我們使用的框架，它讓我們可以更輕松地創(chuàng)建交互式站點。（你描述UI，React會為你渲染并處理DOM操作。）我們將編寫符合ES6規(guī)范的JavaScript代碼。Webpack會使用Babel將ES6 JavaScript代碼轉(zhuǎn)譯成兼容ES5的JavaScript代碼。Webpack還會管理依賴和模塊導(dǎo)入。最后，我們使用Karma和PhantomJS運行測試，并使用Jasmine庫編寫這些測試。

首先，確保你有一個可用的npm版本。然后，安裝這個GitHub庫的依賴，并開始使用：

npm install
webpack

然后，使用它進(jìn)行開發(fā)，運行：

webpack --watch

這會指示webpack監(jiān)視項目，并在JavaScript文件變化時重新編譯它。想要查看應(yīng)用程序，就需要啟動一個本地服務(wù)器。在OS X或Linux上，使用Python很容易做到：

python -m SimpleHTTPServer

……你已經(jīng)準(zhǔn)備好開始了!編輯app.js或Hello.js增加更多的React組件，并使用npm test來運行測試。

當(dāng)然，有一個可以工作的初始代碼庫只是成功的一半。前端JavaScript開發(fā)領(lǐng)域很復(fù)雜，有大量的工具、術(shù)語以及新概念需要學(xué)習(xí)，同時也有大量的問題需要解決。上述任意一個主題都很容易寫滿一個博客。希望這篇文章能讓你對JavaScript生態(tài)圈有一些了解，能在你學(xué)習(xí)更多有關(guān)前端開發(fā)的知識時提供一些指導(dǎo)。

最后
對全局引導(dǎo)類的文章，在我看來還是有一定的幫助，至少讓你知道了原來還有這個東西，猶如很多構(gòu)建工具的依賴包一樣，當(dāng)你需要了，你可以立馬學(xué)習(xí)并使用它。有新東西出來并不可怕，說明前端社區(qū)至少還是很活躍，大家選擇入前端坑還是沒錯的。以自己的思考去選擇適合自己的也是蠻有學(xué)問的事情。