天天看點

15個提高程式設計技巧的JavaScript工具

原文位址:http://www.imooc.com/wenda/detail/243523 

 JavaScript腳本庫是一個預先用JavaScript語言寫好的庫,它友善了我們開發基于JavaScript的應用程式,特别适合AJAX和其他一些以Web為中心的技術。JavaScript主要用于編寫嵌入或者包含在HTML頁面的函數,進而實作DOM之間的互動。

  這篇文章收集了15個可用于提高程式設計技巧的JavaScript工具,助你輕松快速完成工作。下面的這些JavaScript工具能讓你管理Javascript狀态、壓縮JavaScript代碼、重構腳本代碼結構等等。真誠地希望以下這些工具能對你有用。并且如果你還知道其他的JavaScript工具,歡迎不吝賜教。

  1. JavaScript State Manager

  JavaScript State Manager是一種輕量級的、易于使用的狀态管理器,主要用于響應式網站。它不需要任何的JavaScript架構。你可以定義斷點将運作在目前斷點的JavaScript代碼打包在一起。

15個提高程式設計技巧的JavaScript工具

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

  2. jsMini

  如果你想快速、輕松地壓縮JavaScript或jQuery檔案,那麼可以使用jsMini。隻需複制粘貼源代碼,選擇是否要基本或完全壓縮,然後就ok了。

15個提高程式設計技巧的JavaScript工具

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

  3. CountUp.js

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

15個提高程式設計技巧的JavaScript工具

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

  4.Grasp

  Grasp能讓你搜尋、替換和重構基于代碼結構的JavaScript,而不是純文字。它比标準搜尋和替換的功能更強大,能讓你更加輕松地重構你的代碼。

15個提高程式設計技巧的JavaScript工具

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

  5. Gulp.js

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

15個提高程式設計技巧的JavaScript工具

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

  6.Orcrad.js

  Ocrad.js是一個簡單的OCR程式,可以将圖像轉化成文字。這是一個Ocrad項目的純JavaScript版本,大概1M左右,并不需要太多的教育訓練過程。

15個提高程式設計技巧的JavaScript工具

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

  7. Headroom.js

  Headroom.js是一個輕量級的,高性能的JS部件(無依賴性!),可以允許你應對使用者的滾動要求。向下滾動的時候上面的頭部漸漸滑出我們的視線,而向上滾動的時候又會回來。 Headroom.js允許你設定元素出現的适當時間,其他時候則将焦點放在内容上。使用headroom.js也非常簡單。它有一個純JS的API,以及可選的相容性的jQuery/Zepto和AngularJS插件。

15個提高程式設計技巧的JavaScript工具

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

  8. JIKO

  JIKO是一個現代化的,易于使用的面向Javascript的模闆引擎。其目标是提供JavaScript程式員一種如Jinja和Mako一樣強大的伺服器端狀态的美術模闆引擎。

15個提高程式設計技巧的JavaScript工具

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

  9. FileAPI

  FileAPI是一組龐大的JavaScript工具,幾乎任何相關檔案都可以處理。它提供了檔案上傳(單一/多個)的功能并支援拖放操作、圖像裁剪、調整大小、套用篩選、擷取檔案資訊等等。該工具是獨立的,并配有PHP類可處理伺服器端的操作。此外,如果浏覽器不支援JavaScript檔案上傳和攝像頭,它将自動退回到Flash模式,并且詳細地記錄下來。

15個提高程式設計技巧的JavaScript工具

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

  10.Object Playground

  Object Playground是一個面向JavaScript對象的可視化和實驗性的工具。在浏覽器中使用,并且非常簡單。

15個提高程式設計技巧的JavaScript工具

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

  11. Echo.js

  Echo是一個獨立的JavaScript延遲加載的圖像工具。Echo的速度很快,使用的是HTML5資料——*屬性。IE8+上面皆可使用。Echo.js可以非常簡單地實作圖檔延遲加載功能,同時它非常小巧,壓縮後才1KB(沒有使用jQuery/Zepto等腳本庫)。

  延遲加載指的是隻有當真正需要資料的時候,才執行資料加載操作,才需要從伺服器動态請求資料,并且自動改變圖檔的src屬性。這也是一種異步方法。

15個提高程式設計技巧的JavaScript工具

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

  12. jsComplexity

  想知道你的JavaScript代碼真的有那麼複雜嗎?通過Analysisand運作你就可以親眼目睹。代碼越複雜,錯誤的機率就越大。是以你要做的就是簡化你的代碼,以便盡可能地提高其性能和可靠性。

15個提高程式設計技巧的JavaScript工具

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

  13. Chance.js

  Chance是一種最簡單的随機字元串、數字等的生成程式,特别有助于減少編寫自動化測試或者其他任何需要随機資料時千篇一律的單調性。Chance是一款開源軟體,基于MIT開源協定。并且Chance是裝載在網站上的,這樣你隻需要打開浏覽器上面的控制台就可以了!

15個提高程式設計技巧的JavaScript工具

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

  14. Bookmarkfiy

  使用Bookmarkify建立自己的書簽工具超級簡單。隻需要命名書簽,進入JavaScript,選擇它,就可以開始你的網際網路之旅了。

15個提高程式設計技巧的JavaScript工具

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

  15.David

  David是一款節點管理工具,可以将這款工具嵌入到你的網站中。

15個提高程式設計技巧的JavaScript工具

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

  譯文連結:http://www.codeceo.com/article/15-javascript-tools.html

  英文原文:15 JavaScript Tools to Improve Your Coding Skills

  翻譯作者:碼農網 – 小峰

2015-01-14 JavaScript 550 浏覽2 回答

15個提高程式設計技巧的JavaScript工具

Materliu

譯者的翻譯水準實在是不敢恭維啊,  熱情可佳,但需要再認真一些。以下我粗略糾正一下,不對的還請大家指出。

原文位址: http://codegeekz.com/javascript-tools/

1. Simple State Manager是一個針對響應式站點的輕量易用的JavaScript狀态管理器。它不依賴于任何的JavaScript架構同時能夠完美地以一種非常整潔的方式來處理針對不同布局的代碼。你可以定義臨界點,然後把所有在這個臨界點上要執行的JavaScript打包到一起。

3. CountUp.js是一個無依賴、輕量級的JavaScript類庫,可用于快速建立一個有趣的顯示數值資料的動畫。别看它名字叫CountUp,CountUp會根據你傳遞的startVal和endVal參數來計算該向上還是向下計數。其支援使用Bower和Component安裝,同時還有一個CoffeeScript的版本。

4.Grasp讓你可以基于代碼結構,而不是精确的文本命中來搜尋,替換,以及重構你的JavaScript代碼。同标準的搜尋和替換,它更加強有力,同時讓你可以更輕松的重構你的代碼,甚至允許你實作一個單行的基本的宏指令。

5. Gulp.js是一個流式建構系統。它使用流和編碼替代配置的方式讓建構變得更簡單和直覺。通過選擇編碼而不是配置,gulp保持了簡單事情的簡單性,同時讓複雜的任務也變得可管理。

7. Headroom.js是一個允許你對使用者的滑鼠滾動作出響應的輕量,高性能且無依賴的JS小工具。當向下滾動的時候,header會滑出視圖,而向上滾動的時候,header則滑回視圖。Headroom.js允許你在恰當的時機将某些元素呈現在視圖中,而其餘時間則将焦點放在你的内容上。使用Headroom.js相當簡單。它擁有一套原生的JS API,同時也有可選的相容jQuery/Zepto或者AngularJS的插件。

8. 美術模闆引擎。 ---> 如藝術品般的模闆引擎

9. FileAPI是一個龐大的JavaScript工具合集,其基本涵蓋了所有跟檔案相關的操作。它提供了拖拽上傳檔案(單一/多個),圖像裁剪,大小調整,過濾,擷取檔案資訊等特性。工具本身是獨立的,同時輔以一個PHP的類,用來在伺服器端處理這些操作。對于那些不支援的浏覽器(uploads和camera 特性)有Flash的降級處理。同時,它的文檔很詳細。

11.Echo是一個獨立的JavaScript圖檔延遲加載工具。Echo運作速度快,使用HTML5的data-*屬性,需運作在IE8以上版本。使用Echo.js就如同延遲加載一個圖檔那樣簡單,壓縮完它的大小還不到1KB,同時不依賴于jQuery/Zepto等庫。延遲加載的工作原理是隻加載那些馬上要進入視圖的必須的資源,通過自動地簡單修改一下image的src屬性發起向伺服器的請求。這同時也是一個對我們大有裨益的異步的過程。

12. 想知道你的JavaScript代碼真的有那麼複雜嗎? 。。。 ---> 想知道你的JavaScript代碼到底有多複雜嗎?通過Analysis功能來親自看一看運作統計結果吧。 

13. Chance是一個極簡單的随機字元串、數字等的生成器,尤其是在寫自動化測試或者其他任何需要使用随機數的時候,其能夠幫助減少這所帶來的單調乏味。 Chance是一個基于對開發者和商業機構都非常友好的MIT協定的開源軟體。Chance的官網已經加載了Chance,是以你可以直接打開你浏覽器的控制台來試玩Chance(這裡原文是:Chance is loaded on this site so you can just open the console on your browser and play! this site指的應該是Chance的官網)

14. Bookmarkify使得建立你自己的bookmarklets(這個詞算是術語了,感覺不翻譯更好)變得相當簡單,隻需要為它命名,輸入JavaScript代碼,指定你需要額外加載的庫便萬事俱備了。

15. David 是一款可以總覽你的Node依賴的工具,它依據每一個依賴的目前狀态來生成一個徽章标記,如果你願意,你可以把這個徽章标記嵌入到你的網站。

2015-01-19 回複 0  

15個提高程式設計技巧的JavaScript工具

shark

不錯!

2015-01-19