JavaScript開發者的工具箱 非常實用
自從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();
}</pre>
來源: Stack Overflow
而使用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”，是一個剛剛在這場游戲中登場的新手。它由非死book創建，并在2013年首次發布。 非死book認為React在處理SPA問題上可以成為Angular的替代品，因此如果你認為Angular和React這兩種框架是競爭對手，那 你的理解就對了。不過，與Angular相比，React最大的不同之處在于，它是一個更高效、具有更高性能、速度更快的類庫。下圖展示了使用 React、Angular、Knockout（另一種類庫，在本文中不做討論），以及純粹的JavaScript在DOM中渲染包含1000個內容的列 表，各自所需的時間：
如果你的應用非常看重性能，那么React就是正確的選擇。
JavaScript開發環境
對于高效的開發來說，IDE的使用是非常重要的。IDE的全名是集成開發環境，是一種為開發者提供了一系列工具的應用程序。這種工具中最重要的一部分通常來說是一個富文本編輯器，通常會為使用者提供語法高亮、自動完成和鍵盤快捷鍵，以加速各種煩人的手動操作。
Sublime Text
Sublime Text實際上并不是一種IDE，而是一個輕量級的、速度飛快的用于編程的文本編輯器，提供了語法高亮功能和直觀的鍵盤快捷鍵。它本身是跨平臺的，因此對 于那些想在PC環境中使用Mac（或者反之）的開發者來說是理想的選擇。Sublime Text的每個部分幾乎都是可以進行自定義的，它還提供了多種插件，為它加入了類似于IDE的功能，例如和Git的集成，以及代碼整理。對于 JavaScript的愛好者和新手開發者來說，它是一個很好的選擇。當本文發布時，每個Sublime Text授權的價格為70美金。
來源: Sublime Text
WebStorm
WebStorm是由JetBrains團隊開發的一種智能IDE，主要專注于HTML、CSS和JavaScript的開發。它只收取象征性的授 權費用（在本文發布時為49美金），在有經驗的JavaScript專家之間，它得到了廣泛的認可，并已經被視為事實上的標準，這一點不無道理，因為它內 置的代碼完成功能和審查工具可以說是獨一無二的。WebStorm中也提供了一個豐富的JavaScript調試器，并且與各種流行的單元測試框架進行了 集成，例如Karma測試執行器和JSDriver，甚至還包括支持Node.js的Mocha。
WebStorm最優秀的特性之一莫過于它的實時編輯（Live Edit）功能了。只要在Chrome和WebStorm中同時安裝某個插件，開發者就可以在變更代碼的同時，直接在瀏覽器中看到結果。開發者還可以對實 時編輯進行配置，讓瀏覽器窗口中的變更高亮顯示，這極大地提升了調試與編碼的生產力。
總的來說，如果JavaScript是你的全職工作，那么WebStorm這個IDE可以成為一個很好的選擇。
來源: JetBrains
Brackets
Brackets是一種開源的免費IDE，專注于可視化工具。Brackets提供了一種類似于WebStorm的實時編輯特性，讓你可以在瀏覽器 窗口中直接看到代碼改變的結果。它還支持并行式的編輯，讓你一邊進行編碼工作，同時直接看到代碼的結果，而無需在不同的應用程序間進行切換，或是使用彈出 窗口。Brackets中最有趣的一個特性叫做抽取（Extract），它能夠對Photoshop的PSD文件進行分析，以獲取其中的字體、顏色和大小 等信息。由于這一特性的存在，Brackets非常適合于那些同時進行設計工作的JavaScript開發者。
（單擊圖片以放大）
來源: Brackets
Atom
Atom是由GitHub推出的一款開源的免費富文本編輯器，非常易于上手使用，在安裝后可以直接運行，而無需進行任何配置文件的改動，就能夠“良 好地運行了”。Atom最有趣的一點是可以對它的每一方面都進行自定義（GitHub將其稱為“可以隨便折騰”），它是在一個web核心的基礎上所創建 的，因此用戶就可以通過編寫標準的HTML、CSS和JavaScript，對它的外觀進行自定義。想要為Atom換個不同的背景和文本字體？改一下 CSS就行。或者你也可以選擇下載并應用各種為Atom所創建的主題。這種靈活性讓Atom能夠按照你所希望的方式進行展現。對于JavaScript新 手開發者和熱衷于自定義的用戶來說，Atom是一個優秀的工具。
（單擊圖片以放大）
來源: 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"]); 來源: Grunt vs Gulp – Beyond the Numbers
下面的這個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");
});
}); 來源: Grunt vs Gulp – Beyond the Numbers
我建議你可以隨意選擇自己所喜歡的那一種。這兩種工具一般來說都是通過Node.js的包管理器npm下載的。
總結
JavaScript自從互聯網的早期誕生以來，已經經歷了巨大的改進。如今，它已成為了交互式web應用程序中一個突出的重要組成部分。
開發者們從1995年起到如今也經歷了巨大的變化，如今的開發者們更樂于使用豐富而健壯的框架、工具和IDE，以提高工作的效率和生產力。
創建你的第一個現代JavaScript應用程序或者比你自己想象中還要簡單！只要選擇好一個IDE（我向初學者推薦Atom），然后安裝npm和grunt。如果你之后在哪里卡住了，Stack Overflow是非常好的資源。只要稍稍花一點時間學習基礎知識，你就很快能夠上手開發并最終發布你的第一個現代JavaScript應用了。
資源
框架：
IDE：
代碼整理工具：
構建與自動化工具
實用資源