首页 > 代码库 > 各式 Web 前端開發工具整理

各式 Web 前端開發工具整理

程式碼編寫工具 (Coding Tools)

工作流程/建置/組合 (Workflow/Builds/Assemblers)
  • lumbar
  • brunch
  • grunt
    • lineman
    • yeoman
    • Takeoff
  • mimosa
  • codeKit
  • liveReload
  • stealJS
  • anvil.js
  • modjs
  • AUTOMATON
  • Fire.app

瀏覽器套件管理員 (Browser Package Managers) (參見: Front-End Package Manager Comparison)
  • bower
  • component
  • ender
  • jam

CSS 基底樣式/樣板
  • normalize.css

CSS 框架 (參見: 框架比較 或 前端 CSS 框架)
  • foundation
  • bootstrap
  • HTML KickStart
  • kube
  • skeleton
  • baseline
  • gumby
  • Groundwork
  • topcoat
  • purecss
  • tuktuk
  • Metro UI CSS
  • workless
  • 99lime
  • SUSY

HTML 基底結構/樣板
  • HTML5 Boilerplate
  • Rock Hammer
  • html5bones
  • dCodes

操作 DOM 的相關函式庫 (FYI: dojo, yui, ext, qooxdoo 都有自己的 DOM 工具)
  • jQuery
    • jQuery++
  • zepto
  • tire
  • mooTools
  • DOMAssistant
  • Enders The Jeesh
    • domReady
    • query
    • bonzo
    • bean

各式 JavaScript 輔助工具/函式庫
  • lo-dash
  • lazy.js
  • string.js
  • boiler.js
  • underscore
    • underscore.string
  • sugar.js
  • craft.js
  • valentine
  • platform.js
  • modernizr
    • yepnope
  • JSON3
  • uri.js
  • moment.js
  • wait.js
  • Numeral.js
  • accounting.js
  • Upcast
  • taffydb
  • communist

鍵盤控制相關工具/函式庫
  • keys.js
  • mousestrap

事件相關輔助工具/函式庫 (mouse/touch/pointer)
  • pointer.js
  • thumbs.js
  • Hammer.js
  • Event.js
  • DeepTissue.js

CSS 關輔助工具/函式庫
  • -prefix-free
  • CSScomb

模組與指令碼載入工具/函式庫 (參見: Javascript Loaders Comparison)
  • require.js
    • almond
  • cajon
  • browserify
  • curl
  • shepherd-js
  • UMD (Universal Module Definition)
    • UMD-inspired Module Boilerplate
  • Inject
  • volo
  • controlJS
  • JAL
  • yepnope
  • AXEL
  • lmd
  • LazyJS

JavaScript 範本引擎 (template chooser)
  • handlebars
  • pure
  • dust
  • transparency
  • plates
  • mustache
    • hogan.js
  • icanhaz
  • doT.js
  • underscore
  • mold

UI Widgets (comparison)
  • chico-ui
  • google closure
  • DHTMLX
  • extJS
  • kendoUI
  • qooxdoo
  • bootstrap components & javascript
    • Fuel UX
  • wijmo
  • YUI3 Widgets
  • dojo dijits
  • jQuery UI
  • Zino UI
  • JKIT
  • w2ui
  • basis.js
  • webix

測試執行工具 (Test Runners)
  • testem
  • Karma
  • intern

使用者自動化測試工具 (User Automated Testing)
  • casperJS

測試框架 (Testing Frameworks)
  • mocha
  • buster.js
  • qunit
  • jasmine
  • expect.js

其他測試函式庫 (Assertion Libraries)
  • chai
  • should
  • expect

遠端 DOM 與 JS 測試工具
  • browserstack
  • browserling/testling
  • selenium
  • JS test driver

JavaScript 效能檢測工具 (JS Performance Testing)
  • benchmark.js
  • jsPerf — JavaScript performance playground

JavaScript 自動化文件工具 (JS Auto Documentation Tools)
  • yuiDoc
  • docco
    • docco-husky
  • jsduck
  • jsdoc
  • node-jsdoc-toolkit
  • dox
    • markdox

CSS 自動化文件工具 (CSS Auto Documentation Tools)
  • kss
  • styledocco/

JavaScript 程式碼品質驗證工具 (JS Quality Validators)
  • jslint
  • jshint
  • JSLint Error Explanations
  • jscomplexity

CSS 品質驗證工具 (CSS Quality Validators)
  • csslint
  • recess

HTML 品質驗證工具 (HTML Quality Validators)
  • html-inspector

JavaScript 最佳化/最小化/壓縮工具 (JS Optimizer/Minification/Compression Tools)
  • google closure compiler
  • uglifyJS
  • Esprima

CSS 最佳化/最小化/壓縮工具 (CSS Optimizer/Minification/Compression Tools)
  • ycssmin
  • CSSO

CSS 前置處理器 (Languages Compiling to CSS)
  • Sass
    • compass
    • inuit.css
    • Bourbon: Mixins library for Sass
    • Neat: Semantic CSS grid framework
  • stylus
    • nib
  • less
    • LESS Elements: Mixins library for LESS
    • Semantic.gs: Semantic CSS grid system
JavaScript 前置處理器 (Languages Compiling to JS) (http://altjs.org/)
  • coffeeScript
  • dart
  • roy
  • ClojureScript
  • TypeScript

HTML 前置處理器 (Languages Compiling to HTML)
  • jade
  • haml
  • markdown
  • slim

純前端應用程式框架 (Front End Application Structure) (somewhat backend agnostic)
  • backbone
    • marionette
    • chaplin
    • aura
    • thorax
  • ember
  • knockout
  • canjs
  • spine
  • angularJS
    • ngmodules.org
  • maria
  • sparky.js
  • hoodie
  • lure.js

包含後端技術的前端應用程式框架 (Front End Application Structure) (with backend opinions)
  • derby (requires NodeJS)
  • flatiron (requires NodeJS)
  • batman.js (requires NodeJS)
  • jsMVC (requires Java)
  • montage (requires NodeJS)

整合式應用程式框架 (Full Stack Application Structure/Frameworks)
  • tower.js (requires NodeJS)
  • wakanda
  • meteor

前端 JavaScript 框架 (Frontend JavaScript Frameworks) (aka Kitchen Sink Solutions, tools below provide a mixture of the things above)
  • YUI3
  • dojo
  • extJS
  • qooxdoo
  • google closure

參考資料/教學手冊/相容性套件/程式產生器等相關工具 (Reference/Guide/Polyfill/Generator Tools)

文件翻閱工具
  • DevDocs — API Documentation Reader
  • DocHub | Instant Documentation Search

瀏覽器相容性工具/文件 (Browser X Supports X)
  • http://caniuse.com/
  • http://html5please.com/
  • http://html5readiness.com/
  • html5test.com
  • http://www.browsersupport.net/
  • http://css3test.com/
  • Browserscope
  • HTML5 & CSS3 Support
  • CSS4-Selectors
  • HTML5 - Information and samples for HTML5 and related APIs
  • CSS3 - Information and samples
  • JavaScript tests & Compatibility tables
  • Cross Browser Handbook Knowledgebase
  • JS-Compatibility-Table
  • webbrowsercompatibility

HTML 語言參考 & 相容性工具 (HTML Language References & Polyfills)
  • HTML5 A technical specification for Web developers
  • HTML Living Standard
  • HTML5 A vocabulary and associated APIs for HTML and XHTML
  • HTML 5 Reference A Web Developer’s Guide to HTML 5
  • HyperText Markup Language (HTML), from Mozilla
  • HTML5 differences from HTML4
  • html5shiv
  • html5.js

HTML5 相關規格/參考資料與相容性套件 (HTML5 & Friends Specs/Ref & Polyfills)
  • webbrowsercompatibility.com
  • HTML5 & Friends, from Mozilla
  • html5rocks
  • HTML5 Cross Browser Polyfills
  • HTML5 - Information and samples for HTML5 and related APIs
  • HTML 5 Demos and Examples
  • SVG
    • SVG-edit browser editor
    • D3.js
    • raphaeljs
    • bonsaijs.org
  • Canvas
    • paper.js
    • fabric.js
    • kineticjs
  • webGL
    • three.js
    • The X Toolkit

DOM 相關規格/參考資料與相容性套件 (DOM Specs/Ref & Polyfills)
  • DOM Living Standard
  • DOM Parsing and Serialization Living Standard
  • DOM4
  • Document Object Model (DOM) Technical Reports, from W3C
  • Document Object Model, from Microsoft
  • Document Object Model, from Mozilla
  • Event compatibility tables

CSS 相關規格/參考資料與相容性套件 (CSS Specs/Ref & Polyfills)
  • CSS, from Mozilla
  • CSS SPEC-I-FI-CA-TIONS, from W3C
  • http://cssvalues.com/
  • CSS contents and browser compatibility
  • CSS Compatibility and Internet Explorer
  • HTML5 Cross Browser Polyfills (look for CSS)
  • CSS Selectors from CSS4 till CSS1
  • css3clickchart.com
  • CSS selectors

CSS 產生器 (CSS Generators)
  • patternify
  • Ultimate CSS Gradient Generator
  • patternizer
  • css3please.com
  • cssarrowplease.com
  • CSS Flexbox Please
  • CSS3 GENERATOR
  • css3generator.com
  • css3maker.com
  • CSS3 Sandbox
  • The Shapes of Css
  • CSS matic

CSS 編寫風格與慣例指引 (CSS Style/Conventions Guides)
  • kss
  • SMACSS
  • Google HTML/CSS Style Guide
  • idiomatic-css
  • Object-Oriented CSS
  • WordPress.org UI Style Guide
  • Starbucks Style Guide
  • Github CSS styleguide
  • General CSS notes, advice and guidelines

JavaScript ES5 相關規格/參考資料與相容性套件 (JavaScript ES5 Specs/Ref & Polyfills)
  • ECMA-262-5 in detail
  • ECMAScript Language Specification
  • Annotated ECMAScript 5.1
  • ECMAScript 5 compatibility table
  • Internet Explorer ECMA-262 ECMAScript Language Specification (Fifth Edition) Standards Support Document
  • JavaScript Reference, from Mozilla
  • The sample usage of ECMA 5 Features Implemented in V8
  • Understanding JavaScript OOP
  • JavaScript, aka. Web ECMAScript Living Standard
  • es5-shim
  • poly
  • Augment.js

JavaScript ES6 相關規格/參考資料與相容性套件 (JavaScript ES6 Specs/Ref & Polyfills)
  • ES6 what can be shimmed and what not
  • ECMAScript 6 compatibility table
  • Draft Specification for ES.next (Ecma-262 Edition 6)
  • es6-shim
  • ECMA-262 6th Edition/Draft

JavaScript 編寫風格與慣例指引 (JavaScript Style/Conventions Guides)
  • Google JavaScript Style Guide
  • Felix‘s Node.js Style Guide
  • idiomatic.js
  • Code Conventions for the JavaScript Programming Language
  • jsbeautifier
  • Airbnb JavaScript Style Guide

JSON 產生器
  • JSON Generator – tool for generating random JSON data

一般前端開發實務與開發習慣 (General Front-end Practices/Conventions)
  • isobar
  • Being A Web Developer
  • Front End Dev Guidelines
  • HTML and CSS code guide

效能調校

相關工具
  • Charles
  • webpagetest
  • PageSpeed Insights Browser Extensions
  • Chrome Developer Tools: Network Panel
  • Chrome Developer Tools: Timeline Panel
  • Chrome Developer Tools: Profiles Panel
  • DOM Monster
  • ImageOptim
準則與實務
  • Web Performance Best Practices
  • Best Practices for Speeding Up Your Web Site
  • High Performance Web Sites - 14 Rules for Faster-Loading Web Sites
  • Even Faster Web Sites

各式線上編輯器/開發工具 (REPL)

JS REPL
  • repl.it
  • jsconsole.com
  • codeboot.org
  • continuum
JavaScript 線上編輯器 (JS focused editors)
  • jsfiddle
  • jsbin
正規表示式編輯器 (Regular Expression editors)
  • Scriptular
  • regexr
  • refiddle
  • RegexPlanet
  • Debuggex: The online visual regex tester. JavaScript, Python, and PCRE.
HTML/CSS 編輯器
  • dabblet
  • cssdesk
HTML/CSS/JS 編輯器
  • tinker.io
  • tinkerbin
  • Plunker
  • cssdeck
  • codepen
執行/測試代碼工具 (Execute/Test live code)
  • runnable
雲端開發工具 (Browser IDE‘s)
  • koding
  • cloud9 IDE
  • action.io
JSON 編輯器
  • jsoneditoronline.org
  • JSON Tinker
  • JSONmat

瀏覽器安全性 (Browser Security)

  • Browser Security Handbook

各式 CSS/HTML Hacks 整理 (Browser Hacks)

  • browserhacks.com

給前端開發人員的後端服務 (Backend services for frontend developers)

  • firebase
  • pusher
  • jaystack
  • parse
  • singly
  • cloud CMS
  • kinvey
  • stackmob
  • cloudmine
  • kumulos
  • deployd
  • backlift.com
  • hull.io
  • stormpath.com

API 開發與測試工具

  • apiary
  • mocky.io
  • FillText.com

JSON 資料操作/查詢工具 (JSON Query Tools)

  • TaffyDB
  • linq.js
  • json:select()
  • JSONiq
  • json-query
  • SpahQL

格式化工具

  • Online JavaScript beautifier
  • CSS Beautifier

 

http://www.cnblogs.com/lenther2002/p/4676692.html

各式 Web 前端開發工具整理