15個提升編程技巧的JavaScript工具

JavaScript腳本庫是一個預先用JavaScript語言寫好的庫，它方便了咱們開發基於JavaScript的應用程序，特別適合AJAX和其餘一些以Web爲中心的技術。JavaScript主要用於編寫嵌入或者包含在HTML頁面的函數，從而實現DOM之間的交互。

這篇文章收集了15個可用於提升編程技巧的JavaScript工具，助你輕鬆快速完成工做。下面的這些JavaScript工具能讓你管理Javascript狀態、壓縮JavaScript代碼、重構腳本代碼結構等等。真誠地但願如下這些工具能對你有用。而且若是你還知道其餘的JavaScript工具，歡迎不吝賜教。

1. JavaScript State Manager

JavaScript State Manager是一種輕量級的、易於使用的狀態管理器，主要用於響應式網站。它不須要任何的JavaScript框架。你能夠定義斷點將運行在當前斷點的JavaScript代碼打包在一塊兒。

官方網站：http://www.simplestatemanager.com/

2. jsMini

若是你想快速、輕鬆地壓縮JavaScript或jQuery文件，那麼可使用jsMini。只需複製粘貼源代碼，選擇是否要基本或徹底壓縮，而後就ok了。

官方網站：http://www.jsmini.com/

3. CountUp.js

CountUp.js是一個獨立的、輕量級的JavaScript類庫，可用於快速建立一個有意思的顯示數值數據的動畫。從字面上看，CountUp還能根據你傳遞的startVal和dendVal參數計數二者中的任意方向。Bower和.json文件的組件都包含在內，以及CoffeeScript版本。

官方網站：http://inorganik.github.io/countUp.js/

4.Grasp

Grasp能讓你搜索、替換和重構基於代碼結構的JavaScript，而不是純文本。它比標準搜索和替換的功能更強大，能讓你更加輕鬆地重構你的代碼。

官方網站：http://graspjs.com/

5. Gulp.js

Gulp.js是一個流構建系統。它利用流和代碼配置的方法使得出來一個更爲簡單直觀的構建。經過優先代碼過分配置，Gulp使得簡單的事情繼續簡單，而複雜的任務則可管理化。

官方網站：http://gulpjs.com/

6.Orcrad.js

Ocrad.js是一個簡單的OCR程序，能夠將圖像轉化成文字。這是一個Ocrad項目的純JavaScript版本，大概1M左右，並不須要太多的培訓過程。

官方網站：http://antimatter15.github.io/ocrad.js/demo.html

7. Headroom.js

Headroom.js是一個輕量級的，高性能的JS部件（無依賴性！），能夠容許你應對用戶的滾動要求。向下滾動的時候上面的頭部漸漸滑出咱們的視線，而向上滾動的時候又會回來。 Headroom.js容許你設置元素出現的適當時間，其餘時候則將焦點放在內容上。使用headroom.js也很是簡單。它有一個純JS的API，以及可選的兼容性的jQuery/Zepto和AngularJS插件。

官方網站：http://wicky.nillia.ms/headroom.js/

8. JIKO

JIKO是一個現代化的，易於使用的面向Javascript的模板引擎。其目標是提供JavaScript程序員一種如Jinja和Mako同樣強大的服務器端狀態的美術模板引擎。

官方網站：http://jiko.neoname.eu/

9. FileAPI

FileAPI是一組龐大的JavaScript工具，幾乎任何相關文件均可以處理。它提供了文件上傳（單一/多個）的功能並支持拖放操做、圖像裁剪、調整大小、套用篩選、獲取文件信息等等。該工具是獨立的，並配有PHP類可處理服務器端的操做。此外，若是瀏覽器不支持JavaScript文件上傳和攝像頭，它將自動退回到Flash模式，而且詳細地記錄下來。

官方網站：http://mailru.github.io/FileAPI/

10.Object Playground

Object Playground是一個面向JavaScript對象的可視化和實驗性的工具。在瀏覽器中使用，而且很是簡單。

官方網站：http://www.objectplayground.com/

11. Echo.js

Echo是一個獨立的JavaScript延遲加載的圖像工具。Echo的速度很快，使用的是HTML5數據——*屬性。IE8+上面皆可以使用。Echo.js能夠很是簡單地實現圖片延遲加載功能，同時它很是小巧，壓縮後才1KB（沒有使用jQuery/Zepto等腳本庫）。

延遲加載指的是隻有當真正須要數據的時候，才執行數據加載操做，才須要從服務器動態請求數據，而且自動改變圖片的src屬性。這也是一種異步方法。

官方網站：http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

12. jsComplexity

想知道你的JavaScript代碼真的有那麼複雜嗎？經過Analysisand運行你就能夠親眼目擊。代碼越複雜，錯誤的機率就越大。因此你要作的就是簡化你的代碼，以便儘量地提升其性能和可靠性。

官方網站：http://jscomplexity.org/

13. Chance.js

Chance是一種最簡單的隨機字符串、數字等的生成程序，特別有助於減小編寫自動化測試或者其餘任何須要隨機數據時千篇一概的單調性。Chance是一款開源軟件，基於MIT開源協議。而且Chance是裝載在網站上的，這樣你只須要打開瀏覽器上面的控制檯就能夠了！

官方網站：http://chancejs.com/

14. Bookmarkfiy

使用Bookmarkify建立本身的書籤工具超級簡單。只須要命名書籤，進入JavaScript，選擇它，就能夠開始你的互聯網之旅了。

官方網站：http://bookmarkify.it/

15.David

David是一款節點管理工具，能夠將這款工具嵌入到你的網站中。

官方網站：https://david-dm.org/