自從HTML5變得流行以來，整個Web平臺取得了長足的進步，人們也開始將JavaScript視為一門能夠創建復雜應用的語言。許多新的API紛紛浮現，而關于瀏覽器如何應用這些技術的文章也大量涌現。

這一系列文章的 視角更進一步，它們將關注于如何在實踐中應用這些強大的技術，這并不是指創建多么酷炫的示例和原型，而是在第一線進行實際應用。在這個（后）HTML5系 列文章中，我們不需要響亮的口號，而是基于行業專家的實際經驗，獲得實踐性的見解。我們也將討論那些更進一步的技術（例如AngularJS），并對 web標準和web開發的未來進行定義。

作 為一門腳本語言，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就是正確的選擇。

#p#

JavaScript開發環境

對于高效的開發來說，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是一個優秀的工具。

#p#

構建與自動化工具

現 代的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代碼，與上面所展示的代碼相同：

同樣的代碼經過壓縮之后的形式：

請注意，我將壓縮后的輸出結果分為兩行的目的，只是為了在文章中閱讀起來更方便，而實際上經過壓縮后的輸出通常來說只有一行。

合并與壓縮的時機

通 常來說，合并與壓縮步驟只會在生產環境上執行，這樣做的原因是為了讓你在本地或是開發環境中可以對包含了格式符和行號的原始代碼進行調試。而調試上面所顯 示的那種壓縮代碼會非常困難，因為所有的代碼都擠在一行中。而且壓縮后的代碼會變得完全不可讀，在你嘗試調試時會發現這種代碼完全無用，并讓你感到非常受 挫。

源代碼映射文件

有 些時候，代碼中的某些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"); }); });總結

JavaScript自從互聯網的早期誕生以來，已經經歷了巨大的改進。如今，它已成為了交互式web應用程序中一個突出的重要組成部分。

開發者們從1995年起到如今也經歷了巨大的變化，如今的開發者們更樂于使用豐富而健壯的框架、工具和IDE，以提高工作的效率和生產力。

創建你的第一個現代JavaScript應用程序或者比你自己想象中還要簡單！只要選擇好一個IDE（我向初學者推薦Atom），然后安裝npm和grunt。如果你之后在哪里卡住了，Stack Overflow是非常好的資源。只要稍稍花一點時間學習基礎知識，你就很快能夠上手開發并最終發布你的第一個現代JavaScript應用了。

資源關于作者 

David Haney是Stack Exchange核心團隊的工程師經理， StackOverflow和ServerFault這些問答網站都是基于Stack Exchange創建的。他的日常工作包括幫助開發者解決問題，以及改善流程。他之前曾是Fanatics的電子商務平臺的首席開發者，基于這個平臺搭建 的網站數量超過1萬，其中包括NFL的官方在線商店NFLShop，以及NBA的官方商店。

David也是Dache的作者，這是一個開源的分布式緩存框架。他在業務時間主要用于喝啤酒，以及參與社區用戶小組和各種編程活動，而且經常是邊說邊喝。

這一系列文章的 視角更進一步，它們將關注于如何在實踐中應用這些強大的技術，這并不是指創建多么酷炫的示例和原型，而是在第一線進行實際應用。在這個（后）HTML5系 列文章中，我們不需要響亮的口號，而是基于行業專家的實際經驗，獲得實踐性的見解。我們也將討論那些更進一步的技術（例如AngularJS），并對 web標準和web開發的未來進行定義。