現代JavaScript開發者的工具箱

時間 2019-11-06

原文原文鏈接

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

　　做爲一門腳本語言，JavaScript最初建立的目的是用於加強web頁面的表現能力，而現現在JavaScript幾乎已經用在全部你能想到的地方了。隨着整個業界的技術能力不斷提升，JavaScript現在已經能夠在服務端運行，同時也可以被編譯爲原生手機應用的代碼。當今的JavaScript開發者都是整個豐富生態圈中的一份子，他們能夠在幾百種IDE、工具和框架中進行隨意選擇。因爲各類選擇和資源的數量實在太多，某些開發者也會感到不知從哪裏開始學習。我很樂於討論並概述一下現代JavaScript開發者所面臨的處境，首先我將簡要的介紹一下JavaScript的歷史，隨後會涵蓋目前最流行的一些框架、工具和IDE。css

　快速回顧歷史

　　讓咱們開始一次快速的旅行。時間回到1995年，當時Netscape Navigator和Internet Explorer 1.0是瀏覽器方面僅有的選擇。網站上充斥着各類煩人的閃爍文字以及太多的GIF圖片。要經過撥號網絡加載一個包含了大量豐富內容的頁面，最多須要等待整整兩分鐘時間。隨後出現了一種web語言，它容許這些古老的網站執行客戶端的代碼。這一年正是JavaScript所誕生的年份。html

　　建立於20年以前的這些網站對於JavaScript的使用並很少，固然也沒有充分發掘這門語言的潛力。偶爾會經過彈出對話框告訴你某些信息，或是在某個方框中經過滾動文字的方式顯示新聞，或是用cookie保存你的用戶名，以便當你通過幾個月後再來訪問這個網站時可以直接顯示出你的名字。職場中固然也不存在任何以JavaScript做爲主要開發語言的工做職位，當時可以在工做中真正編寫一些JavaScript以及是很是幸運了。總之，當時的網站對於JavaScript的應用就是在DOM中玩一些小花招。react

　　現在，你基本上已經能夠在全部地方看到JavaScript的身影了。從Bootstrap到ReactJS、Angular、通用的jQuery，甚至是運行在服務端的Node.js，JavaScript已經成爲了最重要、最流行的web語言之一。jquery

　框架

　　自從問世以來，JavaScript的改動的最大方面之一就是對於它的應用方式。調用那些尷尬的document.GetElementById方法和建立繁重的XmlHttpRequest對象的日子已經一去不復返了。取而代之的方式，是經過各類幫助性的類庫對這些基本功能進行抽象，讓JavaScript更易於爲開發者使用。這也正是現在JavaScript隨處可見的主要緣由之一。git

　　jQuery

　　jQuery是由John Resig在2006年推出的，它提供了一套豐富的工具集，對各類隱晦的、神祕的JavaScript命令與方法進行了抽象與簡化。展現這一工具最簡單的方式莫過於代碼示例了。angularjs

　　使用純粹的JavaScript建立一個AJAX請求：github

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(); }

　　來源: Stack Overflowweb

　　而使用jQuery建立AJAX請求：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個內容的列表，各自所需的時間：

　　來源: The Dapper Developer

　　若是你的應用很是看重性能，那麼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應用了。