自從HTML5變得流行以來，整個Web平臺取得了長足的進步，人們也開始將JavaScript視為一門能夠創建複雜應用的語言。許多新的API紛紛浮現，而關於瀏覽器如何應用這些技術的文章也大量涌現。
作為一門腳本語言，JavaScript最初創建的目的是用於增強web頁面的表現能力，而現如今JavaScript幾乎已經用在所有你能想到的地方了。隨著整個業界的技術能力不斷提高，JavaScript如今已經可以在服務端運行，同時也能夠被編譯為原生手機應用的代碼。當今的JavaScript開發者都是整個豐富生態圈中的一份子，他們可以在幾百種IDE、工具和框架中進行隨意選擇。由於各種選擇和資源的數量實在太多，某些開發者也會感到不知從哪裡開始學習。我很樂於討論並概述一下現代JavaScript開發者所面臨的處境，首先我將簡要的介紹一下JavaScript的歷史，隨後會涵蓋目前最流行的一些框架、工具和IDE。
快速回顧歷史
讓我們開始一次快速的旅行。時間回到1995年，當時Netscape Navigator和Internet Explorer 1.0是瀏覽器方面僅有的選擇。網站上充斥著各種煩人的閃爍文字以及太多的GIF圖片。要通過撥號網路載入一個包含了大量豐富內容的頁面，最多需要等待整整兩分鐘時間。隨後出現了一種web語言，它允許這些古老的網站執行客戶端的代碼。這一年正是JavaScript所誕生的年份。
創建於20年之前的這些網站對於JavaScript的使用並不多，當然也沒有充分發掘這門語言的潛力。偶爾會通過彈出對話框告訴你某些信息，或是在某個方框中通過滾動文字的方式顯示新聞，或是用cookie保存你的用戶名，以便當你經過幾個月後再來訪問這個網站時能夠直接顯示出你的名字。職場中當然也不存在任何以JavaScript作為主要開發語言的工作職位，當時能夠在工作中真正編寫一些JavaScript以及是非常幸運了。總之，當時的網站對於JavaScript的應用就是在DOM中玩一些小花招。
如今，你基本上已經可以在所有地方看到JavaScript的身影了。從Bootstrap到ReactJS、Angular、通用的jQuery，甚至是運行在服務端的Node.js，JavaScript已經成為了最重要、最流行的web語言之一。
框架
自從問世以來，JavaScript的改動的最大方面之一就是對於它的應用方式。調用那些尷尬的document.GetElementById方法和創建繁重的XmlHttpRequest對象的日子已經一去不復返了。取而代之的方式，是通過各種幫助性的類庫對這些基本功能進行抽象，讓JavaScript更易於為開發者使用。這也正是如今JavaScript隨處可見的主要原因之一。
jQuery
jQuery是由John Resig在2006年推出的，它提供了一套豐富的工具集，對各種隱晦的、神秘的JavaScript命令與方法進行了抽象與簡化。展示這一工具最簡單的方式莫過於代碼示例了。
使用純粹的JavaScript創建一個AJAX請求：
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 ) {
if(xmlhttp.status == 200){
alert("success");
}
else if(xmlhttp.status == 400) {
alert("error 400")
}
else {
alert("something broke")
}
}
}
xmlhttp.open("GET", "test.html", true);
xmlhttp.send();
}
而使用jQuery創建AJAX請求：
$.ajax({
url: "test.html",
statusCode: {
200: function() {
alert("success");
},
400: function() {
alert("error 400");
}
},
error: function() {
alert("something broke");
}
});
jQuery使得複雜的JavaScript函數變得方便使用，DOM操作更是小菜一碟。從結果上說，jQuery成為了最早的一批被廣泛使用的JavaScript框架，其中對JavaScript進行抽象的思想則成為了其它各種框架構建的基礎。
AngularJS
AngularJS通常也被稱為“Augular”，於2009年登臺亮相。它是由Google創建的一種框架，目標是為了簡化單一頁面應用（SPA）的創建。類似於jQuery，它的目標同樣是將複雜的操作抽象成為具有高度重用性的方法。它為JavaScript提供了一種模型-視圖-控制器（MVC）的架構。
ReactJS
ReactJS通常也被稱為“React”，是一個剛剛在這場游戲中登場的新手。它由Facebook創建，併在2013年首次發佈。Facebook認為React在處理SPA問題上可以成為Angular的替代品，因此如果你認為Angular和React這兩種框架是競爭對手，那你的理解就對了。不過，與Angular相比，React最大的不同之處在於，它是一個更高效、具有更高性能、速度更快的類庫。下圖展示了使用React、Angular、Knockout（另一種類庫，在本文中不做討論），以及純粹的JavaScript在DOM中渲染包含1000個內容的列表，各自所需的時間：
如果你的應用非常看重性能，那麼React就是正確的選擇。
對於高效的開發來說，IDE的使用是非常重要的。IDE的全名是集成開發環境，是一種為開發者提供了一系列工具的應用程式。這種工具中最重要的一部分通常來說是一個富文本編輯器，通常會為使用者提供語法高亮、自動完成和鍵盤快捷鍵，以加速各種煩人的手動操作。
Sublime Text
Sublime Text實際上並不是一種IDE，而是一個輕量級的、速度飛快的用於編程的文本編輯器，提供了語法高亮功能和直觀的鍵盤快捷鍵。它本身是跨平臺的，因此對於那些想在PC環境中使用Mac（或者反之）的開發者來說是理想的選擇。Sublime Text的每個部分幾乎都是可以進行自定義的，它還提供了多種插件，為它加入了類似於IDE的功能，例如和Git的集成，以及代碼整理。對於JavaScript的愛好者和新手開發者來說，它是一個很好的選擇。當本文發佈時，每個Sublime Text授權的價格為70美金。
WebStorm
WebStorm是由JetBrains團隊開發的一種智能IDE，主要專註於HTML、CSS和JavaScript的開發。它只收取象徵性的授權費用（在本文發佈時為49美金），在有經驗的JavaScript專家之間，它得到了廣泛的認可，並已經被視為事實上的標準，這一點不無道理，因為它內置的代碼完成功能和審查工具可以說是獨一無二的。WebStorm中也提供了一個豐富的JavaScript調試器，並且與各種流行的單元測試框架進行了集成，例如Karma測試執行器和JSDriver，甚至還包括支持Node.js的Mocha。
WebStorm最優秀的特性之一莫過於它的實時編輯（Live Edit）功能了。只要在Chrome和WebStorm中同時安裝某個插件，開發者就可以在變更代碼的同時，直接在瀏覽器中看到結果。開發者還可以對實時編輯進行配置，讓瀏覽器視窗中的變更高亮顯示，這極大地提升了調試與編碼的生產力。
總的來說，如果JavaScript是你的全職工作，那麼WebStorm這個IDE可以成為一個很好的選擇。
Brackets
Brackets是一種開源的免費IDE，專註於可視化工具。Brackets提供了一種類似於WebStorm的實時編輯特性，讓你可以在瀏覽器視窗中直接看到代碼改變的結果。它還支持並行式的編輯，讓你一邊進行編碼工作，同時直接看到代碼的結果，而無需在不同的應用程式間進行切換，或是使用彈出視窗。Brackets中最有趣的一個特性叫做抽取（Extract），它能夠對Photoshop的PSD文件進行分析，以獲取其中的字體、顏色和大小等信息。由於這一特性的存在，Brackets非常適合於那些同時進行設計工作的JavaScript開發者。
Atom
Atom是由GitHub推出的一款開源的免費富文本編輯器，非常易於上手使用，在安裝後可以直接運行，而無需進行任何配置文件的改動，就能夠“良好地運行了”。Atom最有趣的一點是可以對它的每一方面都進行自定義（GitHub將其稱為“可以隨便折騰”），它是在一個web核心的基礎上所創建的，因此用戶就可以通過編寫標準的HTML、CSS和JavaScript，對它的外觀進行自定義。想要為Atom換個不同的背景和文本字體？改一下CSS就行。或者你也可以選擇下載並應用各種為Atom所創建的主題。這種靈活性讓Atom能夠按照你所希望的方式進行展現。對於JavaScript新手開發者和熱衷於自定義的用戶來說，Atom是一個優秀的工具。
構建與自動化工具
現代的JavaScript項目正傾向於變得越來越複雜，變化的部分也在不斷增多。這並不是說這門語言或是對應的工具不夠高效，而是由於當前所創建的web應用程式的豐富性、酷炫的體驗和複雜性所導致的直接後果。在大型的項目中工作時，你必須經常做許多重覆性的工作，無論是在你打算簽入代碼、或是將代碼構建到生產環境中。這些工作可能會包括合併、壓縮、對LESS或SASS CSS文件的編譯，甚至是運行測試。手動完成這些工作不僅令人沮喪，效率也很低下。更好的辦法是通過某種支持這些任務的構建工具，對這些工作進行自動化。
合併（Bundling）與壓縮（Minification）
你所編寫的大多數JavaScript和CSS都會在多個web頁面中共用。因此，你很可能會將這些內容放到單獨的.js和.css文件中，然後在web頁面中引用這些文件。這種方式的結果是，用戶的瀏覽器為了完全顯示你的web引用，需要分別發送一個HTTP請求，以獲取這些文件（或者至少需要驗證一下這些文件是否已經改變了）。
HTTP請求的代價是很高的。除了請求本身的大小之外，你還將因為網路延遲、HTTP頭和Cookie等內容買單。合併與壓縮工具的設計目的就是減少、乃至完全消除這些請求所帶來的影響。
合併
要改善web代碼的性能，開發者所能做的最簡單的一件事就是將代碼進行合併。在合併流程中，多個JavaScript或CSS文件將被併入一個單一的JavaScript或CSS文件中。感覺上就像是將多張個別的全景圖像的照片連接在一起，以完成一張繼續的單一照片。通過將JavaScript文件與CSS文件進行合併，我們就能夠消除很大一部分HTTP請求的開銷。
壓縮
JavaScript開發者還有一種可以改善性能的方式，就是將剛剛合併的代碼進行壓縮。壓縮過程能夠將JavaScript和CSS代碼以儘可能最小的形式進行壓縮，同時保證功能不變。對於JavaScript來說，這就意味著將變數重命名為無意義的單字元形式，並且去除所有空白和格式符。而對於CSS來說，由於頁面風格依賴於變數的名稱，因此通常來說只會去除格式符與空白。壓縮能夠極大的改進網路性能，因為它減少了每個HTTP響應的位元組數。
未經壓縮的AJAX JavaScript代碼，與上面所展示的代碼相同：
$.ajax({
url: "test.html",
statusCode: {
200: function() {
alert("success");
},
400: function() {
alert("error 400");
}
},
error: function() {
alert("something broke");
}
});
同樣的代碼經過壓縮之後的形式：
$.ajax({url:"test.html",statusCode:{200:function() {alert("success");},
400:function(){alert("error 400");}},error:function(){alert("something broke");}});
請註意，我將壓縮後的輸出結果分為兩行的目的，只是為了在文章中閱讀起來更方便，而實際上經過壓縮後的輸出通常來說只有一行。
合併與壓縮的時機
通常來說，合併與壓縮步驟只會在生產環境上執行，這樣做的原因是為了讓你在本地或是開發環境中可以對包含了格式符和行號的原始代碼進行調試。而調試上面所顯示的那種壓縮代碼會非常困難，因為所有的代碼都擠在一行中。而且壓縮後的代碼會變得完全不可讀，在你嘗試調試時會發現這種代碼完全無用，並讓你感到非常受挫。
源代碼映射文件
有些時候，代碼中的某些bug只有在生產環境才能重現。這樣一來，當你要調試某些問題時，經過壓縮的代碼就成為了一個問題。幸運的是，JavaScript支持源代碼映射文件，它能夠在壓縮後的代碼和原始代碼之間進行“映射”。這些代碼映射文件是在壓縮階段由下文所說的某些構造工具所生成的。隨後你的JavaScript調試器就能夠使用這些映射文件，為你提供清晰可讀的代碼進行調試了。你應當儘可能將映射文件與實際代碼一起發佈，這樣就能夠在某些功能出錯時進行代碼的調試了。
代碼整理
代碼整理工具會根據預定義的格式化規則檢查你代碼中的常見錯誤和問題，這些工具所報告的錯誤通常都類似於以下這些：使用了tab縮進而不是空格、在行末遺漏了分號、或是在沒有使用if、for或while語句的情況下使用了大括弧。大多數IDE中都提供了代碼整理工具，而其它一些IDE也允許用戶自行安裝代碼整理插件。
最流行的兩種JavaScript整理工具是JSHint和JSLint，JSLint是由Doug Crockford開發的整理框架，而JSHint則是由社區人員從JSLint中分支出來的。他們僅在各自的代碼格式化標準上有著一些區別。我的建議是兩者都嘗試一下，然後選擇一個最適合你的代碼風格的工具。
自動化任務：Grunt
與它的名稱不同，Grunt（本意為打呼嚕）絕不是一個粗糙的工具，而是一個健壯的命令行構造工具，能夠運行用戶所定義的各種任務。通過設置一個簡單的配置文件，你就可以讓Grunt進行各種工作，例如編譯LESS或SASS文件、構建並壓縮某個特定文件夾中的所有JavaScript和CSS文件、甚至是運行某種代碼整理工具或是測試框架。你也可以通過配置，將Grunt作為一種Git鉤子運行，當你往源代碼控制庫里進行簽入時，自動地壓縮與合併你的代碼。
Grunt支持各種命名的目標，因為你可以在不同的環境中指定不同的命令，比方說你可以將“dev”和“prod”指定為目標。這一點對於某些場景來說非常有用，例如在生產環境中將代碼進行合併與壓縮，而在開發環境中忽略這一步驟，以便於調試的需要。
Grunt中一個很有用的特性叫做“grunt watch”，它能夠對一個目錄中的文件，或一個文件集合中的變更進行監控。這一特性可以整合入WebStorm和Sublime Text這樣的IDE中使用。通過使用監控特性，你可以根據文件變更的情況觸發事件。對於LESS或SASS的編譯就是這一特性的實用作法，你可以設置grunt以監控你的LESS或SASS文件，當文件產生變更時立即進行編譯，編譯後生成的文件就可以直接在開發環境中進行使用了。你也可以讓grunt監控在你修改了每個文件之後都自動地運行某種代碼整理工具。通過grunt監控進行實時任務執行，是一種加速你的生產力的極好的方式。
自動化任務：Gulp
Grunt和Gulp都是用於解決構建自動化問題的工具，可以說兩者是直接的競爭者。他們之間主要的差別在於，Grunt更專註於配置，而Gulp更專註於代碼。你在Grunt文件中通過聲明式的JSON對構建任務進行配置，而在Gulp文件中通過編寫JavaScript函數以實現相同的功能。
下麵的這個Grunt配置文件會在SASS文件產生變更時，編譯生成CSS文件：
grunt.initConfig({
sass: {
dist: {
files: [{
cwd: "app/styles",
src: "**/*.scss",
dest: "../.tmp/styles",
expand: true,
ext: ".css"
}]
}
},
autoprefixer: {
options: ["last 1 version"],
dist: {
files: [{
expand: true,
cwd: ".tmp/styles",
src: "{,*/}*.css",
dest: "dist/styles"
}]
}
},
watch: {
styles: {
files: ["app/styles/{,*/}*.scss"],
tasks: ["sass:dist", "autoprefixer:dist"]
}
}
});
grunt.registerTask("default", ["styles", "watch"]);
下麵的這個Gulp配置文件同樣會在SASS文件產生變更時，編譯生成CSS文件：
gulp.task("sass", function () {
gulp.src("app/styles/**/*.scss")
.pipe(sass())
.pipe(autoprefixer("last 1 version"))
.pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
gulp.run("sass");
gulp.watch("app/styles/**/*.scss", function() {
gulp.run("sass");
});
});
我建議你可以隨意選擇自己所喜歡的那一種。這兩種工具一般來說都是通過Node.js的包管理器npm下載的。
總結
JavaScript自從互聯網的早期誕生以來，已經經歷了巨大的改進。如今，它已成為了互動式web應用程式中一個突出的重要組成部分。
開發者們從1995年起到如今也經歷了巨大的變化，如今的開發者們更樂於使用豐富而健壯的框架、工具和IDE，以提高工作的效率和生產力。
創建你的第一個現代JavaScript應用程式或者比你自己想象中還要簡單！只要選擇好一個IDE（我向初學者推薦Atom），然後安裝npm和grunt。如果你之後在哪裡卡住了，Stack Overflow是非常好的資源。只要稍稍花一點時間學習基礎知識，你就很快能夠上手開發並最終發佈你的第一個現代JavaScript應用了。
