前言
雖然各種框架炸茧、庫發(fā)版之快昧港，但并不會阻止部分人去研究應用。昨天的文章可能帶給你的是一些前端的名詞解釋膨桥，那么今天由@謝麗翻譯的文章可能會給你另一番不同的感受。
正文從這開始～
如果你以前有編程經(jīng)驗唠叛，但是一名前端JavaScript開發(fā)的初學者只嚣，那么一系列的術(shù)語和工具容易引起混淆。我們不會糾纏于細節(jié)的討論艺沼，而是會縱覽當前的“JavaScript生態(tài)圈”册舞。這應該足夠你找準方向，開啟前端開發(fā)之旅障般。
關鍵術(shù)語顯示為粗體调鲸。如果你想跳到可以工作的樣板代碼庫，那么我已經(jīng)將我的一些建議整理成了一個GitHub庫挽荡。
客戶端JavaScript是如何工作的藐石，為什么要使用它？
關鍵術(shù)語：DOM（文檔對象模型）定拟、JavaScript贯钩、async、AJAX
為了編寫高效的前端代碼办素，你需要對如何綜合運用HTML角雷、CSS和JavaScript創(chuàng)建Web頁面有一個基本的了解。
當客戶端（通常是瀏覽器）訪問HTML頁面時性穿，它會下載它勺三，解析它，然后使用它構(gòu)造DOM（文檔對象模型）需曾。JavaScript可以同DOM交互及修改DOM吗坚，交互式站點就是這樣創(chuàng)建的祈远。這里有一個DOM的基本介紹。
JavaScript是如何包含到頁面中的商源？那是另一個復雜的問題车份，但它是以script標簽開始的。
JavaScript的執(zhí)行會阻塞DOM構(gòu)造牡彻。這就是說扫沼，執(zhí)行JavaScript的時間過長會讓人覺得頁面沒響應。為了避免這種情況庄吼，客戶端JavaScript經(jīng)常都是大量使用異步缎除。（你可能聽說過AJAX，它就代表asynchronous JavaScript and XML总寻。）
如果你正在構(gòu)建一個交互式站點器罐，那么你會需要使用JavaScript，你可能會使用這種或另一種方式處理異步渐行。
框架是什么轰坊？我需要使用trendy.js嗎？
關鍵術(shù)語：React祟印、Angular衰倦、Ember、Backbone旁理、jQuery樊零、Underscore、Lodash
“框架”這個詞有許多意思孽文。JavaScript框架的目標通常是減少構(gòu)建交互式Web頁面過程中無謂的工作驻襟。從根本上說，框架就是腳手架芋哭，設計用來解決一個特定種類的問題沉衣。
許多當前流行的框架都是設計用來解決這樣的問題的，“如何創(chuàng)建一個支持復雜用戶交互的單頁Web應用减牺，并在前端管理所有的業(yè)務邏輯豌习？”單頁應用或者SPA是不需要刷新頁面的Web應用，產(chǎn)品的大部分都是作為一個單獨的“頁面”而存在——回想下Facebook首頁或者Gmail收件箱拔疚。
那么該用哪個框架呢肥隆？React? Angular? 還是Ember?甚至說你需要框架嗎？選擇麻痹癥的信號稚失！
所有這些項目都試圖幫你編寫更好的Web應用程序栋艳。對于選擇哪個框架，沒有正確的答案句各，如果有吸占，你就應該使用晴叨。
如果你是剛剛開始使用JavaScript，那么不使用框架可能會更好一些矾屯，嘗試使用jQuery構(gòu)建一個站點兼蕊，其他的少用或不用。那很快就會變得讓人厭煩件蚕，但你能做到孙技，這會讓你了解到一些重要的、有關JavaScript工作原理的東西骤坐。你還可以使用jQuery踐行好的軟件工程準則绪杏。
如果你正在開發(fā)一個相當復雜的站點下愈，那么你會發(fā)現(xiàn)框架很有用纽绍。當前，Angular势似、React和Ember都是流行且明智的選擇拌夏。Backbone是一個相對較小的老式框架；它也適合于許多項目履因。我為本文整理的初學者工具包使用了React障簿，但實際上，沒有錯誤的選擇栅迄。TodoMVC使用不同的框架實現(xiàn)了同一個清單應用程序站故，檢出它，自己比較一下各種框架毅舆。
JavaScript還缺少許多其他語言內(nèi)置的標準庫函數(shù)西篓，像字符串填充或數(shù)組重排。為此憋活，我們通常會使用像jQuery岂津、Underscore和Lodash這樣的庫來彌補這種不足。按照慣例悦即，這些庫在導入后要分別使用$吮成、和引用，因此辜梳，如果你看到一個JavaScript文件中有許多美元符號粱甫，幾乎可以肯定這是調(diào)用了jQuery。
如果你要開始一個新項目作瞄，我建議使用React或者Angular以及Lodash魔种。
我應該編寫JavaScript，還是其他的什么粉洼？JavaScript的種類有哪些节预？
關鍵術(shù)語：ES5叶摄、ES6、ES2015安拟、CoffeeScript蛤吓、TypeScript、ClojureScript糠赦、Babel会傲、“轉(zhuǎn)譯（transpiling）”、“編譯（compiling）”拙泽、MDN參考
“JavaScript”實際上并不是一門單獨的語言淌山。每個瀏覽器供應商都實現(xiàn)了自己的JavaScript引擎，由于瀏覽器和版本之間的差別顾瞻，JavaScript飽受碎片化之苦泼疑。CanIUse.com記錄了部分不一致的情況；你也可以查看Mozilla開發(fā)者社群里的文檔荷荤。
ES6又稱 ES2015/Harmony/ECMAScript6/ECMAScript 2015退渗，是JavaScript規(guī)范的最新版本。它引入了新的語法和功能蕴纳。胖箭頭会油、ES6類、本地模塊和模板字符串都是這個JavaScript版本的一部分古毛。Treehouse提供了一份不錯的ES6入門教程翻翩。
雖然JavaScript處于一個碎片化的環(huán)境，但能夠使用新的語言特性也不錯稻薇。因此嫂冻，像Babel這樣的工具會把你閃亮的標準JavaScript代碼轉(zhuǎn)換成一個同舊平臺兼容的版本。這個過程稱為轉(zhuǎn)譯颖低。這同編譯沒有太大的區(qū)別絮吵。使用像Babel這樣的工具，你不必太過擔心特定的瀏覽器是否支持你使用的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馍刮。
那么你應該使用什么呢？如果你是前端開發(fā)的初學者窃蹋，那么你也許應該編寫ES6風格的JavaScript卡啰。大部分ES6特性都得到了各瀏覽器供應商的廣泛支持。如果你需要支持相對較老的平臺警没，那么像Babel這樣的工具可以替你將ES6編譯成兼容ES5的JavaScript⌒偃瑁現(xiàn)在先不要考慮閃亮的compile-to-JavaScript選項，如ClojureScript杀迹，不過亡脸，一旦你有了更多的前端開發(fā)經(jīng)驗，那么它們當然值得研究佛南。
如何使用其他人的代碼梗掰？
關鍵術(shù)語：AMD嵌言、commonJS模塊嗅回、ES6模塊、npm摧茴、Github
在JavaScript中绵载，代碼共享和模塊的歷史有一點復雜。我強烈建議你閱讀Preethi Kasireddy的文章“JavaScript模塊入門指南”來了解更多信息苛白。
對于我們而言娃豹，術(shù)語模塊和庫基本上是等價的：它們代表大量的自包含代碼，我們可以在自己的項目中使用及重用购裙。JavaScript模塊一般通過node包管理器npm發(fā)布懂版。你可以在npm或GitHub上搜索JavaScript模塊。
模塊定義（有時稱為模塊語法）有幾種存在競爭關系的方式躏率，主要包括CommonJS躯畴、AMD和ES6原生模塊。CommonJS采用一種同步的薇芝、面向服務器的方法蓬抄。相反，AMD（異步模塊定義）允許你使用異步夯到、非阻塞的方式定義和加載模塊嚷缭。CommonJS和AMD都是在JavaScript沒有原生支持任何模塊或依賴概念的情況下創(chuàng)建的。
ES6增加了原生JavaScript模塊支持，它既支持CommonJS的聲明式語法阅爽，又支持AMD的異步加載路幸，還有其他一些特性。終于付翁，模塊成為現(xiàn)行語言的一部分劝赔。
在工作中，你很可能會遇到所有這三種類型的模塊胆敞。對于新項目着帽，你該應該使用ES6原生模塊。構(gòu)建工具移层，如webpack（下面會介紹）仍翰，會幫助你在現(xiàn)有項目中使用各種類型的模塊。
我需要Node.js嗎观话？
關鍵術(shù)語：Node.js予借、npm、nvm
Node.js是一款編寫服務器端JavaScript的工具频蛔。等一下灵迫，難道我們談論的不只是前端JavaScript嗎？
由于JavaScript模塊通常在打包后通過node包管理器npm分享晦溪，所以你需要安裝Node.js瀑粥，即使你不會把它用于服務器端開發(fā)。在OS X或基于Linux的系統(tǒng)上三圆，最好的方式是通過Node版本管理器nvm狞换，這簡化了不同Node.js版本的管理。Windows用戶應該看下nvm-windows舟肉。
我該用什么構(gòu)建工具修噪？
關鍵術(shù)語：grunt、gulp路媚、bower黄琼、browserify、webpack整慎、“熱重載（hot reloading）”脏款、sourcemap
一個script標簽接一個script標簽地請求將每個JavaScript依賴作為頁面的一部分會很慢。因此院领，大多數(shù)站點都使用所謂的JavaScript bundles弛矛。捆綁過程會獲取所有依賴，并把它們“捆綁”在一起比然，生成一個單獨的文件丈氓，包含到頁面中。根據(jù)需要，有些開發(fā)人員還會使用一個“最小化（minifying）”步驟万俗，將所有不必要的字符從JavaScript代碼中去除湾笛，而又不改變代碼的功能。這可以減少客戶端需要下載的數(shù)據(jù)量闰歪。
有些工具還支持諸如熱重載及sourcemaps這樣的特性嚎研，前者會在你保存一個文件時自動在瀏覽器中更新你的項目，后者提供了一個從捆綁好的JavaScript到其原始形式的映射库倘，簡化了調(diào)試工作临扮。
本質(zhì)上講，我剛剛描述的是一個構(gòu)建過程教翩。不管是否大多數(shù)JavaScript開發(fā)人員都這樣描述杆勇，你都是將代碼編譯成一個生產(chǎn)就緒的格式”ヒ冢“前端devops”或者管理構(gòu)建蚜退、部署工具及依賴項的過程成為一項日益復雜的工作。
Grunt彪笼、gulp钻注、broccoli、brunch配猫、browserify和webpack都是JavaScript構(gòu)建工具幅恋。比較它們非常困難，因為它們每一個都致力于解決不同的問題章姓。它們中有許多使用了不同的抽象概念來討論相同的問題佳遣，我們實在是還沒有一個共用的術(shù)語庫识埋。
根據(jù)我的經(jīng)驗凡伊，開發(fā)人員往往對這些工具的配置文件不甚了解，因此就在項目之間粘來粘去窒舟。下面是我為初學者庫整理的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對它們進行轉(zhuǎn)換，尤其是處理ES6轉(zhuǎn)譯（所以es2015 query）和JSX（所以react query）洁墙；
- 將所有JavaScript文件捆綁成一個文件static/bundle.js蛹疯。
對于新項目，我推薦webpack热监。它有很強的適應性捺弦，而且能夠很好地處理具有復雜依賴圖的大型項目。
我如何測試代碼？
關鍵術(shù)語：Mocha列吼、Jasmine幽崩、Chai、Tape寞钥、Karma慌申、Selenium、phantomjs
同許多其他類型的編程一樣理郑，前端JavaScript可以從測試中獲益蹄溉。大多數(shù)JavaScript開發(fā)人員都表示，他們至少會編寫部分測試您炉。
JavaScript缺少一種內(nèi)置的框架用于運行測試类缤，因此，開發(fā)人員需要依賴外部庫邻吭。不同的測試工具致力于問題的不同方面餐弱，這點同JavaScript構(gòu)建系統(tǒng)非常像。
Mocha和Jasmine是兩個流行的庫囱晴，有時候稱為測試框架膏蚓，可以幫助你編寫測試。他們的API十分類似畸写；你描述應該出現(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風格的測試，也可以運行Mocha風格的測試待错。
那很適合單元測試籽孙；對于基于JavaScript的集成測試，我們需要更多工具火俄。在前端領域犯建，集成測試通常涉及使用一個瀏覽器實際地渲染和加載頁面，模擬用戶交互瓜客，并檢查結(jié)果适瓦。
Selenium是一個Web驅(qū)動程序沟启，通常可以用于這些測試犹菇。你需要為Selenium配備一個瀏覽器驅(qū)動程序德迹，以便它能夠啟動瀏覽器。PhantomJS是一個所謂的無頭瀏覽器——它運行時沒有圖形用戶界面——通常用于測試中揭芍。由于它們不需要GUI胳搞，所以無頭瀏覽器對自動化測試而言非常有用。你可能會發(fā)現(xiàn)Sinon有用称杨；它提供了一個模擬服務器肌毅，可以用于模擬AJAX請求的響應。
你還可以設置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類和模塊導出）啤咽；
- Karma + Jasmine + PhantomJS測試；
讓我們稍微詳細地討論下渠脉。React是我們使用的框架宇整，它讓我們可以更輕松地創(chuàng)建交互式站點。（你描述UI连舍，React會為你渲染并處理DOM操作没陡。）我們將編寫符合ES6規(guī)范的JavaScript代碼。Webpack會使用Babel將ES6 JavaScript代碼轉(zhuǎn)譯成兼容ES5的JavaScript代碼索赏。Webpack還會管理依賴和模塊導入。最后贴彼，我們使用Karma和PhantomJS運行測試潜腻，并使用Jasmine庫編寫這些測試。
首先器仗，確保你有一個可用的npm版本融涣。然后童番，安裝這個GitHub庫的依賴，并開始使用：
npm install
webpack
然后威鹿，使用它進行開發(fā)剃斧，運行：
webpack --watch
這會指示webpack監(jiān)視項目，并在JavaScript文件變化時重新編譯它忽你。想要查看應用程序幼东，就需要啟動一個本地服務器。在OS X或Linux上科雳，使用Python很容易做到：
python -m SimpleHTTPServer
……你已經(jīng)準備好開始了!編輯app.js或Hello.js增加更多的React組件根蟹，并使用npm test來運行測試。
當然糟秘，有一個可以工作的初始代碼庫只是成功的一半简逮。前端JavaScript開發(fā)領域很復雜，有大量的工具尿赚、術(shù)語以及新概念需要學習散庶，同時也有大量的問題需要解決。上述任意一個主題都很容易寫滿一個博客凌净。希望這篇文章能讓你對JavaScript生態(tài)圈有一些了解督赤，能在你學習更多有關前端開發(fā)的知識時提供一些指導。
最后
對全局引導類的文章泻蚊，在我看來還是有一定的幫助躲舌，至少讓你知道了原來還有這個東西，猶如很多構(gòu)建工具的依賴包一樣性雄，當你需要了没卸，你可以立馬學習并使用它。有新東西出來并不可怕秒旋，說明前端社區(qū)至少還是很活躍约计，大家選擇入前端坑還是沒錯的。以自己的思考去選擇適合自己的也是蠻有學問的事情迁筛。
