蒐集的非常實用的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();
}

#來源: 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”，是一個剛在這場遊戲中登場的新手。它是由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應用了。

資源

框架：

• jQuery

• AngularJS

• #ReactJS

• IDE：

#Sublime Text

• WebStorm

• #Brackets

• Atom

#程式碼整理工具：

• ##JSLint

JSHint

建置與自動化工具###########NPM######## ####Grunt############Gulp############# 實用資源############Stack Overflow#### ########相關工具可前往php中文網###php開發工具###欄位免費下載！ ###

以上是蒐集的非常實用的JavaScript開發者的工具箱的詳細內容。更多資訊請關注PHP中文網其他相關文章！