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

2020-12-14 開源中國

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/    

稿源: 碼農網

相關焦點

  • 15個提高編程技巧的JavaScript工具
    這篇文章收集了15個可用於提高編程技巧的JavaScript工具,助你輕鬆快速完成工作。下面的這些JavaScript工具能讓你管理Javascript狀態、壓縮JavaScript代碼、重構腳本代碼結構等等。真誠地希望以下這些工具能對你有用。並且如果你還知道其他的JavaScript工具,歡迎不吝賜教。 1.
  • 9個最好用的JavaScript開發工具和代碼編輯器
    來自:碼農網譯文連結:http://www.codeceo.com/article/9-javascript-ide-editor.html
  • 開發者必備的Javascript單元測試工具
    【IT168專稿】當前,在軟體開發中單元測試越來越受到開發者的重視,它能提高軟體的開發效率,而且能保障開發的質量。以往,單元測試往往多見於服務端的開發中,但隨著Web編程領域的分工逐漸明細,在前端Javascript開發領域中,也可以進行相關的單元測試,以保障前端開發的質量。
  • 20個常用的JavaScript簡寫技巧
    任何程式語言的簡寫技巧都能夠幫助你編寫更簡練的代碼,讓你用更少的代碼實現你的目標。讓我們一個個來看看 JavaScript 的簡寫技巧吧。 1. 聲明變量 2.
  • 一行代碼證明編程能力,javascript程式語言中,經典語句精髓解析
    javascript程式語言中,經典語句精髓解析,一行代碼證明編程能力!程式設計師:十萬行代碼,證明編程基礎的掌握;之後,一行代碼證明編程的能力!1、if語句在javascript語言中,if條件語句是很常用到的。與其他程式語言相比,還是有差異的。
  • 由淺入深學習JavaScript Debug技巧
    因為我們可能有時候不得不使用這樣舊式的技巧。我最近一次使用alert是我在debug一個行動裝置的時候現有的技巧無法正常工作,我只好用alert。開發者工具歡迎來到未來!哈哈,並不是這樣。開發者工具已經使用了好些年了。不過呢,很多新的特性被加進去,相信不少人都不知道或則不清楚怎麼使用。
  • java編程常用的開發工具有哪些
    目前,Java編程越來越受到人們的重視,並且很多人對Java編程產生了濃厚的興趣。許多朋友想知道哪些Java編程工具更有用,哪些是經常使用的Java開發工具呢?下面給大家列舉幾種常用的Java編程開發工具。
  • 12 個非常有用的 JavaScript 技巧
    作者: Caio Ribeiro Pereira轉載自:W3CPlus http://www.w3cplus.com/javascript/12-extremely-useful-hacks-for-javascript.html 譯者: 大漠在這篇文章中將給大家分享12個有關於JavaScript的小技巧。
  • 50個實用的JavaScript工具
    安全工具  AttackAPI  AttackAPI是一個基於Web的攻擊構造庫,它可以結合PHP、JavaScript及其他客戶端和伺服器端技術進行使用。  jsfuzzer  它是一個fuzzing工具,幫助你使用JavaScript編寫/測試attack vectors。  新的替代JavaScript和Ajax的開發框架  Clean AJAX  Clean一個開源的Ajax引擎,一組簡化AJAX開發的高級接口。
  • 25 個實用網站工具推薦
    給大家整理了 25 個前端相關的學習網站和一些靠譜的小工具,包括一些小遊戲、教程、社區網站和博客,以及一些資源網站,希望可以幫助到大家!
  • 編程老師告訴你,這5本JavaScript書籍你一定要讀!
    /5-javascript-books-you-should-read-a-coding-teachers-perspective-ecb15dfec832今天,我們將和大家推薦5本JavaScript書籍,這些書籍是由一個有著多年編程經驗的編程老師推薦的,以下是他的博客原文:作為一名老師,我在課程開發過程中需要閱讀很多東西,通常我會每周快速閱讀2-4本書,經常閱讀10-
  • 12 個 GitHub 上超火的 JavaScript 奇技淫巧項目,找到寫 JavaScript 的靈感!
    大家好,我是你們的 貓哥,一個不喜歡吃魚、又不喜歡喵 的超級貓 ~前言貓哥是一個常年混跡在 GitHub 上的貓星人,所以發現了不少好的前端開源項目、常用技巧,在此分享給大家。公眾號:前端GitHub,專注於挖掘 GitHub 上優秀的前端開源項目,並以專題的形式推薦,每專題大概 10 個好項目,每周會有一到三篇精華文章推送。已經推薦了 面試項目、css奇技淫巧項目、代碼規範項目、數據結構與算法項目、管理後臺模板、前端必備在線工具 等專題的近 100 個優秀項目了。
  • ​不容錯過的 13 個 JavaScript 實用技巧!
    考慮到數組是Javascript中最基本的概念之一,是初學者剛剛接觸編程時就學習的概念,我想通過本文介紹一些不為人知卻非常有用的技巧。我們開始吧!替換數組中指定的值在編程時,有時候需要替換某個特定的值,有個非常簡單的方法來實現這一點。
  • 在javascript程式語言中,數據類型boolean的應用場景
    在javascript編程中,數據類型布爾是最常見的一種類型。此種類型邏輯上比較簡單,只有兩個值:true和false。布爾數據類型與計算機底層的電路開與關有著密切的關聯。但是,布爾值true不一定是1,false不一定是0。
  • 不可錯過的實用前端工具
    給大家整理了 25 個前端相關的學習網站和一些靠譜的小工具://css-tricks.com這個網站不斷的在更新一些關於 CSS 的技巧優秀的教程和技巧,每天都會更新文章。一個集合當下最流行的 JavaScript 代碼庫,顯示流行排行,開發者可以輕鬆的找到想要最新的代碼插件、工具和博客。
  • 23個可以免費學習編程的網站
    如果你能夠致力於不斷提高自己,那麼你的職業生涯,個人生活和整體幸福就會不一樣。今天這篇文章,我將跟各位分享23個可以免費學習編程知識的網站。讓你變得更好。HTMLJavaScriptCSSjQueryPHPPythonRuby4. edX訪問來自全球140個領先機構的2000個免費在線課程。獲得新技能並獲得結業證書。
  • 最強大、最牛逼的javascript視頻免費發布啦
    是一門非常強大的腳本語言,應用的範圍非常廣泛,每一個web開發者學好javascript也是必須的,本套視頻教程詳細的講解了javascript各個知識點、關鍵點,其中涉及到高深的函數概念、原型概念、接口概念、單體概念、更是詳細的講解了javascript設計模式。 本
  • UML編程技巧 UML建模工具Rose解析
    本節和大家一起學習一下UML編程技巧中UML建模工具Rose的相關內容,主要包括UML概述,UML建模工具Rose組成等內容。相信通過本節的學習你對UML建模工具Rose一定會有全面的認識。
  • 2017 年度程式語言榜,Java 最流行、JavaScript 最沒價值?
    有幾百個指標可以用于衡量程式語言,本文我們只關注以下幾個最權威的指標:TIOBE:通過整合世界各地的數據來源,TIOBE 每月都會更新榜單。Indeed.com:作為全球最大的求職引擎,Indeed 是編程工作的一個很好的衡量標準,可以幫助研究 TIOBE 中排名前 50 的程式語言職位空缺數量。
  • 七天學會javascript第一天javascript介紹
    javascript介紹javascript數據類型javascript運算符javascript對象javascriptDate對象javascript String對象JavaScript常用於實現一些前端效果。