JavaScript 開源項(xiàng)目資源大全

avaScript 資源大全內(nèi)容包括：包管理器、加載器、測(cè)試框架、運(yùn)行器、QA、MVC框架和庫、模板引擎、數(shù)據(jù)可視化、時(shí)間軸、編輯器等等

包管理器

管理著 JavaScript 庫，并提供讀取和打包它們的工具。

Yarn: Yarn 是由 Facebook、Google、Exponent 和 Tilde 聯(lián)合推出了一個(gè)新的 JS 包管理工具 https://yarnpkg.com/lang/en/
npm：npm 是 JavaScript 的包管理器。https://www.npmjs.com/
Bower：一個(gè) web 應(yīng)用的包管理器。https://github.com/bower/bower
component：能構(gòu)建更好 web 應(yīng)用的客戶端包管理器。https://github.com/componentjs/component
spm：全新的靜態(tài)包管理器。https://github.com/spmjs/spm
jam：一個(gè)專注于瀏覽器端和兼容 RequireJS 的包管理器。https://github.com/caolan/jam
jspm：流暢的瀏覽器包管理器。https://github.com/jspm/jspm-cli
Ender：沒有庫文件的程序庫。https://github.com/ender-js/Ender
volo：以項(xiàng)目模板、添加依賴項(xiàng)與自動(dòng)化生成的方式創(chuàng)建前端項(xiàng)目。https://github.com/volojs/volo)
Duo：一個(gè)整合 Component、Browserify 和 Go https://github.com/duojs/duo)的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。

加載器

JavaScript 的模塊或加載系統(tǒng)。

RequireJS：JavaScript 文件和模塊的加載器。https://github.com/jrburke/requirejs
browserify：在瀏覽器端以 node.js 的方式 require()。https://github.com/substack/node-browserify
SeaJS：用于 Web 的模塊加載器。https://github.com/seajs/seajs
HeadJS：HEAD 的唯一腳本。https://github.com/headjs/headjs
curl：小巧、快速且易擴(kuò)展的模塊加載器，它能處理 AMD、CommonJS Modules/1.1、CSS、HTML/text 和歷史腳本。https://github.com/cujojs/curl
lazyload：小巧且無依賴的異步 JavaScript 和 CSS 加載器。https://github.com/rgrove/lazyload/
script.js：異步 JavaScript 加載器和依賴管理器。https://github.com/ded/script.js
systemjs：AMD、CJS（commonJS）和符合 ES6 規(guī)范的模塊加載器。https://github.com/systemjs/systemjs
LodJS：基于 AMD 的模塊加載器。https://github.com/yanhaijing/lodjs
ESL：瀏覽器端的模塊加載器，支持延遲定義和 AMD。https://github.com/ecomfe/esl
modulejs：輕量的 JavaScript 模塊系統(tǒng)。https://github.com/lrsjng/modulejs

打包工具

browserify ：Browserify 讓你能在瀏覽器端使用 require('modules') ，打包所有依賴。https://github.com/substack/node-browserify
webpack：為瀏覽器打包 CommonJs/AMD 模塊。https://github.com/webpack/webpack
gulp：用自動(dòng)化構(gòu)建工具增強(qiáng)你的工作流程！http://gulpjs.com/
rollup: JavaScript 模塊打包器! https://rollupjs.org/) [中文](http://www.rollupjs.com/

測(cè)試框架

框架

mocha：適用于 node.js 和瀏覽器、簡易、靈活、有趣的 JavaScript 測(cè)試框架。https://github.com/mochajs/mocha
jasmine：簡單無 DOM 的 JavaScript 測(cè)試框架。https://github.com/jasmine/jasmine
qunit：一個(gè)易于使用的 JavaScript 單元測(cè)試框架。https://github.com/jquery/qunit
jest：簡單的 JavaScript 單元測(cè)試框架。https://github.com/facebook/jest
prova：基于 Tape 和 Browserify 的測(cè)試運(yùn)行器，它適用于 Node & 瀏覽器。https://github.com/azer/prova
DalekJS：自動(dòng)化且跨瀏覽器的 JavaScript 功能測(cè)試框架。https://github.com/dalekjs/dalek

斷言

chai：適用于 node.js 和瀏覽器的 BDD / TDD 斷言框架，并能搭配其它測(cè)試框架使用。https://github.com/chaijs/chai
Sinon.JS：對(duì) JavaScript 進(jìn)行 spies、stubs 和 mock 測(cè)試。https://github.com/sinonjs/sinon
expect.js：簡約的、適用于 Node.js 和瀏覽器端的 BDD 式斷言工具。https://github.com/Automattic/expect.js
should.js：適用于 Node.js 的 BDD 式斷言工具。https://github.com/tj/should.js

覆蓋率

istanbul：另一個(gè) JS 代碼覆蓋率檢測(cè)工具。https://github.com/gotwarlost/istanbul
blanket：一個(gè)簡單的代碼覆蓋率檢測(cè)庫。它的設(shè)計(jì)理念是易于安裝和使用，且可用于瀏覽器端和 node.js。https://github.com/alex-seville/blanket
JSCover：JSCover 是一個(gè)檢測(cè) JavaScript 程序代碼覆蓋率的工具。https://github.com/tntim96/JSCover

運(yùn)行器

phantomjs：腳本化的 Headless WebKit。https://github.com/ariya/phantomjs
slimerjs：一個(gè)內(nèi)核為 Gecko 的類似 PhantomJS 工具。https://github.com/laurentj/slimerjs
casperjs：基于 PhantomJS 和 Slimer JS 的導(dǎo)航腳本和測(cè)試工具。https://github.com/n1k0/casperjs)
zombie：基于 node.js 、快速、全棧且無圖形界面的瀏覽器的測(cè)試工具。https://github.com/assaf/zombie
totoro：一個(gè)簡單可靠且能跨瀏覽器運(yùn)行的測(cè)試工具。https://github.com/totorojs/totoro
karma：一個(gè)優(yōu)秀的的 JavaScript 測(cè)試運(yùn)行器。https://github.com/karma-runner/karma
nightwatch：基于 node.js 和 selenium webdriver 的圖形界面自動(dòng)化測(cè)試框架。https://github.com/nightwatchjs/nightwatch
intern：下一代 JavaScript 代碼測(cè)試棧。https://github.com/theintern/intern
yolpo：在瀏覽器逐句執(zhí)行的 JavaScript 解釋器。http://www.yolpo.com/

QA 工具

JSHint：JSHint 是一個(gè)有助于發(fā)現(xiàn) JavaScript 代碼錯(cuò)誤和潛在問題的工具。https://github.com/jshint/jshint/
jscs：JavaScript 代碼風(fēng)格檢測(cè)工具。https://github.com/jscs-dev/node-jscs
jsfmt：格式化、搜索和改寫 JavaScript。https://github.com/rdio/jsfmt
jsinspect：檢測(cè)復(fù)制粘貼和結(jié)構(gòu)類似的代碼。https://github.com/danielstjules/jsinspect
buddy.js：發(fā)現(xiàn) JavaScript 代碼里的魔術(shù)數(shù)字。https://github.com/danielstjules/buddy.js
ESLint：完全插件化的工具，能在 JavaScript 中識(shí)別和記錄模式。https://github.com/eslint/eslint
JSLint ：高標(biāo)準(zhǔn)、嚴(yán)格和固執(zhí)的代碼質(zhì)量工具，旨在只保持語言的優(yōu)良部分。https://github.com/douglascrockford/JSLint

MVC 框架和庫

angular.js：為網(wǎng)絡(luò)應(yīng)用增強(qiáng) HTML。https://github.com/angular/angular.js
aurelia：一個(gè)適用于移動(dòng)設(shè)備、桌面電腦和 web 的客戶端 JavaScript 框架。http://aurelia.io/
backbone：給你的 JS 應(yīng)用加入帶有 Models、Views、Collections 和 Events 的 Backbone。https://github.com/jashkenas/backbone
batman.js：最適合 Rails 開發(fā)者的 JavaScript 框架。http://batmanjs.org/
ember.js：一個(gè)旨在創(chuàng)建非凡 web 應(yīng)用的 JavaScript 框架。https://github.com/emberjs/ember.js
meteor：一個(gè)超簡單的、數(shù)據(jù)庫無處不在的、只傳輸數(shù)據(jù)的純 JavaScript web 框架。https://github.com/meteor/meteor
ractive：新一代 DOM 操作。https://github.com/ractivejs/ractive
vue：一個(gè)用于構(gòu)建可交互界面的、直觀快速和可組合的 MVVM 框架。https://github.com/vuejs/vue)
knockout：Knockout 用 JavaScript 讓創(chuàng)建響應(yīng)式的富 UI 更加容易。https://github.com/knockout/knockout)
spine：構(gòu)建 JavaScript 應(yīng)用的輕量 MVC 庫。https://github.com/spine/spine
espresso.js：一個(gè)極小的、用于制作用戶界面的 JavaScript 庫。https://github.com/techlayer/espresso.js
canjs：讓 JS 更好、更快、更簡單。https://github.com/canjs/canjs
react：用于建構(gòu)用戶界面的庫。它是聲明式的、高效的和極度靈活的，并使用虛擬 DOM 作為其不同的實(shí)現(xiàn)。https://facebook.github.io/react/
react-native：一個(gè)用 React 構(gòu)建原生應(yīng)用的框架。https://github.com/facebook/react-native
riot：類 React 庫，但很輕量。https://github.com/riot/riot
thorax：加強(qiáng)你的 Backbone。https://github.com/walmartlabs/thorax
chaplin：使用 Backbone.js 庫的 JavaScript 應(yīng)用架構(gòu)。https://github.com/chaplinjs/chaplin
marionette：一個(gè) Backbone.js 的復(fù)合應(yīng)用程序庫，旨在簡化大型 JavaScript 應(yīng)用結(jié)構(gòu)。https://github.com/marionettejs/backbone.marionette
ripple：一個(gè)小巧的、用于構(gòu)建響應(yīng)界面的基礎(chǔ)框架。https://github.com/ripplejs/ripple
rivets：輕量卻擁有強(qiáng)大的數(shù)據(jù)綁定和模板解決方案 https://github.com/mikeric/rivets
derby：讓編寫實(shí)時(shí)和協(xié)同應(yīng)用更簡單的 MVC 框架，能夠在 Node.js 和瀏覽器同時(shí)運(yùn)行。https://github.com/derbyjs/derby

derby-awesome：很棒的 derby 組件集合。https://github.com/russll/awesome-derby

way.js：簡單、輕量、持久化的雙向數(shù)據(jù)綁定。https://github.com/gwendall/way.js
mithril.js：Mithril 是一個(gè)客戶端 MVC 框架（輕量、強(qiáng)大和快速） https://github.com/lhorie/mithril.js
jsblocks：jsblocks 是一個(gè)更好的 MV-ish 框架。https://github.com/astoilkov/jsblocks
LiquidLava：易懂的、用于構(gòu)建用戶界面的 MVC 框架。http://www.lava-framework.com/
Electron：用Html、CSS和JavaScript構(gòu)建跨平臺(tái)的客戶端應(yīng)用程序。http://electron.atom.io/)、[GitHub](https://github.com/electron/electron

基于 Node 的 CMS 框架

KeystoneJS：強(qiáng)大的 CMS 和 web 應(yīng)用框架。https://github.com/keystonejs/keystone
Reaction Commerce：擁有實(shí)時(shí)的架構(gòu)和設(shè)計(jì)的響應(yīng)式（reactive） CMS。https://github.com/reactioncommerce/reaction
Ghost：簡單、強(qiáng)大的發(fā)布平臺(tái)。https://github.com/tryghost/Ghost
Apostrophe：提供內(nèi)容編輯和基本服務(wù)的 CMS。https://github.com/punkave/apostrophe
We.js：適用于實(shí)時(shí)應(yīng)用、網(wǎng)站或博客的框架。https://github.com/wejs/we/
Hatch.js：擁有社交特性的 CMS 平臺(tái)。https://github.com/inventures/hatchjs
TaracotJS：擁有快速、極簡風(fēng)格特點(diǎn)且基于Node.js 的 CMS。https://github.com/xtremespb/taracotjs-generator/
Nodizecms：為 CoffeeScript 愛好者準(zhǔn)備的 CMS。https://github.com/nodize/nodizecms
Cody：擁有所見即所得的編輯器的 CMS。https://github.com/jcoppieters/cody
PencilBlue：CMS 和博客平臺(tái)。https://github.com/pencilblue/pencilblue/

模板引擎

模板引擎允許您執(zhí)行字符串插值。

mustache.js：是 JavaScript 中帶有 {{mustaches}} 的最簡模板。https://github.com/janl/mustache.js
handlebars.js：是 Mustache 模板語言的擴(kuò)展。https://github.com/wycats/handlebars.js/
hogan.js：是 Mustache 模板語言的編譯器。https://github.com/twitter/hogan.js
doT：最快速簡潔的 JavaScript 模板引擎，適用于 nodejs 和瀏覽器。https://github.com/olado/doT
dustjs：適用于瀏覽器和 node.js 的異步模板。https://github.com/linkedin/dustjs/
eco：嵌入式的 CoffeeScript 模板。https://github.com/sstephenson/eco/
JavaScript-Templates：輕量（小于 1KB）、快速且無依賴的強(qiáng)大 JavaScript 模版引擎。https://github.com/blueimp/JavaScript-Templates
t.js：小巧的 JavaScript 模板框架，壓縮后約為 400 字節(jié)。https://github.com/jasonmoo/t.js
pug：健壯的、優(yōu)雅且功能豐富的 nodejs 模板引擎。https://github.com/pugjs/pug
EJS：高效的 JavaScript 模板。https://github.com/mde/ejs
xtemplate：可擴(kuò)展的模板引擎，適用于 node 和瀏覽器。https://github.com/xtemplate/xtemplate
marko：快速輕量且基于 HTML 的模板引擎，支持異步、流、自定義標(biāo)簽和 CommonJS 模編譯后輸出。適用于 Node.js https://github.com/marko-js/marko)和瀏覽器。

Flux

Flux是Facebook用來構(gòu)建客戶端Web應(yīng)用的應(yīng)用架構(gòu)

Reflux是根據(jù)React的flux創(chuàng)建的單向數(shù)據(jù)流類庫。https://github.com/reflux/refluxjs
Redux是可預(yù)測(cè)javascript應(yīng)用程序狀態(tài)的容器。http://redux.js.org/
Mobx是通過透明的函數(shù)響應(yīng)式編程實(shí)現(xiàn)簡單，可擴(kuò)展的狀態(tài)管理庫。https://mobx.js.org/
Dva是基于Redux, Redux-saga 和 react-router@2.x的輕量級(jí)的框架。https://github.com/dvajs/dva

數(shù)據(jù)可視化

Web 數(shù)據(jù)可視化工具

d3：一個(gè)對(duì) HTML 和 SVG 進(jìn)行可視化的 JavaScript 庫。https://github.com/mbostock/d3
metrics-graphics：更簡潔和擁有更規(guī)范的數(shù)據(jù)圖表布局優(yōu)化算法的庫。https://github.com/mozilla/metrics-graphics
pykcharts.js：經(jīng)過精心設(shè)計(jì)后，去除 d3.js 復(fù)雜性的 d3.js 圖表庫。https://github.com/pykih/PykCharts.js
three.js：JavaScript 3D 庫。https://github.com/mrdoob/three.js
Chart.js：簡單的、基于 canvas 標(biāo)簽的 HTML5 圖表庫。https://github.com/nnnick/Chart.js
paper.js：是矢量圖形腳本中的瑞士軍刀 —— 使用 HTML5 Canvas 將 Scriptographer 移植到 JavaScript https://github.com/paperjs/paper.js)和瀏覽器。
fabric.js：JavaScript Canvas 庫，SVG 與 Canvas 可以相互解析。https://github.com/kangax/fabric.js
peity：進(jìn)度條、線狀和餅狀圖。https://github.com/benpickles/peity
raphael：JavaScript 矢量庫。https://github.com/DmitryBaranovskiy/raphael
echarts：商業(yè)產(chǎn)品圖表。https://github.com/ecomfe/echarts
vis：動(dòng)態(tài)的、基于瀏覽器的可視化庫。https://github.com/almende/vis
two.js：一個(gè)渲染器無關(guān)的適用于 web 的二維繪圖 api 。https://github.com/jonobr1/two.js
g.raphael：基于 Rapha?l 圖表庫。https://github.com/DmitryBaranovskiy/g.raphael
sigma.js：一個(gè)致力于圖形繪畫的 JavaScript 庫。https://github.com/jacomyal/sigma.js
arbor：一個(gè)使用 web workers 和 jQuery 的圖形可視化庫。https://github.com/samizdatco/arbor
cubism：可視化時(shí)間序列的 D3 插件。https://github.com/square/cubism
dc.js：與 crossfilter 無縫合作的多維圖表繪制庫，使用 d3.js 渲染。https://github.com/dc-js/dc.js
vega：一套可視化語法。https://github.com/trifacta/vega
processing.js：Processing.js 基于 Web 標(biāo)準(zhǔn)使數(shù)據(jù)可視化，而無需任何插件。http://processingjs.org/
envisionjs：動(dòng)態(tài)的 HTML5 可視化。https://github.com/HumbleSoftware/envisionjs
rickshaw：用于構(gòu)建交互式實(shí)時(shí)圖表的 JavaScript 工具包。https://github.com/shutterstock/rickshaw
flot：吸引人的、基于 jQuery 的 JavaScript 圖表庫。https://github.com/flot/flot
morris.js：漂亮的時(shí)間序列線框圖。https://github.com/morrisjs/morris.js
nvd3：一個(gè)為 D3.js 構(gòu)建可復(fù)用圖表和圖表組件的庫。https://github.com/novus/nvd3
svg.js：一個(gè)輕量的、用于操作和添加 SVG 動(dòng)畫的庫。https://github.com/wout/svg.js
heatmap.js：基于 HTML5 canvas 的熱力圖 JavaScript 庫。https://github.com/pa7/heatmap.js
jquery.sparkline：一個(gè)直接在瀏覽器端生成小型走勢(shì)圖的 jQuery 插件。https://github.com/gwatts/jquery.sparkline
xCharts：一個(gè)基于 D3、用于構(gòu)建自定義圖表和圖形的庫。https://github.com/tenxer/xCharts
trianglify：基于 d3.js 的低多邊形（low poly）風(fēng)格背景圖片生成器。https://github.com/qrohlf/trianglify
d3-cloud：創(chuàng)建詞云（word cloud）效果的 JavaScript 庫。https://github.com/jasondavies/d3-cloud
d4：一個(gè)基于 D3 、友好、可復(fù)用的 DSL 圖表庫。https://github.com/heavysixer/d4
dimple.js：基于 d3 的簡易商業(yè)分析圖表庫。http://dimplejs.org/
chartist-js：簡單的響應(yīng)式圖表。https://github.com/gionkunz/chartist-js
epoch：一個(gè)通用的實(shí)時(shí)圖表庫。https://github.com/epochjs/epoch
c3：基于 D3 的可復(fù)用圖表庫。https://github.com/masayuki0812/c3
BabylonJS：一個(gè)運(yùn)用 HTML5 和 WebGL 構(gòu)建 3D 游戲的框架。https://github.com/BabylonJS/Babylon.js
jquery.raty.js：一個(gè)星級(jí)評(píng)分插件。https://github.com/wbotelhos/raty

也有一些很棒的收費(fèi)庫，如 amchart、plotly 和 highchart。

時(shí)間軸

TimelineJS：一個(gè)用 JavaScript 編寫的可敘事時(shí)間軸庫。https://github.com/NUKnightLab/TimelineJS
timesheet.js：用于構(gòu)建簡單的 HTML5 & CSS3 時(shí)間表的 JavaScript 庫。https://github.com/semu/timesheet.js

編輯器

ace：Ace（Ajax.org Cloud9 Editor）。https://github.com/ajaxorg/ace
CodeMirror：瀏覽器端的代碼編輯器。https://github.com/codemirror/CodeMirror
esprima：用于綜合分析的 ECMAScript 解析器。https://github.com/ariya/esprima
quill：一個(gè)帶有 API 的跨瀏覽器富文本編輯器。( http://quilljs.com/)
medium-editor：Medium.com 所見即所得編輯器的克隆版。https://github.com/yabwe/medium-editor
pen：享受在線編輯（支持 markdown）。https://github.com/sofish/pen
jquery-notebook：一個(gè)易用的、簡潔優(yōu)雅的文本編輯器。靈感來源于 Medium 的魅力。https://github.com/raphaelcruzeiro/jquery-notebook
bootstrap-wysiwyg：小巧的、兼容 bootstrap 的所見即所得的富文本編輯器。https://github.com/mindmup/bootstrap-wysiwyg
ckeditor-releases：適用于每個(gè)人的 web 文本編輯器。https://github.com/ckeditor/ckeditor-releases
editor：一個(gè) markdown 編輯器，但仍在開發(fā)中。https://github.com/lepture/editor
EpicEditor：一個(gè)可嵌入的 JavaScript Markdown https://github.com/OscarGodson/EpicEditor)的編輯器，擁有全屏編輯、即時(shí)預(yù)覽、自動(dòng)保存草稿和離線支持等功能。
jsoneditor：查看、編輯和格式化 JSON 的 web 工具。https://github.com/josdejong/jsoneditor
vim.js：擁有持久化 ~/.vimrc 的 Vim 編輯器的 JavaScript 移植版本。https://github.com/coolwanglu/vim.js
Squire：HTML5 富文本編輯器。https://github.com/neilj/Squire
TinyMCE：JavaScript 富文本編輯器。https://github.com/tinymce/tinymce
trix：由 Basecamp 制作，適用于每天寫作的富文本編輯器。https://github.com/basecamp/trix

文件

處理文件的庫。

Papa Parse：一款強(qiáng)大的 CSV 庫，支持解析 CSV 文件/字符串，也能導(dǎo)出 CSV。https://github.com/mholt/PapaParse
jBinary：對(duì)用聲明式語法描述文件類型和數(shù)據(jù)結(jié)構(gòu)的二進(jìn)制文件，進(jìn)行高級(jí) I/O（加載、解析、操作、序列化、存儲(chǔ)）操作。https://github.com/jDataView/jBinary

函數(shù)式編程

函數(shù)式編程庫擴(kuò)展了 JavaScript 的能力。

underscore：JavaScript 的實(shí)用工具。https://github.com/jashkenas/underscore
lodash：提供一致性、可定制、高性能和額外功能的實(shí)用庫。https://github.com/lodash/lodash
Sugar：一個(gè)擴(kuò)展了原生對(duì)象功能的 JavaScript 庫。https://github.com/andrewplummer/Sugar
lazy.js：類似 Underscore，但性能更優(yōu)越 https://github.com/dtao/lazy.js
ramda：一個(gè)針對(duì) JavaScript 程序員的實(shí)用函數(shù)庫。https://github.com/CrossEye/ramda
mout：模塊化的 JavaScript 工具庫。https://github.com/mout/mout
mesh：流數(shù)據(jù)同步工具。https://github.com/crcn/mesh.js

響應(yīng)式編程

響應(yīng)式程序庫擴(kuò)展了 JavaScript 的能力。

RxJs：對(duì) JavaScript 進(jìn)行響應(yīng)式擴(kuò)展。https://github.com/Reactive-Extensions/RxJS
Bacon：JavaScript 的 FPR（函數(shù)式響應(yīng)式編程）庫。https://github.com/baconjs/bacon.js
Kefir：受 Bacon.js 和 RxJS 啟發(fā)的 FRP 庫，專注于高性能和低內(nèi)存消耗。https://github.com/pozadi/kefir
Highland：對(duì) JavaScript 實(shí)用工具的重新思考，Highland 能輕易地管理同步和異步信息，而且僅使用標(biāo)準(zhǔn) JavaScript 和類 Node 流。http://highlandjs.org/
Most.js：高性能 FRP 庫。https://github.com/cujojs/most

數(shù)據(jù)結(jié)構(gòu)

數(shù)據(jù)結(jié)構(gòu)庫用于構(gòu)建一個(gè)更復(fù)雜的應(yīng)用。

immutable-js：不可變的數(shù)據(jù)集合，包括 Sequence、Range、Repeat、Map、OrderedMap、Set 和 sparse Vector。https://github.com/facebook/immutable-js
mori：使用 ClojureScript 持久化數(shù)據(jù)結(jié)構(gòu)和支持原生 JavaScript API 的庫。https://github.com/swannodette/mori
buckets：完整的、經(jīng)過充分測(cè)試和記錄數(shù)據(jù)結(jié)構(gòu)的 JavaScript 庫。https://github.com/mauriciosantos/Buckets-JS
hashmap：簡單的 hashmap 實(shí)現(xiàn)，支持任何類型的鍵值。https://github.com/flesler/hashmap

日期

日期庫。

moment：解析、驗(yàn)證、操作和顯示日期。https://github.com/moment/moment
moment-timezone：基于 moment.js 的時(shí)區(qū)庫。https://github.com/moment/moment-timezone
jquery-timeago：一款支持自動(dòng)更新模糊時(shí)間戳的 jQuery 插件（如："4 分鐘之前"）。https://github.com/rmm5t/jquery-timeago
timezone-js：讓 JavaScript Date 對(duì)象擁有時(shí)區(qū)功能。使用 Olson zoneinfo 文件記錄著時(shí)區(qū)數(shù)據(jù)。https://github.com/mde/timezone-js
date：擁有人性化的 Date() 方法。https://github.com/MatthewMueller/date
ms.js：小巧的毫秒轉(zhuǎn)換工具。https://github.com/rauchg/ms.js
timeago.js：一個(gè)非常輕量級(jí)(~1.7 Kb)的用于將時(shí)間轉(zhuǎn)化成xxx時(shí)間前格式，例如：8分鐘前。http://timeago.org

字符串

字符串庫。

selecting：一個(gè)允許你獲取用戶選定文本的庫。https://github.com/EvandroLG/selecting
underscore.string：擴(kuò)展了 Underscore.js 的字符串操作。https://github.com/epeli/underscore.string
string.js：額外的 JavaScript 字符串方法。https://github.com/jprichardson/string.js
he：健壯的 HTML 實(shí)體編碼/解碼器。https://github.com/mathiasbynens/he
multiline：多行字符串。https://github.com/sindresorhus/multiline
query-string：解析和字符串化 URL 查詢字符串。https://github.com/sindresorhus/query-string
URI.js：URL 操作庫。https://github.com/medialize/URI.js/)
jsurl：輕量的 URL 操作庫。https://github.com/Mikhus/jsurl
sprintf.js：實(shí)現(xiàn)字符串格式化。https://github.com/alexei/sprintf.js
url-pattern：讓 url 和其它字符串進(jìn)行比正則表達(dá)式匹配更簡單。字符串和數(shù)據(jù)可相互轉(zhuǎn)化。https://github.com/snd/url-pattern

數(shù)字

Numeral-js：對(duì)數(shù)字進(jìn)行格式化和操作的庫。https://github.com/adamwdraper/Numeral-js
odometer：流暢的數(shù)字過渡效果。https://github.com/HubSpot/odometer
accounting.js：對(duì)數(shù)字、金錢、貨幣進(jìn)行格式化的輕量庫——完全本地化和無依賴。https://github.com/josscrowcroft/accounting.js
money.js：一個(gè)小巧（1kb）的貨幣轉(zhuǎn)換庫，適用于 web 和 nodeJS。https://github.com/josscrowcroft/money.js
Fraction.js：一個(gè)有理數(shù)庫。https://github.com/infusion/Fraction.js
Complex.js：一個(gè)復(fù)數(shù)庫。https://github.com/infusion/Complex.js
Polynomial.js：一個(gè)多項(xiàng)式庫。https://github.com/infusion/Polynomial.js

存儲(chǔ)

store.js：為所有瀏覽器封裝了 LocalStorage，而沒有使用 cookies 和 flash。隱秘地使用 localStorage、globalStorage 和用戶數(shù)據(jù)。https://github.com/marcuswestin/store.js
localForage：改善后的離線存儲(chǔ)。其封裝了 IndexedDB、WebSQL 和 localStorage，擁有操作簡單和強(qiáng)大的 API。https://github.com/mozilla/localForage
jStorage：jStorage 是一個(gè)簡單的鍵值對(duì)數(shù)據(jù)庫，用于在瀏覽器端存儲(chǔ)數(shù)據(jù)。https://github.com/andris9/jStorage
cross-storage：獲得權(quán)限后，能跨域名本地存儲(chǔ)。https://github.com/zendesk/cross-storage
basket.js：用 localStorage 加載和緩存腳本的資源加載器。https://github.com/addyosmani/basket.js
bag.js：可以緩存腳本和加載資源，與 basket.js 相似，但增加了鍵值對(duì)接口和對(duì) localStorage / websql / https://github.com/nodeca/bag.js)undexedDB 的支持。
basil.js：智能的 JavaScript 數(shù)據(jù)持久層庫。https://github.com/Wisembly/basil.js
jquery-cookie：輕量簡單的、用于讀取、編輯和刪除 cookie 的 jQuery 插件。https://github.com/carhartl/jquery-cookie
Cookies：客戶端 Cookie 操作庫。https://github.com/ScottHamper/Cookies
DB.js：基于 Promise 的、封裝了 IndexedDB 的庫。https://github.com/aaronpowell/db.js/
lawnchair.js：簡單的客戶端 JSON 存儲(chǔ)。https://github.com/brianleroux/lawnchair/

顏色

randomColor：JavaScript 顏色生成器。https://github.com/davidmerfield/randomColor
chroma.js：擁有各種各樣顏色操作的 JavaScript 庫。https://github.com/gka/chroma.js
color：JavaScript 顏色轉(zhuǎn)換和操作庫。https://github.com/MoOx/color
colors：更智能的默認(rèn) web 顏色。https://github.com/mrmrs/colors
PleaseJS：隨機(jī)創(chuàng)建出賞心悅目的顏色和配色方案。https://github.com/Fooidge/PleaseJS
TinyColor：快速、輕巧的顏色操作和轉(zhuǎn)換庫。https://github.com/bgrins/TinyColor
Vibrant.js：從圖像提取主要顏色。https://github.com/jariz/vibrant.js/

國際化和本地化（I18n And L10n）

本地化和國際化 JavaScript 庫

i18next：JavaScript 最簡單的國際化（i18n）方法。https://github.com/i18next/i18next
polyglot：小巧的國際化助手庫。https://github.com/airbnb/polyglot.js
babelfish：i18n 提供友好易懂的 API ，并且內(nèi)置多種支持。https://github.com/nodeca/babelfish/

類

ClassManager：世界上最快、最方便的類系統(tǒng)之一。https://github.com/kogarashisan/ClassManager
klass：用于創(chuàng)建極富表現(xiàn)力的類工具庫。https://github.com/ded/klass
augment：世界上最小且最快的一流 JavaScript 繼承模式。https://github.com/javascript/augment

控制流

async：適用于 node 和瀏覽器的異步工具庫。https://github.com/caolan/async
q：實(shí)現(xiàn)異步的 promise JavaScript 庫。https://github.com/kriskowal/q
step：讓邏輯順序合理化的異步控制流庫。https://github.com/creationix/step/
contra：利用函數(shù)風(fēng)格實(shí)現(xiàn)的異步流控制。https://github.com/bevacqua/contra/
Bluebird：專注于革新功能和性能的，功能齊全的 promoise 庫。https://github.com/petkaantonov/bluebird/
when：快速可靠的、Promises/A+ 規(guī)范的 when() 實(shí)現(xiàn)，而且擁有異步其它的優(yōu)秀特性。https://github.com/cujojs/when
ObjectEventTarget：提供增加了事件監(jiān)聽的原型（與 DOMElement 的 EventTarget 在瀏覽器行為一致）。https://github.com/gartz/ObjectEventTarget

路由

director：一個(gè)小巧的、與 URL 同構(gòu)的路由器。https://github.com/flatiron/director
page.js：受 Express router 啟發(fā)的小型客戶端路由器（約為1200字節(jié)）。https://github.com/visionmedia/page.js
pathjs：簡單、輕量的 web 路由器。https://github.com/mtrpcic/pathjs
crossroads：JavaScript 路由。https://github.com/millermedeiros/crossroads.js
davis.js：使用 pushState、RESTful 風(fēng)格和可降級(jí)的 JavaScript 路由器。https://github.com/olivernn/davis.js
angular-ui-router：基于AngularJS的可嵌套路由。http://angular-ui.github.io/ui-router/
react-router: Declarative routing for React [官方](https://github.com/ReactTraining/react-router
vue-router: Declarative routing for Vue [官方](https://router.vuejs.org/

安全性

DOMPurify：針對(duì) HTML、MathML 和 SVG 的僅支持DOM、快速、高容錯(cuò)的 XSS 過濾器。https://github.com/cure53/DOMPurify
js-xss：通過白名單配置，即可過濾不信任的 HTML（防止 XSS 攻擊）。https://github.com/leizongmin/js-xss

日志

log：帶有樣式的 Console.log。https://github.com/adamschwartz/log
Conzole：對(duì) JavaScript 原生 console 對(duì)象方法和功能進(jìn)行封裝的 debug 面板，使其顯示在頁面內(nèi)。https://github.com/Oaxoa/Conzole
console.log-wrapper：將日志清晰地記錄到 console，且兼容所有瀏覽器。https://github.com/patik/console.log-wrapper
loglevel：最輕量的 JavaScript 日志記錄工具庫，向封裝后可用的 console.log 方法增加可靠的日志等級(jí)。https://github.com/pimterry/loglevel
minilog：輕量的、用流式 API 顯示的、可用于客戶端和服務(wù)器端的日志記錄庫。http://mixu.net/minilog/

正則表達(dá)式

RegEx101：在線的 JavaScript 正則表達(dá)式測(cè)試器和調(diào)試器。同時(shí)支持 Python、PHP 和 PCRE。https://regex101.com/#javascript
RegExr：用于創(chuàng)建、測(cè)試和學(xué)習(xí)正則表達(dá)式的 HTML/JS 工具。http://regexr.com/
RegExpBuilder：使用鏈?zhǔn)椒椒▌?chuàng)建正則表達(dá)式。https://github.com/thebinarysearchtree/regexpbuilderjs

媒體

Ion.Sound：可用于任何網(wǎng)頁上簡單音頻。https://github.com/IonDen/ion.sound

語音命令

annyang：向網(wǎng)站添加語音命令的語音識(shí)別庫。https://github.com/TalAter/annyang
voix.js：向網(wǎng)站、app 或游戲添加語音命令的 JavaScript 庫。https://github.com/pazguille/voix

API

bottleneck：強(qiáng)大的頻率限制器，使調(diào)節(jié)流量變得更容易。https://github.com/SGrondin/bottleneck
oauth-signature-js：適用于 node 和瀏覽器的 OAuth 1.0a 簽名生成器。https://github.com/bettiolo/oauth-signature-js
amygdala：為 Web 應(yīng)用提供 RESTful HTTP 客戶端解決方案。https://github.com/lincolnloop/amygdala
jquery.rest：一個(gè)讓 RESTful API 更易使用的 jQuery 插件。https://github.com/jpillora/jquery.rest

視覺檢測(cè)

tracking.js：在 web 上實(shí)現(xiàn)計(jì)算視覺的一種現(xiàn)代方法。https://github.com/eduardolundgren/tracking.js
ocrad.js：通過 Emscripten 用 JavaScript 實(shí)現(xiàn) OCR（光學(xué)字符識(shí)別）。https://github.com/antimatter15/ocrad.js

瀏覽器檢測(cè)

bowser：一個(gè)瀏覽器檢測(cè)器。https://github.com/ded/bowser

性能分析

easy-monitor：一個(gè)輕量級(jí)實(shí)時(shí) Node.js 項(xiàng)目的內(nèi)核性能分析工具。http://www.easy-monitor.cn/document

UI

代碼高亮

Highlight.js：JavaScript 語法高亮器。https://github.com/isagalaev/highlight.js
PrismJS：輕量、健壯和優(yōu)雅的語法高亮器。https://github.com/PrismJS/prism

加載狀態(tài)

指示加載狀態(tài)的庫。

Mprogress.js：創(chuàng)建谷歌 Material 設(shè)計(jì)風(fēng)格的線性進(jìn)度條。https://github.com/lightningtgc/MProgress.js
NProgress：在 Ajax'y 應(yīng)用顯示細(xì)長型進(jìn)度條 http://ricostacruz.com/nprogress/
Spin.js：一個(gè)旋轉(zhuǎn)的進(jìn)度指示器。https://github.com/fgnass/spin.js
progress.js：為頁面任何對(duì)象創(chuàng)建和管理進(jìn)度條。https://github.com/usablica/progress.js
progressbar.js：用 SVG path 動(dòng)畫制作的、漂亮和響應(yīng)式的進(jìn)度條。https://github.com/kimmobrunfeldt/progressbar.js
pace：自動(dòng)向你的網(wǎng)站添加一個(gè)進(jìn)度條。https://github.com/HubSpot/pace
topbar：小巧漂亮的、與網(wǎng)站同寬的進(jìn)度指示器。https://github.com/buunguyen/topbar
nanobar：非常輕量的進(jìn)度條。不依賴 jQuery。https://github.com/jacoborus/nanobar
PageLoadingEffects：使用 SVG 動(dòng)畫展現(xiàn)新內(nèi)容的現(xiàn)代方式。https://github.com/codrops/PageLoadingEffects
SpinKit：運(yùn)用 CSS 動(dòng)畫的加載指示器集合。https://github.com/tobiasahlin/SpinKit
Ladda：內(nèi)置在按鈕的加載指示器。https://github.com/hakimel/Ladda
css-loaders：運(yùn)用 CSS 動(dòng)畫的旋轉(zhuǎn)加載指示器的集合。https://github.com/lukehaas/css-loaders

除了上述這些庫，還有收藏在 Codepen 的，另外還有 Ajaxload，Preloaders 和 CSSLoad 這些生成器。

驗(yàn)證

Parsley.js：不用寫一行 JavaScript 代碼即可在前端驗(yàn)證表單。https://github.com/guillaumepotier/Parsley.js
jquery-validation：jQuery 驗(yàn)證插件。https://github.com/jzaefferer/jquery-validation
validator.js：字符串驗(yàn)證和過濾（在使用用戶輸入之前清理用戶輸入中的有害或危險(xiǎn)字符的操作）。https://github.com/chriso/validator.js
validate.js：受 CodeIgniter 啟發(fā)的輕量表單驗(yàn)證 JavaScript 庫。https://github.com/rickharrison/validate.js
validatr：跨瀏覽器的 HTML5 表單驗(yàn)證庫。https://github.com/jaymorrow/validatr/
BootstrapValidator：是驗(yàn)證表單域中最好的 jQuery 插件。要與 Bootstrap 3 一起使用。https://github.com/nghuuphuoc/bootstrapvalidator
is.js：檢查類型、正則表達(dá)式、是否存在、時(shí)間等。https://github.com/arasatasaygin/is.js
FieldVal：多用途驗(yàn)證庫。同時(shí)支持同步和異步驗(yàn)證。https://github.com/FieldVal/fieldval-js

鍵盤封裝器

mousetrap：處理鍵盤快捷鍵的 JavaScript 庫。https://github.com/ccampbell/mousetrap
keymaster：定義和調(diào)度鍵盤快捷鍵的小型庫。https://github.com/madrobby/keymaster
hotkeys.js：一個(gè)強(qiáng)健的 Javascript 庫用于捕獲鍵盤輸入和輸入的組合鍵，它易于使用，沒有依賴。https://jaywcjlove.github.io/hotkeys/
Keypress：鍵入捕捉工具庫，任何鍵都可以成為一個(gè)修飾健。https://github.com/dmauro/Keypress
KeyboardJS：一個(gè)用于綁定鍵盤組合的 JavaScript 庫，讓你脫離快捷鍵和快捷鍵組合沖突的痛苦。https://github.com/RobertWHurst/KeyboardJS
jquery.hotkeys：jQuery Hotkeys 能讓你在代碼任何的地方監(jiān)聽鍵盤事件，并幾乎支持所有按鍵組合。https://github.com/jeresig/jquery.hotkeys
jwerty：令人驚嘆的鍵盤事件處理庫。https://github.com/keithamus/jwerty

瀏覽和引導(dǎo)

intro.js：這是一個(gè)介紹新功能的很好方式，能一步步地引導(dǎo)用戶瀏覽你的網(wǎng)站和項(xiàng)目。https://github.com/usablica/intro.js
shepherd：通過引導(dǎo)讓用戶瀏覽你的應(yīng)用程序。https://github.com/HubSpot/shepherd
bootstrap-tour：應(yīng)用 Twitter Bootstrap 彈出框?qū)Ξa(chǎn)品進(jìn)行快速簡單的引導(dǎo)。https://github.com/sorich87/bootstrap-tour
tourist：簡單、靈活的應(yīng)用引導(dǎo)介紹庫。https://github.com/easelinc/tourist
chardin.js：簡單的應(yīng)用遮罩層介紹。https://github.com/heelhook/chardin.js
pageguide：使用 jQuery 和 CSS3 的 web 頁面元素交互引導(dǎo)庫。https://github.com/tracelytics/pageguide
hopscotch：讓開發(fā)者更容易向其頁面產(chǎn)品添加引導(dǎo)的框架。https://github.com/linkedin/hopscotch
joyride：基于 jQuery 的功能引導(dǎo)插件。https://github.com/zurb/joyride
focusable：通過向頁面其余部分添加遮罩層，使焦點(diǎn)聚集在特定 DOM 元素。https://github.com/zzarcon/focusable

通知

messenger：為你的應(yīng)用添加 Growl-style 彈框和信息（Crowl 是 Mac OS X 下的一個(gè)通知系統(tǒng)）。https://github.com/HubSpot/messenger
noty：jQuery 通知插件。https://github.com/needim/noty
pnotify：適用于 Bootstrap、jQuery UI 和 Web Notifications Draft 的 JavaScript 通知庫。https://github.com/sciactive/pnotify
toastr：用來顯示簡單的，會(huì)自動(dòng)到期的信息窗口）簡單的彈出框通知（toast notifications https://github.com/CodeSeven/toastr
humane-js：一個(gè)簡單、時(shí)髦的瀏覽器通知系統(tǒng)。https://github.com/wavded/humane-js
smoke.js：與框架無關(guān)的、能夠自定義樣式的 JavaScript 彈框系統(tǒng)。https://github.com/hxgf/smoke.js

幻燈片

Swiper：使用硬件加速過渡的移動(dòng)設(shè)備觸控滑塊框架。https://github.com/nolimits4web/Swiper
slick：你所需要的最后一個(gè)輪播插件。https://github.com/kenwheeler/slick
slidesJs：響應(yīng)式的 jQuery（1.7.1+）幻燈片插件，具有觸摸、 CSS3 過渡等特性。http://www.slidesjs.com/
FlexSlider：一款令人驚嘆的、全響應(yīng)式的幻燈片 jQuery 插件。https://github.com/woothemes/FlexSlider
unslider：最簡單的幻燈片 jQuery 插件。https://github.com/idiot/unslider
colorbox：輕量、可自定義的燈箱 jQuery 插件。https://github.com/jackmoore/colorbox
fancyBox：提供了良好優(yōu)雅的方式，為頁面上的圖片、html 內(nèi)容和多媒體添加縮放功能的工具。https://github.com/fancyapps/fancyBox
sly：基于項(xiàng)導(dǎo)航的、支持單向滾動(dòng)的 JavaScript 庫。https://github.com/darsain/sly
vegas：向頁面添加漂亮的全屏背景的 jQuery 插件，甚至允許幻燈片。https://github.com/jaysalvat/vegas
Sequence：用于創(chuàng)建響應(yīng)式的幻燈片、演示、旗幟廣告和以步驟為基礎(chǔ)的應(yīng)用的 CSS 動(dòng)畫框架。https://github.com/IanLunn/Sequence
baguetteBox.js：易于使用的、用純 JavaScript 實(shí)現(xiàn)的遮罩層腳本。https://github.com/feimosi/baguetteBox.js
reveal.js：用 HTML 創(chuàng)建漂亮演示控件的框架。https://github.com/hakimel/reveal.js
PhotoSwipe：適用于移動(dòng)設(shè)備和桌面電腦的、模塊化和不無依賴框架的 JavaScript 畫廊控件。https://github.com/dimsemenov/PhotoSwipe
jcSlider：用 CSS 動(dòng)畫實(shí)現(xiàn)的響應(yīng)式幻燈片 jQuery 插件。https://github.com/JoanClaret/jcSlider
basic-jquery-slider：易于使用、指定主題和定制化。https://github.com/jcobb/basic-jquery-slider
unslider：這是最簡單的幻燈片 jQuery 插件。https://github.com/idiot/unslider
viewerjs：原生js實(shí)現(xiàn)的圖片查看器。https://fengyuanchen.github.io/viewerjs/
jQuery.adaptive-slider：帶有自適應(yīng)顏色標(biāo)題和導(dǎo)航的幻燈片 jQuery 插件。https://github.com/creative-punch/jQuery.adaptive-slider/
slidr：可添加一些幻燈片效果。https://github.com/bchanx/slidr
Flickity：可觸摸的、響應(yīng)式的和可輕彈的畫廊。https://github.com/metafizzy/flickity

滑塊控件

Ion.RangeSlider：強(qiáng)大的、易于自定義的范圍滑塊選擇庫，支持很多配置和皮膚。https://github.com/IonDen/ion.rangeSlider
jQRangeSlider：支持日期的滑塊選擇庫。https://github.com/ghusse/jQRangeSlider
noUiSlider：輕量無冗余的、高度定制化的滑塊選擇庫。https://github.com/leongersen/noUiSlider
rangeslider.js：HTML5 input 區(qū)域滑塊元素。https://github.com/andreruffert/rangeslider.js

表單組件

輸入

typeahead.js：快速的、功能齊全的自動(dòng)補(bǔ)全庫。https://github.com/twitter/typeahead.js
tag-it：處理多標(biāo)簽字段以及標(biāo)簽建議/自動(dòng)完成的 jQuery UI 插件。https://github.com/aehlke/tag-it
At.js：向你的應(yīng)用添加類似 Github 的自動(dòng)完成提示功能。https://github.com/ichord/At.js
Placeholders.js：JavaScript 補(bǔ)全 HTML5 占位符的屬性。https://github.com/jamesallardice/Placeholders.js
fancyInput：利用 CSS3 效果讓輸入更有趣。https://github.com/yairEO/fancyInput
jQuery-Tags-Input：利用這個(gè) jQuery 插件，可奇妙地將一個(gè)簡單的文本輸入轉(zhuǎn)換成一個(gè)酷酷的標(biāo)簽列表。https://github.com/xoxco/jQuery-Tags-Input
vanilla-masker：一個(gè)純 JavaScript 實(shí)現(xiàn)的輸入控制庫。https://github.com/BankFacil/vanilla-masker
Ion.CheckRadio：一個(gè)為復(fù)選框和單選按鈕添加樣式的 jQuery 庫，支持多種皮膚。https://github.com/IonDen/ion.checkRadio

日歷

pickadate.js：對(duì)移動(dòng)設(shè)備友好的、響應(yīng)式的和輕量的 jQuery 日期 & 時(shí)間輸入選擇器。https://github.com/amsul/pickadate.js
bootstrap-datepicker：基于 bootstrap 的日歷選擇器。https://github.com/eternicode/bootstrap-datepicker
Pikaday：一個(gè)嶄新的 JavaScript 日期選擇器 —— 輕量、無依賴和模塊化的 CSS。https://github.com/dbushell/Pikaday
fullcalendar：全尺寸、支持拖放事件的日歷（jQuery 插件）。https://github.com/fullcalendar/fullcalendar
rome：可定制的日期（和時(shí)間）選擇器。無依賴，可選 UI。https://github.com/bevacqua/rome
datedropper：datedropper 是一個(gè) jQuery 插件，它提供了快速簡易的方式去管理日期輸入框。https://github.com/felicegattuso/datedropper
flatpickr：flatpickr 是一個(gè)輕量、強(qiáng)大、無依賴的日歷和時(shí)間選擇器插件，支持移動(dòng)端，并支持React、Ember、Angular和Vue。https://chmln.github.io/flatpickr/

選擇

selectize.js：Selectize 是文本框和選擇框的混合體。它基于jQuery，擁有自動(dòng)完成和鍵盤感應(yīng)下拉列表功能，可用于標(biāo)簽、聯(lián)系人列表等。https://github.com/brianreavis/selectize.js
select2：它基于 jQuery，是選擇框（select box）的替代品。支持搜索、遠(yuǎn)程數(shù)據(jù)集和無限滾動(dòng)。https://github.com/select2/select2
chosen：可以讓冗長不便的選擇框更友好的庫。https://github.com/harvesthq/chosen

文件上傳

jQuery-File-Upload：File Upload 是一個(gè)支持多文件選擇、文件拖放、進(jìn)度條、驗(yàn)證和圖片、音頻、視頻預(yù)覽的 https://github.com/blueimp/jQuery-File-Upload)jQuery 插件。
dropzone：Dropzone 是一個(gè)易于使用且支持多文件拖放的庫。其支持圖片預(yù)覽并且擁有很好的進(jìn)度條效果。https://github.com/enyo/dropzone
flow.js：一個(gè)通過 HTML5 的 File API ，提供多個(gè)同時(shí)鏈接的、穩(wěn)定的、容錯(cuò)的、可恢復(fù)的/可重新開始的文件上傳庫。https://github.com/flowjs/flow.js
fine-uploader：一個(gè)帶有進(jìn)度條、拖放功能和支持直接上傳到 S3 （Amazon Simple Storage Service，亞馬遜簡易存儲(chǔ)服務(wù)）的多文件上傳插件。https://github.com/FineUploader/fine-uploader
FileAPI：JavaScript 文件工具集合。支持多文件上傳、拖放和文件分塊上傳。對(duì)于圖像，支持裁剪、調(diào)整大小和根據(jù) EXIF 自動(dòng)調(diào)整方向。https://github.com/mailru/FileAPI
plupload：處理文件上傳的 JavaScript https://github.com/moxiecode/plupload)API，其支持多文件選擇、文件類型過濾、分塊請(qǐng)求、客戶端圖片縮放和根據(jù)不同的運(yùn)行環(huán)境選擇 HTML5、Silverlight 和 Flash。

其它

form：jQuery 表單插件。https://github.com/malsup/form
Garlic.js：自動(dòng)在本地保存表單文本和選擇框的值，直到表單被提交。https://github.com/guillaumepotier/Garlic.js
Countable：對(duì)某個(gè) HTML 元素包含文本的段落數(shù)、單詞數(shù)和字符數(shù)進(jìn)行統(tǒng)計(jì)的 JavaScript 函數(shù)。https://github.com/RadLikeWhoa/Countable
card：只需一行代碼，讓信用卡表單變得更友好。https://github.com/jessepollak/card
stretchy：自適應(yīng)大小的 form 元素，表單本應(yīng)該是這樣的。https://github.com/LeaVerou/stretchy
list.js：向表格、列表等 HTML 元素添加搜索、排序、過濾和自適應(yīng)功能的庫。在已有 HTML 上增加可視化。 https://github.com/javve/list.js

提示

tipsy：基于 jQuery 的 Fackbook 風(fēng)格的提示工具（tooltip）。https://github.com/jaz303/tipsy
opentip：開源且基于 prototype 框架的 JavaScript 工具提示庫。https://github.com/enyo/opentip
qTip2：非常強(qiáng)大的工具提示庫。https://github.com/qTip2/qTip2
tooltipster：一個(gè)工具提示 jQuery 插件。https://github.com/iamceege/tooltipster
simptip：用 Sass 制作的、簡單的工具提示。https://github.com/arashmanteghi/simptip
jquery-popup-overlay：是一個(gè)響應(yīng)式的和可訪問性強(qiáng)的模態(tài)框（modal）和工具提示框 jQuery 插件。https://github.com/vast-engineering/jquery-popup-overlay

模態(tài)框和彈出框

Magnific-Popup：專注于性能、輕量、響應(yīng)式的燈箱（lightbox）腳本。https://github.com/dimsemenov/Magnific-Popup
jquery-popbox：jQuery 提示框插件。https://github.com/gristmill/jquery-popbox
jquery.avgrund.js：一種新的定于彈出的模態(tài)框 jQuery 插件。https://github.com/voronianski/jquery.avgrund.js
vex：新的、擁有高度可配置和易于改變樣式功能的對(duì)話框庫。https://github.com/HubSpot/vex
bootstrap-modal：對(duì) Bootstrap 默認(rèn)的模態(tài)框類進(jìn)行擴(kuò)展。其支持響應(yīng)式、可堆疊和 ajax 等。https://github.com/jschr/bootstrap-modal
css-modal：純 CSS 打造的模態(tài)框。https://github.com/drublic/css-modal
jquery-popup-overlay：是一個(gè)響應(yīng)式的和可訪問性強(qiáng)的模態(tài)框和工具提示框（tooltips）jQuery 插件。https://github.com/vast-engineering/jquery-popup-overlay
layer：國內(nèi)最多人使用的web彈層組件。https://github.com/sentsin/layer/

滾動(dòng)

scrollMonitor：滾動(dòng)發(fā)生時(shí)，可以監(jiān)聽元素的、簡單、快速的 API。https://github.com/sakabako/scrollMonitor
headroom：除非你需要顯示頁面頭部（header），否則將隱藏它，以騰出頁面頭部空間。https://github.com/WickyNilliams/headroom.js
onepage-scroll：創(chuàng)建一個(gè)類似 Apple 的單頁面滾動(dòng)網(wǎng)站（iPhone 5S 網(wǎng)站）。https://github.com/peachananr/onepage-scroll
iscroll：高性能、輕量、無依賴、兼容多平臺(tái)的 JavaScript 滾動(dòng)組件。https://github.com/cubiq/iscroll
skrollr：獨(dú)立（不依賴 jQuery）的視差滾動(dòng)庫，適用于移動(dòng)設(shè)備（Android + iOS）和桌面電腦。https://github.com/Prinzhorn/skrollr
parallax：面向智能設(shè)備的視差引擎。https://github.com/wagerfield/parallax
stellar.js：讓視差滾動(dòng)變簡單。https://github.com/markdalgleish/stellar.js
plax：基于 jQuery 的視差庫。https://github.com/cameronmcefee/plax
jparallax：創(chuàng)建可交互視差效果的 jQuery 插件。https://github.com/stephband/jparallax
fullPage：簡單和易于使用的、用于創(chuàng)建全屏滾動(dòng)網(wǎng)站的插件（也被稱為單頁面網(wǎng)站）。https://github.com/alvarotrigo/fullPage.js
ScrollMenu：讓老舊無聊的滾動(dòng)條煥然一新。https://github.com/s-yadav/ScrollMenu

菜單

jQuery-menu-aim：當(dāng)用戶光標(biāo)放在特定下拉菜單項(xiàng)時(shí)觸發(fā)事件。可制作響應(yīng)式的、大數(shù)據(jù)量的下拉菜單，如 Amazon 的。https://github.com/kamens/jQuery-menu-aim
jQuery contextMenu：右鍵菜單（contextMenu）管理工具。https://github.com/swisnl/jQuery-contextMenu
Slideout：為移動(dòng)設(shè)備的 web 應(yīng)用制作出響應(yīng)式的、可觸摸滑出的導(dǎo)航菜單。https://github.com/mango/slideout
Slide and swipe：一個(gè)基于 touchSwipe 庫的滑出菜單插件。https://github.com/JoanClaret/slide-and-swipe-menu

表格/柵格

jTable：基于 CRUD 表創(chuàng)建 AJAX 的 jQuery 插件。https://github.com/hikalkan/jtable
DataTables：這是一個(gè)非常靈活的工具，在漸進(jìn)增強(qiáng)的基礎(chǔ)上，將高級(jí)的交互效果加到 HTML 表格。（jQuery 插件） http://www.datatables.net/)
floatThead：（jQuery 插件）鎖定表格頭部，只允許表格內(nèi)容滾動(dòng)。適用于任何表格，而且不需要額外的 html 或 css。https://github.com/mkoryak/floatThead
Masonry：瀑布流式的網(wǎng)格布局庫。http://masonry.desandro.com/
Packery：使用裝箱算法（bin-packing）的網(wǎng)格布局庫。支持拖拽布局。http://packery.metafizzy.co/
Isotope：可過濾和可排序的網(wǎng)格布局的庫，它能實(shí)現(xiàn) Masonry、Packery 等布局。http://isotope.metafizzy.co/

框架

Semantic UI：擁有大量主題和元素的 UI 套件。http://semantic-ui.com/

手勢(shì)

hammer.js：擁有多種觸摸手勢(shì)的 JavaScript 庫。https://github.com/hammerjs/hammer.js
touchemulator：在桌面電腦模仿觸摸輸入。https://github.com/hammerjs/touchemulator
Dragula：超級(jí)易于使用的拖拽庫。https://github.com/bevacqua/dragula/

觸摸

fastclick.js：去除觸屏用戶300ms點(diǎn)擊延誤。https://github.com/ftlabs/fastclick
dropload.js：移動(dòng)端下拉刷新，上拉加載更多。https://github.com/ximan/dropload
touchslide.js：觸屏滑動(dòng)特效。http://www.superslide2.com/touchSlide/

地圖

Leaflet：對(duì)移動(dòng)設(shè)備友好的、可交互的地圖 JavaScript 庫。https://github.com/Leaflet/Leaflet
Cesium：開源的、基于 WebGL 實(shí)現(xiàn)的虛擬地球儀和地圖引擎。https://github.com/AnalyticalGraphicsInc/cesium
gmaps：以最簡單的方式使用 Google 地圖。https://github.com/HPNeo/gmaps
polymaps：一個(gè)免費(fèi)的、兼容現(xiàn)代 web 瀏覽器的、用于制作動(dòng)態(tài)可交互的地圖 JavaScript 庫。https://github.com/simplegeo/polymaps
kartograph.js：開源的 Kartograph SVG 地圖渲染器。https://github.com/kartograph/kartograph.js
mapbox.js：Mapbox 的 API，Leaflet 的插件。https://github.com/mapbox/mapbox.js
jqvmap：矢量地圖 jQuery 插件。https://github.com/manifestinteractive/jqvmap
OpenLayers3：高性能的、功能豐富的庫，能滿足你對(duì)地圖所有需求。http://openlayers.org/

視頻/音頻

prettyembed.js：更完美地嵌入 YouTube —— 擁有很好的選項(xiàng)，如高分辨率的預(yù)覽圖、嵌入選項(xiàng)的高級(jí)定制和可選的 https://github.com/mike-zarandona/prettyembed.js)FitVids 支持。
html5media：能在所有主流瀏覽器播放多媒體標(biāo)簽中定義的多媒體文件。https://github.com/etianen/html5media
Play-em JS：Play'em 是一個(gè) JavaScript 組件，它能管理音樂/視頻播放順序，通過在一個(gè) DIV 元素里嵌入幾個(gè)播放器（Youtube、Soundcloud 和 Vimeo）來控制一系列歌曲的播放。https://github.com/adrienjoly/playemjs
polyplayer：將 YouTube、Soundcloud 和 Vimeo 播放器的 API 統(tǒng)一成一套。https://github.com/Acconut/polyplayer
flowplayer：HTML5 視頻播放器 https://flowplayer.org/)、[Github](https://github.com/flowplayer/flowplayer
mediaelement：讓 HTML5、 Flash 播放器和模仿 HTML5 媒介元素 API 的 Silverlight shim，在所有瀏覽器擁有一致的 UI。http://mediaelementjs.com/)、[Github](https://github.com/johndyer/mediaelement
SoundJS：讓音頻在 web 上運(yùn)行更簡單的庫。它為不同瀏覽器提供了一致的 API。https://github.com/CreateJS/SoundJS

動(dòng)畫

velocity：加速 JavaScript 動(dòng)畫。https://github.com/julianshapiro/velocity
jquery.transit：擁有超級(jí)流暢的 CSS3 變換和過渡的 jQuery 插件。https://github.com/rstacruz/jquery.transit
impess.js：在 HTML 文檔里，運(yùn)用 CSS3 變換和過渡制作類似 Prezi 的展現(xiàn)效果。https://github.com/impress/impress.js
bounce.js：可以立刻創(chuàng)建有趣的 CSS3 動(dòng)畫。https://github.com/tictail/bounce.js
GreenSock-JS：適用于所有主流瀏覽器的高性能 HTML5 動(dòng)畫。https://github.com/greensock/GreenSock-JS
TransitionEnd：TransitionEnd 是一個(gè)運(yùn)用 transitonend 事件的、跨瀏覽器的庫。https://github.com/EvandroLG/transitionEnd
Dynamics.js：用于創(chuàng)建基于物理知識(shí)的 CSS 動(dòng)畫庫。https://github.com/michaelvillar/dynamics.js

圖片處理

lena.js：擁有濾鏡和實(shí)用功能的圖像處理庫。https://github.com/davidsonfellipe/lena.js
pica：高質(zhì)量地調(diào)整圖片大小（擁有快速的、純 JS 實(shí)現(xiàn)的 Lanczos 濾鏡算法）。https://github.com/nodeca/pica
cropper：一個(gè)簡單的圖像裁剪 jQuery 插件。https://github.com/fengyuanchen/cropper
AlloyImage：騰訊前端開源的基于HTML5的專業(yè)級(jí)圖像處理開源引擎。https://github.com/AlloyTeam/AlloyImage

ECMAScript 6

es6features：ECMAScript 6 特性概述。https://github.com/lukehoban/es6features
es6-features：ECMAScript 6: 特性概述和比較。https://github.com/rse/es6-features
ECMAScript 6 compatibility table ：Compatibility tables 展示了各種平臺(tái)上所有 ECMAScript 6 特性的支持程度。http://kangax.github.io/compat-table/es6/
Babel (Formerly 6to5)：將 ES6+ 代碼轉(zhuǎn)換成純 ES5。https://github.com/babel/babel
Traceur compiler：ES6 特性轉(zhuǎn) ES5。包括 classes、generators、promises、destructuring https://github.com/google/traceur-compiler)patterns、default parameters 等。

軟件開發(fā)工具包(SDK)

javascript-sdk-design：從工作和個(gè)人經(jīng)驗(yàn)中提煉出來的 JavaScript SDK 設(shè)計(jì)指導(dǎo)。https://github.com/huei90/javascript-sdk-design

大雜燴

echo：利用 data-* 屬性延遲加載圖片。https://github.com/toddmotto/echo
picturefill：響應(yīng)式圖片顯示插件，使瀏覽器支持 srcset、size 屬性。https://github.com/scottjehl/picturefill
platform.js：一個(gè)平臺(tái)檢測(cè)庫，幾乎適用于所有 JavaScript 平臺(tái)。https://github.com/bestiejs/platform.js
json3：一個(gè)現(xiàn)代 JSON 實(shí)現(xiàn)庫，幾乎兼容所有 JavaScript 平臺(tái)。https://github.com/bestiejs/json3
Logical Or Not：一個(gè)關(guān)于 JavaScript 特性的游戲。http://gabinaureche.com/logicalornot/
BitSet.js：實(shí)現(xiàn)位向量的 JavaScript 庫。https://github.com/infusion/BitSet.js
Edge.js：運(yùn)行在一個(gè)進(jìn)程中運(yùn)行.NET和Node.js代碼。http://tjanczuk.github.io/edge/)、[GitHub](https://github.com/tjanczuk/edge

介

在很久以前，js只是簡單的作為瀏覽器的交互操作而存在，一般都是非常短小的腳本，所以都是獨(dú)立存在的。

但是隨著現(xiàn)代瀏覽器的發(fā)展，特別是nodejs的出現(xiàn)，js可以做的事情變得越來越多也越來越復(fù)雜。于是我們就需要模塊系統(tǒng)來組織不同用途的腳本，進(jìn)行邏輯的區(qū)分和引用。

今天將會(huì)給大家介紹一下js中的模塊系統(tǒng)。

CommonJS和Nodejs

CommonJS是由Mozilla公司在2009年1月份提出來了。沒錯(cuò)，就是那個(gè)firfox的公司。

最初的名字叫做ServerJS，在2009年8月的時(shí)候?yàn)榱吮硎具@個(gè)標(biāo)準(zhǔn)的通用性，改名為CommonJS。

CommonJS最主要的應(yīng)用就是服務(wù)端的nodejs了。瀏覽器端是不直接支持CommonJS的，如果要在瀏覽器端使用，則需要進(jìn)行轉(zhuǎn)換。

CommonJS使用require()來引入模塊，使用module.exports來導(dǎo)出模塊。

我們看一個(gè)CommonJS的例子：

require("module"); 
require("../file.js"); 
exports.doStuff=function() {}; 
module.exports=someValue;

注意，CommonJS是同步加載的。

AMD異步模塊加載

AMD的全稱是Asynchronous Module Definition 。它提供了一個(gè)異步加載模塊的模式。

AMD是RequireJS在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。

異步加載的好處就是可以在需要使用模塊的時(shí)候再進(jìn)行加載，從而減少了一次性全部加載的時(shí)間，尤其是在瀏覽器端，可以提升用戶的體驗(yàn)。

看下AMD加載模塊的定義：

 define(id?, dependencies?, factory);

AMD是通過define來定義和加載依賴模塊的。

其中id表示要定義的模塊的名字，dependencies表示這個(gè)模塊的依賴模塊，factory是一個(gè)函數(shù)，用來初始化模塊或者對(duì)象。

我們看一個(gè)例子：

   define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb=function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });

這個(gè)例子中，我們定義了一個(gè)alpha模塊，這個(gè)模塊需要依賴”require”, “exports”, “beta”三個(gè)模塊。

并且在factory中導(dǎo)出了beta模塊的verb方法。

define中id和dependencies都不是必須的：

//無id
  define(["alpha"], function (alpha) {
       return {
         verb: function(){
           return alpha.verb() + 2;
         }
       };
   });

//無依賴
   define({
     add: function(x, y){
       return x + y;
     }
   });

甚至我們可以在AMD中使用CommonJS：

   define(function (require, exports, module) {
     var a=require('a'),
         b=require('b');

     exports.action=function () {};
   });

定義完之后，AMD使用require來加載模塊：

require([dependencies], function(){});

第一個(gè)參數(shù)是依賴模塊，第二個(gè)參數(shù)是回調(diào)函數(shù)，會(huì)在前面的依賴模塊都加載完畢之后進(jìn)行調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊。

require(["module", "../file"], function(module, file) { /* ... */ });

require加載模塊是異步加載的，但是后面的回調(diào)函數(shù)只會(huì)在所有的模塊都加載完畢之后才運(yùn)行。

CMD

CMD是SeaJS在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。它的全稱是Common Module Definition。

CMD也是使用define來定義模塊的，CMD推崇一個(gè)文件作為一個(gè)模塊：

define(id?, deps?, factory)

看起來和AMD的define很類似，都有id，依賴模塊和factory。

這里的factory是一個(gè)函數(shù)，帶有三個(gè)參數(shù)，function(require, exports, module)

我們可以在factory中通過require來加載需要使用的模塊，通過exports來導(dǎo)出對(duì)外暴露的模塊，module表示的是當(dāng)前模塊。

我們看一個(gè)例子：

// 定義模塊  myModule.js
define(function(require, exports, module) {
  var=require('jquery.js')('div').addClass('active');
});

// 加載模塊
seajs.use(['myModule.js'], function(my){

});

所以總結(jié)下AMD和CMD的區(qū)別就是，AMD前置要加載的依賴模塊，在定義模塊的時(shí)候就要聲明其依賴的模塊。

而CMD加載完某個(gè)依賴模塊后并不執(zhí)行，只是下載而已，只有在用到的時(shí)候才使用require進(jìn)行執(zhí)行。

ES modules和現(xiàn)代瀏覽器

ES6和現(xiàn)代瀏覽器對(duì)模塊化的支持是通過import和export來實(shí)現(xiàn)的。

首先看下import和export在瀏覽器中支持的情況：

首先我們看下怎么使用export導(dǎo)出要暴露的變量或者方法：

export const name='square';

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle=color;
  ctx.fillRect(x, y, length, length);

  return {
    length: length,
    x: x,
    y: y,
    color: color
  };
}

基本上，我們可以使用export導(dǎo)出var, let, const變量或者function甚至class。前提是這些變量或者函數(shù)處于top-level。

更簡單的辦法就是將所有要export的放在一行表示：

export { name, draw, reportArea, reportPerimeter };

export實(shí)際上有兩種方式，named和default。上面的例子中的export是named格式，因?yàn)槎加凶约旱拿帧?/p>

下面看下怎么使用export導(dǎo)出默認(rèn)的值：

// export feature declared earlier as default
export { myFunction as default };

// export individual features as default
export default function () { ... } 
export default class { .. }

named可以導(dǎo)出多個(gè)對(duì)象，而default只可以導(dǎo)出一個(gè)對(duì)象。

導(dǎo)出之后，我們就可以使用import來導(dǎo)入了：

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

如果導(dǎo)出的時(shí)候選擇的是default，那么我們?cè)趇mport的時(shí)候可以使用任何名字：

// file test.js
let k; export default k=12;

// some other file
import m from './test'; // 因?yàn)閷?dǎo)出的是default，所以這里我們可以使用import m來引入
console.log(m);        // will log 12

我們可以在一個(gè)module中使用import和export從不同的模塊中導(dǎo)入，然后在同一個(gè)模塊中導(dǎo)出，這樣第三方程序只需要導(dǎo)入這一個(gè)模塊即可。

export { default as function1,
         function2 } from 'bar.js';

上面的export from 等價(jià)于：

import { default as function1,
         function2 } from 'bar.js';
export { function1, function2 };

上面的例子中，我們需要分別import function1 function2才能夠使用，實(shí)際上，我們可以使用下面的方式將所有的import作為Module對(duì)象的屬性：

import * as Module from './modules/module.js';

Module.function1()
Module.function2()

然后function1，function2就變成了Module的屬性，直接使用即可。

在HTML中使用module和要注意的問題

怎么在HTML中引入module呢？我們有兩種方式，第一種是使用src選項(xiàng)：

<script type="module" src="main.js"></script>

第二種直接把module的內(nèi)容放到script標(biāo)簽中。

<script type="module">
  /* JavaScript module code here */
</script>

注意，兩種script標(biāo)簽的類型都是module。

在使用script來加載module的時(shí)候，默認(rèn)就是defer的，所以不需要顯示加上defer屬性。

如果你在測(cè)試的時(shí)候使用file:// 來加載本地文件的話，因?yàn)镴S模塊安全性的要求，很有可能得到一個(gè)CORS錯(cuò)誤。

最后，import() 還可以作為函數(shù)使用，來動(dòng)態(tài)加載模塊：

squareBtn.addEventListener('click', ()=> {
  import('./modules/square.js').then((Module)=> {
    let square1=new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
    square1.draw();
    square1.reportArea();
    square1.reportPerimeter();
  })
});

本文作者：flydean程序那些事
本文鏈接：http://www.flydean.com/js-modules/
本文來源：flydean的博客
歡迎關(guān)注我的公眾號(hào):「程序那些事」最通俗的解讀，最深刻的干貨，最簡潔的教程，眾多你不知道的小技巧等你來發(fā)現(xiàn)！

著互聯(lián)網(wǎng)產(chǎn)業(yè)的爆炸式增長，與之伴生的Web前端技術(shù)也在歷經(jīng)洗禮和蛻變。尤其是近幾年隨著移動(dòng)終端的發(fā)展，越來越多的人開始投身或轉(zhuǎn)行至新領(lǐng)域，這更為當(dāng)今的IT產(chǎn)業(yè)注入了新的活力。盡管Web前端技術(shù)誕生至今時(shí)日并不長，但隨著Web技術(shù)的逐漸深入，今后將會(huì)在以下幾方面發(fā)力。

1.Web移動(dòng)終端開發(fā)。

2.JavaScript的兄弟們。

3.百花齊放的類庫和框架。

4.工程化的Web前端開發(fā)規(guī)范。

Web移動(dòng)終端開發(fā)

PhoneGap：一個(gè)開源的開發(fā)框架，使用HTML、CSS和JavaScript來構(gòu)建跨平臺(tái)的移動(dòng)應(yīng)用程序。它使開發(fā)者能夠利用iPhone、Android、Palm、Symbian、BlackBerry、WindowsPhone和Bada等智能手機(jī)的核心功能，包括地理定位、加速器、聯(lián)系人、聲音和振動(dòng)等。除了在本地編譯應(yīng)用之外，還可以使用PhoneGap提供的云端Build工具進(jìn)行應(yīng)用編譯。也就是說，只需要將用HTML5寫好的應(yīng)用上傳到PhoneGap的云端服務(wù)器，PhoneGapBuild即可將其編譯成適合不同平臺(tái)的應(yīng)用。

前端知識(shí)圖譜

SenchaTouch：說到這里，就不得不提一些面向移動(dòng)端的WebUI庫，畢竟PhoneGap是一個(gè)工具，要想基于Web技術(shù)構(gòu)建完整的App，必須選擇一些適用的移動(dòng)UI庫。而最值得一提的是SenchaTouch，它可以讓W(xué)ebApp看起來像NativeApp。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的Web標(biāo)準(zhǔn)，全面兼容Android和iOS設(shè)備。PhoneGap昭示著一種開發(fā)趨勢(shì)，即App也可以使用Web前端技術(shù)來完成。而作為開發(fā)者最常用的UI工具箱，SenchaTouch又進(jìn)一步加速了這種趨勢(shì)，目前在淘寶已有大量的項(xiàng)目采用這種思路來搭建，即在內(nèi)置應(yīng)用的外殼加上自定義的基于移動(dòng)Web的UI庫。相信在未來這種模式必會(huì)越來越流行。

MediaQueries：在CSS2時(shí)代，如果你曾經(jīng)為網(wǎng)站設(shè)計(jì)過打印版CSS，那么就會(huì)明白CSS3MediaQueries的作用。不過，CSS3的MediaQueries比CSS2的Media

Type更實(shí)用，因?yàn)镃SS2的MediaType并不曾被多少設(shè)備支持過。CSS3的Media

Queries可以獲取這些數(shù)據(jù)：瀏覽器窗口的寬和高、設(shè)備的寬和高、設(shè)備的手持方向（橫向還是豎向）和分辨率等。也就是說，MediaQueries提供了一種基于不同的平臺(tái)寫CSS的技術(shù)。這項(xiàng)技術(shù)在2011年初被推廣開來，至今已非常火熱，尤其是在Web頁面仍占互聯(lián)網(wǎng)流量大多數(shù)的今天，這種兼容技術(shù)能很快讓網(wǎng)站兼容移動(dòng)設(shè)備，保證產(chǎn)品實(shí)現(xiàn)最快的跨平臺(tái)的兼容性和多平臺(tái)的可用性。

Zepto.js：一個(gè)專為MobileWebKit瀏覽器（如Safari和Chrome）而開發(fā)的JavaScript框架。它標(biāo)榜自己簡約的開發(fā)理念能夠幫助開發(fā)人員簡單、快速地完成開發(fā)交付任務(wù)。更重要的是這個(gè)JavaScript框架是超輕量級(jí)的，只有5KB。Zepto.js的語法借鑒且兼容jQuery。目前已有不少網(wǎng)站開始基于Zepto.js做應(yīng)用，因?yàn)樵趻仐壛薎E瀏覽器的兼容性問題后，Web開發(fā)會(huì)變得越來越純粹，體積更輕巧，編碼也更加愉悅。不可否認(rèn)，隨著移動(dòng)終端開發(fā)越來越流行，Zepto.js在未來將會(huì)有更加廣闊的應(yīng)用場(chǎng)景和空間。

Bootstrap:Twitter推出的一個(gè)開源的用于前端開發(fā)的工具包。它由MarkOtto和JacobThornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，由動(dòng)態(tài)CSS語言LESS寫成，與CSS框架Blueprint存在很多相似之處。Bootstrap一經(jīng)推出便頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，NASA和MSNBC的BreakingNews都使用了該項(xiàng)目。2012年第二季度，Bootstrap發(fā)布了2.0版，Bootstrap2.0的一個(gè)重大改進(jìn)是添加了響應(yīng)設(shè)計(jì)特性，在1.0中，這是讓很多開發(fā)人員抱怨的地方。而且為了提供更好的針對(duì)移動(dòng)設(shè)備的響應(yīng)式設(shè)計(jì)方案，Bootstrap2.0采用了更為靈活的12欄網(wǎng)格布局。此外，它還更新了一些進(jìn)度欄及可定制的圖片縮略圖，并增加了一些新樣式。值得關(guān)注的是，Bootstrap是一個(gè)非常輕量級(jí)的框架，2.0在壓縮后只有10KB。Bootstrap為我們的網(wǎng)站快速搭建提供了不錯(cuò)的工具和思路，這個(gè)工具集將擁有更旺盛的生命力。

導(dǎo)語：隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的爆炸式增長，與之伴生的Web前端技術(shù)也在歷經(jīng)洗禮和蛻變。尤其是近幾年隨著移動(dòng)終端的發(fā)展，越來越多的人開始投身或轉(zhuǎn)行至新領(lǐng)域

JavaScript的兄弟們

CoffeeScript是一個(gè)借鑒Ruby編寫的新編程語言，創(chuàng)建者JeremyAshkenas戲稱它是JavaScript的低調(diào)的小兄弟，因?yàn)镃offeeScript會(huì)將Ruby編譯成JavaScript，而且大部分結(jié)構(gòu)都相似。但不同的是，CoffeeScript擁有更嚴(yán)格的語法。它的最大功績就是將JavaScript硬綁的C/Java語法拋棄了，改為采用類似Ruby/Python的語法。Ruby/Python本來就是深受Lisp影響的，與JavaScript算是同門師兄，它們的語法經(jīng)過了實(shí)踐考驗(yàn)，非常適合函數(shù)式編程。這種優(yōu)雅的語言獨(dú)具魅力，即將面世的2013版的淘寶首頁即采用了CoffeeScript實(shí)現(xiàn)。

TypeScript是微軟開發(fā)的JavaScript的超集，TypeScript兼容JavaScript，可以載入JavaScript代碼然后運(yùn)行。與JavaScript相比，TypeScript進(jìn)步的地方在于：加入注釋，讓編譯器理解所支持的對(duì)象和函數(shù)，編譯器會(huì)移除注釋，不會(huì)增加開銷；增加一個(gè)完整的類結(jié)構(gòu)，使之更像是傳統(tǒng)的面向?qū)ο笳Z言。由于JavaScript只是一個(gè)腳本語言，并非用于開發(fā)大型Web應(yīng)用，所以沒有提供類和模塊的概念。而TypeScript擴(kuò)展了JavaScript實(shí)現(xiàn)了這些特性，能更好地支持大規(guī)模JavaScript應(yīng)用開發(fā)，吸引了不開發(fā)者。但要注意，雖然TypeScript有微軟做后盾看起來很有保證，但目前提供的只是早期的預(yù)覽版本，TypeScript并不像它的網(wǎng)站看起來那樣精美，最終版本可能會(huì)在一年后ECMAScript6發(fā)布會(huì)確定，現(xiàn)在的版本只是個(gè)開發(fā)預(yù)覽版。因此，TypeScript今后發(fā)展如何，還需要進(jìn)一步觀察。

此外，在服務(wù)器端，Node.js越來越流行。如今Node.js不僅作為處理高并發(fā)請(qǐng)求的中間層解決方案，還因其靈活的語法和豐富的底層API，越來越多的人開始用它來寫工具，尤其是之前基于Ant或者Java的一些工具如今都有了Node.js的版本。

如此看來，Node.js在命令行工具領(lǐng)域有著更加廣闊的應(yīng)用場(chǎng)景，甚至可以代替Perl或者Ruby這些傳統(tǒng)的動(dòng)態(tài)語言。在淘寶Node.js已有非常多的應(yīng)用場(chǎng)景，例如在數(shù)據(jù)部門，Node.js被用作處理高并發(fā)場(chǎng)景下的容池，專門吸收高并發(fā)的請(qǐng)求，甚至能夠保持和客戶端的長鏈接，而這在之前則需要花費(fèi)很高昂的成本，例如Comet技術(shù)等。此外，淘寶的開源前端類庫KISSY也可以直接運(yùn)行于Node.js環(huán)境，這樣就可以在命令行運(yùn)行KISSY代碼，很多前端代碼就有機(jī)會(huì)采用自動(dòng)化測(cè)試等，提高生產(chǎn)效率。再者，淘寶內(nèi)部的開發(fā)工具鏈也已大部分采用Node.js來構(gòu)建了。

百花齊放的類庫和框架

SeaJS是由支付寶前端高級(jí)技術(shù)專家王保平（玉伯）開發(fā)的一個(gè)遵循CMD規(guī)范的模塊加載框架，可用來輕松愉悅地加載任意JavaScript模塊和CSS模塊。SeaJS非常小巧，小巧在于其壓縮后體積只有4KB，而且接口和方法也非常少。SeaJS有兩個(gè)核心：模塊的定義和模塊的加載。SeaJS可以加載任意JavaScript模塊和CSS模塊，能保證你在使用一個(gè)模塊時(shí)，已將所依賴的其他模塊載入腳本運(yùn)行環(huán)境中。SeaJS可以讓你享受寫代碼的樂趣，不用去管那些加載的問題。畢竟現(xiàn)在網(wǎng)頁的可維護(hù)性和性能問題一樣嚴(yán)峻，體現(xiàn)在：文件太多，不利于維護(hù)，前端后端都一樣；HTTP請(qǐng)求過多，當(dāng)然這個(gè)可以通過合并解決，但如果沒有后端直接合并，那么人工成本會(huì)非常大。用SeaJS就能非常好地解決這些問題。SeaJS遵循CMD規(guī)范，因此可以很方便地書寫模塊。目前已經(jīng)有越來越多的人采用CMD規(guī)范來開發(fā)項(xiàng)目了。

最近微軟已經(jīng)正式發(fā)布了Windows8操作系統(tǒng)，Windows操作系統(tǒng)的風(fēng)格已經(jīng)完全變成了磁貼狀的MetroUI。對(duì)于微軟來說，這是一個(gè)巨大的改變，而且所有微軟的平臺(tái)包括桌面、平板、移動(dòng)端及其網(wǎng)站都使用這個(gè)UI風(fēng)格。

MetroUICSS是一個(gè)非常完整的創(chuàng)建Metro風(fēng)格的網(wǎng)站框架。它自成體系，但也可以與其他框架一起使用。使用LESS創(chuàng)建，并且擁有網(wǎng)格系統(tǒng)、排版樣式、表格、按鈕和圖片。同時(shí)也擁有內(nèi)建的JavaScript組件，幫助你生成片狀、菜單、邊欄、進(jìn)度條和提示等，是一個(gè)非常好用的框架。隨著Windows8的進(jìn)一步流行，這種風(fēng)格的CSS類庫一定會(huì)成為一種趨勢(shì)。

Hype是一個(gè)小巧的工具，是MacAppStore新上架的一個(gè)HTML5創(chuàng)作工具，其長處是可以在網(wǎng)頁上做出悅目的動(dòng)畫效果，無須Flash插件。開發(fā)該應(yīng)用的公司Tumult由兩個(gè)前蘋果工程師創(chuàng)建，并獲得了YCombinator的投資。由于公司的聯(lián)合創(chuàng)始人之一JonathanDeutsch曾擔(dān)任Mail.app后端的技術(shù)主管，因此他在接受PaulHontz的TheStartupFoundry訪談時(shí)，談到公司創(chuàng)始是為了解決HTML5創(chuàng)作工具缺乏的問題。可以說，Hype是第一個(gè)可用的創(chuàng)作HTML5產(chǎn)品的可視化工具，具有里程碑式的意義。隨著硬件性能提升，HTML5的應(yīng)用程序更加傾向于被工具生成，而不像傳統(tǒng)意義上由工程師“切”出來。因此工具化是一個(gè)方向，不管HTML5是否真的能在移動(dòng)終端扎下腳跟，這種方向是值得堅(jiān)持的。畢竟，HTML5的應(yīng)用開發(fā)現(xiàn)在還處于原始社會(huì)。

iScroll.js是使用原生JavaScript編寫的一個(gè)模擬滾動(dòng)效果的小類庫，不依賴于任何JavaScript框架。旨在解決移動(dòng)WebKit系瀏覽器的區(qū)域滾動(dòng)問題，兼容MobileSafari、Android默認(rèn)瀏覽器、Safari、Chrome、Firefox5+、Opera11+、IE9+及其他WebKit核心瀏覽器。最新版本為iScroll4。這個(gè)小庫一問世就備受關(guān)注，因?yàn)樗粌H可以在PC端完美模擬滾動(dòng)效果，在移動(dòng)終端里對(duì)觸屏事件的支持也堪稱完美。

iScroll4是2011年底問世的，2012年在移動(dòng)終端產(chǎn)品開發(fā)中大放異彩，在淘寶的諸多產(chǎn)品中都用到了這個(gè)JavaScript庫。iScroll是小而精的經(jīng)典作品，名字也帶著蘋果范兒。但美中不足的是，只能使用ID調(diào)用。不過這個(gè)小特性不是什么大問題，可以通過二次封裝來解決。期待iScroll4在移動(dòng)終端里有更多精彩的表現(xiàn)。

前端MVC在2011年是比較火的話題，隨著越來越多的人開始嘗試使用諸如JavaScriptMVC和Backbone.js這些MVC類庫，更多的產(chǎn)品也看起來更像“軟件”而非“網(wǎng)頁”。但由于前端環(huán)境的復(fù)雜性，我們也漸漸發(fā)現(xiàn)“這種”MVC并非完美，只能應(yīng)用于“基于數(shù)據(jù)驅(qū)動(dòng)”的場(chǎng)景，而對(duì)“基于事件驅(qū)動(dòng)”的場(chǎng)景卻沒有太好的解決辦法。目前，淘寶有很多產(chǎn)品在嘗試使用“有限自動(dòng)機(jī)”來彌補(bǔ)MVC在這方面的不足。因此，新場(chǎng)景下的MVC還需要更深入的提煉。

工程化的Web前端開發(fā)規(guī)范

2012年，關(guān)于前端開發(fā)編碼規(guī)范的討論愈來愈多。國外和國內(nèi)的頂尖開發(fā)者幾乎同時(shí)對(duì)編碼規(guī)范產(chǎn)生了很大興趣，前Yahoo!首頁首席前端工程師N.C.Zakas在他那本《高可維護(hù)的JavaScript》書中也提到規(guī)范在團(tuán)隊(duì)協(xié)作過程中的重要性。而如下這兩個(gè)方面，是值得我們探討和深思的。

AMD與CMD規(guī)范之爭(zhēng)，隨著CommonJS的進(jìn)一步普及，CommonJS規(guī)范在標(biāo)準(zhǔn)的模塊開發(fā)領(lǐng)域發(fā)揮著越來越重要的作用，而CommonJS在瀏覽器端的難以實(shí)現(xiàn)卻為這份規(guī)范增添了一絲變數(shù)。本質(zhì)上講，CommonJS是一種用于同步加載JavaScript代碼的API規(guī)范，非常簡單優(yōu)雅。為了在瀏覽器端實(shí)現(xiàn)這種機(jī)制，則不得不加入了一層異步回調(diào)，這便是AMD（Modules/Asynchronous-Definition）。RequireJS實(shí)現(xiàn)了這個(gè)規(guī)范，而Dojo也將馬上完全支持（Dojo1.6）。規(guī)范本身非常簡單，甚至只包含了一個(gè)API。玉伯在開發(fā)SeaJS的過程中，更多地保持了CommonJSModules規(guī)范的風(fēng)格，即CMD（CommonModuleDefinition）。較之AMD，CMD沒有采用單一的API來適用于多個(gè)功能，而是根據(jù)不同功能定義不同的API。我認(rèn)為，兩者在完備性上是基本一致的，但在社區(qū)理念和編程風(fēng)格上有所差異，開發(fā)者可以根據(jù)自己的偏好來選擇使用AMD還是CMD編程風(fēng)格。

Java語言編碼規(guī)范對(duì)于前端開發(fā)編程規(guī)范有非常大的影響。在Zakas的《高可維護(hù)性JavaScript》一書中提到了五種JavaScript編程規(guī)范，都和Java語言編碼規(guī)范有著類似的淵源：Crockford編程規(guī)范、jQuery核心風(fēng)格指南、SproutCore編程風(fēng)格指南、Google的JavaScript風(fēng)格指南和Dojo編程風(fēng)格指南。不管是哪種規(guī)范，都強(qiáng)調(diào)了編碼風(fēng)格一致的重要性，這也可看出，前端團(tuán)隊(duì)開發(fā)越來越看重規(guī)范，JavaScript的靈活性需要某種程度的限制。

總之，通過上面的闡述，我們可以看到前端技術(shù)的不斷進(jìn)步和推陳出新，也能夠體會(huì)到項(xiàng)目過程的工程化，解決方案的輕量化，庫和框架的多元化，知識(shí)結(jié)構(gòu)的體系化，這種趨勢(shì)在今后會(huì)變得越來越明顯，也昭示著前端技術(shù)的發(fā)展方向。

說到前端技術(shù)知識(shí)結(jié)構(gòu)的體系化建設(shè)，這是我這些年來一直都在做的事情，在2011年也畫了一張圖來說明我的觀點(diǎn)——前端技術(shù)體系的建設(shè)是一項(xiàng)長期的任務(wù)。畢竟前端新技術(shù)新知識(shí)層出不窮，對(duì)于經(jīng)典的知識(shí)結(jié)構(gòu)的整理也很有挑戰(zhàn)性，但這項(xiàng)工作終究需要有人去做，為新入道的人指出一個(gè)大致的方向。對(duì)于前端工程師的成長問題，我也寫過一篇長文“前端開發(fā)十日談”，幫助新人們解惑。

在線咨詢

上一篇：MYSQL安裝
下一篇：如何用Flask中的Blueprints構(gòu)建大型We

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商