直接拿來用！最火的前端開源項目

　　對於開發者而言，瞭解當下比較流行的開源項目非常必要。利用這些項目，有時可以讓你達到事半功倍的效果。爲此，本文整理GitHub上最火的前端開源項目列表，內容涵蓋了Hack Design、 Designer School、TheExpressiveWeb、如何成爲優秀的前端開發工程師、Web開發教學材等，這裏按分類的方式列出前九個。

　　詳細內容以下：

　　1、Architecture

　　網站架構，通常認爲是根據客戶需求分析的結果，準肯定位網站目標羣體，設定網站總體架構，規劃、設計網站欄目及其內容，制定網站開發流程及順序，以最大限度地進行高效資源分配與管理的設計。

　　（1） BEM：該方法可讓開發人員快速開發出網站，延長網站的壽命；保持代碼的重用性
　　（2） Atomic Design：以原子的觀點設計系統架構，從具體到抽象構建系統架構

• 託管地址：https://github.com/bradfrost/patternlab
• Video+ Slides
• Atomic Design: Some Thoughts and One Example
• Atomic Design Makes Me Feel Like a Chemist

　　（3） Aura：是一個事件驅動的架構，利用可重用的部件，開發可擴展的應用程序
　　（4） Terrific.js：提供一個可擴展的JavaScript架構，幫助你對JQuery/Zepto代碼進行模塊化。
　　（5） 大型JavaScript應用程序架構的模式e
　　（6） 視頻：Nicholas Zakas:可擴展的JavaScript應用程序架構
　　（7） 圖書：學習JavaScript設計模式
　　（8） 圖書：雄辯的JavaScript
　　（9） 圖書：深刻單頁面的應用程序
　　（10） jQuery的應用程序架構圖
　　（11） 如何管理大型jQuery的應用程序
　　（12） 對於CSS的可擴展和模塊化架構
　　（13） 比較不一樣觀察者模式之間的實現過程

　　2、Workflow

　　工做流就是一系列相互銜接、自動進行的業務活動或任務。一個工做流包括一組活動及它們的相互順序關係，還包括流程及活動的啓動和終止條件，以及對每一個活動的描述。

　　（1） Vid：JavaScript開發流程+ 幻燈片
　　（2） Yeoman：爲開發者提供一系列健壯的工具、程序庫和工做流，幫助他們快速構建出漂亮、引人注目的Web應用。
　　（3） Grunt：是一個基於任務的關於JavaScript項目命令行構建工具

• Web development is getting complex. Let's go shopping.
• GruntStart

　　（4）前端處理——扁平化構建與自動化

• 簡介
• 環境設置與Yeoman
• Grunt Tasks
• CSS Famework

　　（5） CSSCSS：是一個CSS的冗餘分析儀，用於分析冗餘
　　（6） Helium：經過JavaScript工具掃描網站，顯示未使用的CSS
　　（7） Roots
　　（8） Sparky.js：是一個客戶端應用程序框架，能夠幫助那些不想訂閱特定客戶端的MVC框架，卻想使用該框架的用戶。
　　（9） Brunch：是一個針對HTML5應用的彙編程序。
　　（10） Automaton ：它是內置在JavaScript中的任務自動化的工具。
　　（11） Cartero

　　3、Frameworks

　　FrameWork即架構，提供了軟件開發的框架，使開發更具工程性、簡便性和穩定性。

1.JavaScript篇

　　JavaScript是一種基於對象和事件驅動並具備相對安全性的客戶端腳本語言。同時也是一種普遍用於客戶端Web開發的腳本語言，經常使用來給HTML網頁添加動態功能。

　　（1）Angular： 是一組用來開發Web頁面的框架、模板以及數據綁定和豐富UI組件。

　　託管地址： https://github.com/angular/angular.js

　　學習資源列表：

• AngularJS學習
• AngularJS截屏
• 經過AngularJS創建Huuuuuge應用程序
• AngularJS中的範圍原型/原型繼承的細微差異是什麼？
• AngularJS from Basics to Dependency Injection
• AngularJS作列表應用程序
• AngularJS vs. Ember： It's not even close
• The Hitchhiker’s Guide to the Directive
• 使用Grunt和Angular JS的前端工做流

　　集成實例

• angular-requirejs-seed
• 使用Bower編寫可重用的Angular JS組件
• Native AngularJS directives for Twitter's Bootstrap
• Automating AngularJS With Yeoman, Grunt & Bower
• 在Heroku上使用Grunt優化Angular模板
• 使用AngularJS和PouchDB構建離線應用程序

　　（2）jQuery：是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫的更少，作的更多)。

• jQuery Wiki頁面「插件/創做」
• jQuery插件開發樣板
• 關於編寫jQuery插件的終極指南
• 圖書：jQuery的基礎

　　（3）Backbone：是一種幫助開發重量級的javascript  MVC 應用框架

• 圖書：開發Backbone.js的應用程序
• Unsuck your backbone
• 關於Marionette.js視圖的可視化指南

　　（4） Meteor：是一個新鮮出爐的現代網站開發平臺，基礎構架是 Node.JS + MongoDB，它把這個基礎構架同時延伸到了瀏覽器端，能夠同時在服務器端和客戶端無差別地調用，本地和遠程數據經過 DDP（Distributed Data Protocol）協議傳輸。

• Meteor.js的最佳學習資源

　　（5） Reactby Facebook
　　（6） Flight：是一個事件驅動的Web框架，源於Twitter
　　（7） Singool.js：是開發單頁Web應用程序
　　（8） Knockout：經過應用模型-視圖-視圖-模型（MVVM）模式，簡化動態JavaScript的用戶界面
　　（9） Sammy.js：是一個很小的JavaScript框架，爲開發JavaScript應用程序提供一個基本的架構。
　　（10） Ember.js：是一個框架，使用該框架建立Web應用程序。
　　（11） Maria：針對於JavaScript應用程序的MVC框架。The real MVC、The Smalltalk MVC、The Gang of Four MVC。
　　（12） Terrific Composer：是一個前端開發框架構，專爲構建高級前端而設計的
　　（13） Rivets.js：輕量級且強大的數據綁定+模板解決方案爲了建立Web應用程序。
　　（14） Synapse
　　（15） 較爲全面的JavaScript應用程序框架
　　（16） JavaScript Data Binding Frameworks

2.CSS篇

　　CSS稱爲「風格樣式表（Style Sheet）」，它是用來對網頁風格進行設計的。

　　（1）一組最佳的框架

　　（2）Twitter Bootstrap：是一個基於HTML，CSS，JAVASCRIPT的簡潔靈活的 網站前端框架及組件包。

• Home Page
• Github
• Download
• Bootstrap Hero List： Bootstrap資源列表
• Widgets
  • Color and Date Picker
  • WYSIHTML5 RTE for Bootstrap
  • Bootstrap Image Gallery
  • jQuery UI Bootstrap
  • Pines Notify：針對Bootstrap或 jQuery UI的JavaScript消息提醒機制
  • fuelUX
  • A date range picker for Twitter Bootstrap
  • Bootbox.js：是基於Twitter Bootstrap開發的一個小型的JavaScript庫，用來建立簡單的可編程對話框
  • Time Picker
  • Date/Time Picker
  • ReCaptcha
  • Bootstrap Modal：擴展自原生的Bootstrap對話框並提供一些額外的功能
  • SelectBoxIt
  • File Upload
  • BootPag：動態分頁的jQuery插件
  • Bootstrap Arrows：基於Bootstrap實現各類方向的箭頭圖標
  • X-editable：可以讓你在頁面上建立可編輯的元素
  • Pagination
  • Slider
  • Application Wizard

　　（3）Themes

• Bootswatch：免費的Twitter Bootstrap主題
• Jumpstart UI：付費的Twitter Bootstrap主題
• Darkstrap：深色主題
• jQuery Mobile Boostrap：一個基於Twitter Bootstrap的jQuery Mobile主題
• Wrapbootstrap
• Wordpress：是一種使用PHP語言開發的博客平臺，用戶能夠在支持PHP和MySQL 數據庫的服務器上架設本身的網誌
  • BootstrapWP
  • Roots Theme
  • Bootstrap
  • Bootstrap for Wordpress
  • Bootstrap for WP
  • StrapPress
  • WPBS
• CSS3 Microsoft Modern Buttons
• BootMetro： Metro風格的Web框架
• Cosmo： Windows 8的主題風格 
• Bootstrap Generator：只需點擊 "Generate" 就能夠編譯 Bootstrap CSS文件
• Inspiritas
• Facebook
• Google+
• Flatstrap
• Pinstrap

　　（4）Misc ：一些混合項內容

• Boilerstrap
• Bootstrap GUI PSD：一個工具包主要是啓動Web應用程序和網站
• Font Awesome：爲Twitter Bootstrap設計標誌性字體
• Typo3 Extension
• Bootstrap CDN
• Bootstrap Tour
• Bootsnipp：爲Bootstrap HTML/CSS/JS框架設計元素及代碼片斷
• Form Builder
• PaintStrap： 使用Adobe kuler / COLOURlovers顏色方案生成一個漂亮的Twitter Bootstrap主題
• TODC：一個針對Twitter Bootstrap的Google風格主題
• Layoutit!

• Responsive Grid System
• Responsive Grid System (2)
• Golden Grid System
• Compass
• Pondasee
• Centurion
• Foundation 3
• ProfoundGrid
• Groundwork
• skelJS
• Ink
• neat
• Kube
• rwdgrid
• Simple Grid
• One% CSS Grid
• Workless
• intuit.css：一個強大的、可擴展的、基於Sass、BEM、OOCSS框架

　　4、Cross Browser

　　（1）Normalize.css
　　（2）HTML5 Cross Browser Polyfills
　　（3）Viewport Component

　　5、Cross Device

　　（1）Reponsive

• Vid: Responsive Design Workflow by Stephen Hay + Slides
• Responsive Patterns
  • Responsive Navigation Patterns
  • Complex Navigation Patterns for Responsive Design
• Responsinator
• How to make a Responsive Newspaper-like layout
• The State Of Responsive Web Design
• Facing The Challenge: Building A Responsive Web Application
  • This repo contains techniques and concepts to build responsive & hybrid web applications.
• Tables
  • Responsive Data Tables
  • stacktable.js
  • FooTable
• Events
  • Breakpoints.js
  • Harvey.js
  • Enquire.js
• Images
  • Fluid Images
  • How to Use Responsive Images to Make Your Site Shine on Any Platform
  • Adaptive Images
  • Why We Need Responsive Images
  • Riloadr
  • jQuery Picture
  • Picturefill
• Text
  • FitText：該插件可以對文本大小自動調整
  • Out Of Words!
  • Responsive Font Sizing：字體可以隨着屏幕的大小進行自動調整
  • Responsive Measure

　　（2）E-Mail
　　（3）Mobile

• Frameworks
  • jQuery Mobile：爲移動設備的優化觸摸屏Web Framework 
  • jQTouch：支持包括 iPhone、Android 等手機，提供一系列功能爲手機瀏覽器WebKit服務的jquery插件。
  • Junior
• Emulators
  • thumbs.js
  • Phantom Limb
  • Touché
• Scrolling
  • jSwipeKinetic
  • jQuery.pep.js
  • Overscroll：是一個 jQuery 插件，用來最小化 iPhone 和 iPad 上的頁面滾動效果處理。
  • Zynga Scroller
  • pull-to-refresh.js
  • Overthrow
  • Antiscroll
• Gestures
  • jGestures： jQuery 插件容許你添加手勢事件，好比： ‘pinch’、‘rotate’、‘swipe’、‘tap’ 和 ‘orientationchange’ 
  • hammer.js：是一個多點觸摸手勢庫。
  • Touchy：是一個高度可配置的jQuery插件。
  • TouchSwipe
  • TipTap
  • jQuery.event.swipe
  • toe.js ：是一個基於 jQuery小型庫，容許在觸摸設備上使用的複雜手勢
  • Jester
  • JS Touch Layer
  • Touch Events and Abstractions
• DOM Objects Manipulation
  • jQuery.event.move
  • WKTouch：一個JavaScript插件觸摸設備，容許多點觸控
• Tap Acceleration
  • Energize
  • Tappable：是一個簡單、獨立的庫爲觸屏Web瀏覽器調用tap事件
  • Fastclick：是一個簡單、易於使用的庫，在移動瀏覽器上的實際反應與單擊事件之間消除300ms的滯後性
  • Lightning Touch
  • Creating Fast Buttons for Mobile Web Applications
• Layout
  • Flickable.js ：容許爲任何元素作觸摸控制
  • PageSlide：是一個jQuery插件，能夠控制一隱藏頁面的顯示與關閉
  • Swipe ：是一個輕量級的移動滑動組件，支持1：1的觸摸移動、阻力以及防滑
  • Swiper：加速移動觸摸滑塊與硬件之間的轉換
  • jQuery Mobile Pagination Plugin
  • SwipeSlide
  • stackable.js：是一個很是重要的jQuery插件，爲小屏幕提供的棧表，這在移動設備上具備重要的做用
• Reacting to Device Sensors
  • lenticular.js：是一個jQuery插件爲建立圖片動畫，可響應傾斜或鼠標事件
  • This End Up: Using Device Orientation
• iOS
  • Safari Image Delivery Best Practices
  • Safari Graphics, Media, and Visual Effects Coding How-To's
  • Safari CSS Visual Effects Guide
  • Safari Web Content Guide
  • Getting Started with iOS Web Apps
  • The iPad Web Design & Development Toolbox
  • Targeting the iPhone 4 Retina Display with CSS3 Media Queries
  • How do I lock the orientation to portrait mode in a iPhone Web Application?
  • jQuery Retina Display Plugin
  • retina.js
  • Retina Images

　　（4）Printers

• Tips And Tricks For Print Style Sheets

　　6、Patterns & Snippets

　　（1）Responsive Patterns
　　（2）CSS3 Code Snippets
　　（3）Blueprints：是一組基本的網站概念、組件、插件和佈局，以最小的風格易於適應和使用

　　7、DOM Manipulation

　　DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的衝突，給予Web開發者一個標準的方法，讓他們來訪問站點中的數據、腳本和表現層對像。

　　（1）xui：爲編寫HTML5移動Web應用程序提供的超級微小的DOM庫
　　（2）Tire：提供一個更輕量級的庫替代如jQuery、Prototype和Zepto庫

　　8、Typography

　　（1）Quick guide to webfonts via @font-face
　　（2）How To Achieve Cross-Browser @font-face Support
　　（3）Google Fonts
　　（4）Adobe Edge Web Fonts：得到無償使用Web字體

• Edge Web Fonts Website

　　（5）Typekit：在你的網站上輕鬆使用商業性的Web字體
　　（6）Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite
　　（7）Typeset.css
　　（8）typecast
　　（9）CSSTypography
　　（10）SO: @font-face fonts only work on their own domain
　　（11）FitText
　　（12）TypeButter
　　（13）slabText
　　（14）Baseline.js
　　（15）jKerny
　　（16）Lettering.js
　　（17）Trunk8：是一個智能截斷文本jQuery插件
　　（18）bacon
　　（19）CSS Typography cheat sheet：提高網站的排版功能

　　9、Services (免費的、商業化的)

　　（1）colourco
　　（2）HTML Entity Character Lookup
　　（3）SpritePad
　　（4）Responsinator
　　（5）TheToolbox
　　（6）HTML Shell
　　（7）Form Builder
　　（8）Zen BG
　　（9）Prepros
　　（10）site44
　　（11）Website Builders

• Squarespace
• BaseKit
• Doomby
• Edicy
• IM Creator
• Jimdo
• Moonfruit
• uCoz
• Webnode
• Webs
• Weebly
• Wix
• Wordpress.com
• Yola
• 1&1 Homepage

　　10、Animation

　　（1）Stylie

　　（2）animate.less：是一羣很酷、頗有趣、跨瀏覽器的動畫效果，它轉換成LESS供你在Bootstrap項目中使用

　　（3）Canvas Advanced Animation Toolkit：是基於javascript中的一個時間軸概念創建帶有動畫效果的場景圖框架。

　　（4）tween.js：超級簡單、快速、易於使用的漸變更畫引擎＼

　　（5）Janis：是一個輕量級的Javascript框架，經過CSS可在瀏覽器或移動設備上對簡易的動畫效果進行調整，以適應在設備上的運行。

　　（6）Rekapi：是基於JavaScript的關鍵幀的動畫效果庫

　　（7）CanvasScript3：是一個Javascript庫，用於HTML5 Canvas接口相似於ActionScript3。這個庫容許使用精靈組、圖層、鼠標事件、鍵盤事件、位圖效果、漸變更畫效果等

　　（8）Shifty：是創建在JavaScript裏一個漸變更畫引擎，目的是適應任何數量的漸變更畫的需求

　　（9）emile.js：是一個真實的獨立的CSS動畫效果的JavaScript框架

　　（10）Firmin：使用CSS轉換、過渡的一個JavaScript動畫效果庫

　　（11）$fx()：基於動畫效果的一個簡潔、輕量級的Javascript庫

　　（12）Keanu：在Canvas/JS上基於動畫效果的一個微型庫

　　（13）jsAnim：是一個功能強大，易於使用的庫，在遵循標準和可訪問性的基礎上，它在網站上增添了一些使人印象深入的動畫效果。該庫的大小不到25kb,jsAnim包也有不少這樣一個小應用程序。

　　（14）scripty2：是一個開源的JavaScript框架,基於HTML的用戶界面。簡而言之，scripty2幫助你創建一個更加符合胃口的Web

　　（15）Animator.js：基於JavaScript的動態動畫效果庫

　　（16）Processing.js：是一個開放的編程語言，在不使用Flash或Java小程序的前提下，能夠實現程序圖像、動畫和互動的應用

　　（17）jQuery Transit：是一個利用了CSS3的過渡和轉換特性來實現動畫特效的jQuery插件

　　（18）Move.js：是一個封裝了CSS3動畫效果的輕量級JavaScript類庫，能讓你輕鬆實現動畫特效

　　（19）Collie是一個Javascript庫,使用HTML 5來建立最優化的動畫效果和遊戲

　　（20）Year Of Moo：是基於Angular.js的動畫效果

　　（21）Approach

　　11、Programming & Markup Languages

　　計算機語言整體分爲機器語言、彙編語言、高級語言三大類，計算機的每一個動做及步驟都是按照計算機語言編好的語言來執行的，而人們也經過計算機語言向計算機發出命令。

　　標記語言是一種將文本以及文本相關的其餘信息結合起來，展示出關於文檔結構和數據處理細節的電腦文字編碼。

　　（1）CSS

• Understanding border-image
• What No One Told You About Z-Index
• Principles of writing consistent, idiomatic CSS

　　（2）JavaScript

• Javascript Closures
• Combinator Recipes for Working With Objects in JavaScript
  • Part II
• Prototypes and Inheritance in JavaScript
• JavaScript Study Guide
• ECMA 262-3 in detail
• JavaScript Garden
• Extensions
  • RubyJS：是一個基於JavaScript的Ruby庫，使用JavaScript實現Ruby中的全部方法，如 Array、String、Numbers、Time等。
  • Mout：是一組模塊化的JavaScript工具，能夠在瀏覽器中使用AMD的模塊或在node.js中使用。
  • bacon.js：是基於JavaScript一個小功能性的reactive編程庫
• Flow Controll
  • Coroutine Event Loops in Javascript
  • How To Node Article on promises describing both sides: node.js and browser
  • Video by Douglas Crockford on monads which is touching Promises
  • Не надо давать обещания, или Promises наоборот
  • Promises are the monad of asynchronous programming
  • A Study on Solving Callbacks with JavaScript Generators
  • What's The Point Of Promises?
  • Promises/A+ Spec
  • Callbacks vs Coroutines
  • This document is intended to explain how promises work
  • Libraries
    • Standalone-Deferred
    • Standalone-Deferred
    • Flowy
    • Step
    • kew ：是基於優化node.js一個輕量級的promise庫
    • jQuery Timing
    • RSVP.js
    • q
    • Watch.js
• Vid: Monads and Gonads (YUIConf Evening Keynote)

　　（3）HTML

• Book: Dive into HTML5
• Principles of writing consistent, idiomatic HTML

　　（4）Higher Level Languages

• Dart：基於JavaScript進行編譯的類型語言
• Sass：是對CSS3擴展的一種開發工具，它在CSS3的基礎上添加了嵌入式規則、變量、多態、 繼承等。使用命令行工具或一個Web框架插件就能轉換成標準格式的CSS。
• Less：經過動態行爲擴展了CSS，如：變量、多態、操做與函數 
• Roole：是一種編譯成CSS的語言
• Stylus：具備表現性、動態性、健壯性的CSS

　　12、Visualization

　　（1）Photon

　　（2）CSS3 shapes

　　（3）Morris.js

　　（4）Cube

　　（5）Cubism.js

　　（6）D3.js

　　（7）Crossfilter：一個用來展現大數據集的JavaScript 庫,支持快速交互,主要用來構建數據分析程序

　　（8）Datavisualization.ch

　　（9）jQuery.Gantt

　　（10）easy pie chart

　　（11）Gauge.js

　　（12）Google Chart Tools

　　（13）Piecon：一個用來實現favicon上顯示進度消息的一個小型 JavaScript庫

　　（14）Viskit.js

　　（15）jStat：是JDK自帶的一個輕量級小工具

　　（16）CHAP Links Library

　　（17）bonsai

　　（18）Smoothie Charts：是一個小型圖表生成腳本,它是爲生成實時數據圖表而設計的

　　（19）DataMaps：是一個 JavaScript庫，用於實現地圖和數據可視化的交換

　　（20）mxgraph：是一個JS繪圖組件，它適用於須要在網頁中設計/編輯Workflow/BPM流程圖、圖表、網絡圖和普通圖形的Web應用程序

　　（21）Paper.js： 是運行在HTML5 Canvas上的一個開源的矢量圖形腳本框架

　　（22）Timeline.js：是一個創建在JavaScript上的Timeline

　　（23）xCharts：是一個JS庫用來建立具備吸引力的、自定義數據驅動的可視化圖表

　　（24）jQuery Gantt editor

　　（25）amCharts：是一個健壯的繪圖工具,能夠適合任何數據的需求

• Introduction to D3
• Interactive D3 Tutorial
• NVD3

　　十3、Widgets

　　Widgets是一個小模塊代碼，它能夠在任意一個基於HTML的Web頁面上執行，它的表現形式有：視頻、地圖，新聞、小遊戲等。該思想源於代碼的複用，一般狀況下，Widgets代碼形式包含了DHTML、JavaScript以及Adobe Flash。

　　（1）Kits

• AlloyUI：是一個基於YUI（Yahoo! User Interface Library）實現的JavaScript UI組件庫和CSS框架
• Kendo UI：基於最新技術HTML五、CSS3和JavaScript標準設計開發的,用於開發如今HTML UI操做界面的框架
• jQuery UI Bootstrap：一個基於Twitter Bootstrap的jQuery UI主題
• Zebra：是一個JavaScript庫，遵循簡單OOP理念，它提供基於UI的HTML5 Canvas和包括Java到JavaScript轉換器工具

　　（2）File Upload

• jQuery File Upload
• tus fileupload
• Fine Uploader

　　（3）Sitemap

• SlickMap CSS：一個簡單的樣式單，根據sitemap顯示對應的圖形化信息

　　（4）Table Of Contents

• Tocify
• MagicNav.js
• jQuery TOC：是WordPress的一個文章目錄插件，可將文章指定的標題標籤自動生成文章目錄

　　（5）Modals

• Avgrund：是一個jQuery插件，用於建立模態框和彈出窗口
• Timeout Dialog
• Magnific Popup

　　（6）Notifications

• Pines Notify：是一個相似於Growl的消息通知提醒插件
• notifier.js：是一個用於實現相似Gnome/Growl風格消息提醒的jQuery插件
• noty：是一個簡單易用的 jQuery tooltip提示插件，它內置了alert、success、error 和 confirmation四種消息提示框，用於代替原有的瀏覽器提示框，而且能夠設置爲模態窗口
• Toastr：是一個實現了相似 Android的Toast 提示的 jQuery插件
• a!ertifyjs
• Apprise

　　（7）Gallery Sliders

• Sequence
• Rhinoslider
• Awkward Showcase
• Revolver.js：建立高度定製化的圖文幻燈控件
• Responsive CSS3 Slider
• Roundabout
• Slid.es

　　（8）Selects

• jQuery Recurrence Input
• Select2
• jquery.selectable.js

　　（9）Progress Bars

• Percentage Loader
• progress.js

　　（10）Misc

• jQuery Knob
• DopelessRotate
• jQuery Addresspicker
• Fangle：從純文本中建立一個交互式文檔

　　二10、Template Engines

　　模板引擎是爲了使用戶界面與數據分離而產生的，它能夠生成特定格式的文檔。使用模板引擎能夠提高開發者的工做效率，該模板所擁有的良好設計也使得代碼重用變得更加容易。

　　（1）ICanHaz.js：是一個簡單並且功能強大的客戶端的JavaScript模板引擎

　　（2）Hogan.js：是來自Twitter的JavaScript模板引擎

　　（3）Handlebars.js：是一個JavaScript的頁面模板庫

　　（4）Transparency

　　（5）doT.js：包含爲瀏覽器和Node.js準備的JavaScript模板引擎

　　（6）Walrus

　　（7）Chibi

　　（8）Templayed.js：是一個兼容Mustache的JavaScript模板引擎，具備速度最快、體積最小等特性

　　（9）ECT

　　（10）pithy：JavaScript中爲生成HTML的一個內部DSL

　　（11）T：T.js是一個模板引擎,使用簡單的Javascript數據結構來表示HTML/XML數據。

　　（12）Nunjucks：是一個功能全面的JavaScript模板引擎。

　　（13）Linked.in Dust.js

• The client-side templating throwdown:：mustache, handlebars, dust.js, and more
• Leaving JSPs in the dust: moving LinkedIn to dust.js client-side templates
• Tutorial
• Testing Console

　　二11、RoutingAndUrls

　　（1）Crossroads.js

　　（2）Hash.js

　　（3）director

　　（4）Davis.js

　　（5）path.js

　　（6）URI.js

　　（7）Roadcrew.js

　　（8）jQuery Address

　　（9）page.js

　　二12、Rich Text Editors

　　富文本編輯器（Rich Text Editor，簡稱 RTE）：是一種可內嵌於瀏覽器，所見即所得的文本編輯器。它提供相似於Microsoft Word的編輯功能，即便不會編寫容易HTML 的用戶也能使用。

　　（1）WYSIHTML5：是一個開源的基於HTML技術的富文本編輯器，可生成徹底兼容 HTML5 標籤的文本

　　（2）MarkItUp：是一個輕量級、可定製、靈活的編輯器

　　（3）Hallo

　　（4）Substance Composer

　　（5）Proper

　　（6）SnapEditor

　　（7）Create.js

　　（8）MDMagick

　　（9）X-editable

　　二十3、Code Viewers & Editors

　　（1）Rainbow.js

　　（2）Intelligist

　　（3）Prism.js

　　（4）Brackets： Adobe用JavaScript、HTML 和CSS寫的基於Web的開源代碼編輯器

　　（5）CodeMirror

　　（6）Scripted

　　（7）tabIndent.js

　　（8）Behave.js：是一個輕量級的JavaScript庫,爲普通的text areas編輯框提供了IDE風格的行爲，讓它更適合書寫代碼。

　　二十4、Performance

　　（1）Writing Fast, Memory-Efficient JavaScript

　　（2）CSS-only:Load images on demand

　　（3）Videos

• Faster HTML and CSS: Layout Engine Internals for Web Developers
• Google I/O 2012 - Breaking the JavaScript Speed Limit with V8
• DOM, HTML5, & CSS3 Performance
• Nicholas Zakas | High Performance Javascript
• Building A Performant HTML5 App

　　（4）General Information

• Writing Fast, Memory-Efficient JavaScript
• JavaScript Performance Best Practices
• Improving the performance of your HTML5 App
• Best Practices for a Faster Web App with HTML5
• Front-end performance for web designers and front-end developers

　　（5）Memory

• Memory 101
• Memory leak patterns in JavaScript
• Understanding and Solving Internet Explorer Leak Patterns
• Finding memory leaks
• How to write low garbage real-time Javascript
• JScript Memory Leaks
• Tracking Down Memory Leaks in Node.js
• Effectively Managing Memory at Gmail scale

　　（6）Tools

• Chrome Developer Tools
  • Heap Profiling
  • Profiles Panel
  • JavaScript Profiling With The Chrome Developer Tools
  • Introduction to Chrome Developer Tools, Part One
• V8
  • Optimizing for V8
  • I-want-to-optimize-my-JS-application-on-V8 checklist
  • Performance tips for JavaScript in V8
• JavaScript Leak Finder
  • Introduction Article
• Navigation Timing
• Firebug Paint Events
• Locache：是一個JavaScript緩存框架，用於在瀏覽器上使用localStorage進行數據的緩存

　　（7）DOM Manipulation

• Rendering: repaint, reflow/relayout, restyle
• Reflows & Repaints: CSS Performance making your JavaScript slow?
• The new game show: "Will it reflow?"
• When does reflow happen in a DOM environment?
• Speeding up JavaScript: Working with the DOM
• Efficient JavaScript
• When Does JavaScript trigger reflows and rendering
• How (not) to trigger a layout in WebKit

　　（8）Animation

• requestAnimationFrame for smart animating
• Leaner, Meaner, Faster Animations with requestAnimationFrame
• Collie - high performance Animation library
• Using requestAnimationFrame to Optimize Dragging Events
• requestAnimationFrame API: now with Sub-Millisecond Precision
• Why moving elements with translate() is better than pos:abs top/left

　　（9）Hardware Acceleration

• Visualizing WebKit’s hardware acceleration
• List of Chromium Command Line Switches

　　（10）Browser Internals

• How Browsers Work: Behind the scenes of modern web browsers
• How Browsers Work - Part 1 - Architecture
• Know Your Engines at O’Reilly Velocity 2011
• Video: GDC 2012: From Console to Chrome
• Fast CSS: How Browsers Lay Out Web Pages
• Video: What Browsers Really Think of Your App
• WebKit blog five-part series on rendering
• Video: Alex Russell - Life Of A Button Element
• How a web page loads
• Video: The Fundamentals, Primitives and History of HTML5
• The JavaScript engine family tree
• How JavaScript compilers work
• JavaScript compiler strategies
• The future for JavaScript

　　（11）HTTP Transport

• Fantastic front-end performance: Concatenate, Compress & Cache
• Video: Cache Is King!

　　二十6、Modularity & Loaders

　　（1）Lazy Module Declaration

　　（2）UMD (Universal Module Definition) patterns

　　（3）Browserify

　　（4）require.js

• Plugins

　　（5）CrapLoader

　　（6）Writing Modular JavaScript With AMD, CommonJS & ES Harmony

　　（7）Путь JavaScript модуля

　　（8）Modular JavaScript with RequireJS

　　（9）LABjs & RequireJS: Loading JavaScript Resources the Fun Way

　　（10）JavaScript Inheritance and Public/Private members

　　（11）Deep dive into the murky waters of script loading

　　（12）Terminology: Modules

　　二十7、Package Management

　　（1）bower

　　（2）volo

　　（3）parce

　　（4）jam.js

　　（5）component

　　二十8、Image Manipulation

　　（1）Paintbrush.js

　　（2）Obscura

　　（3）jCrop

　　二十9、HTTP

　　（1）Using CORS

　　（2）Cross-domain Ajax with Cross-Origin Resource Sharing

　　三10、Error Handling & Debugging

　　（1）Tracing.js

　　（2）JavaScript error handling anti-pattern

　　（3）Tattletale

　　三11、Documentation

　　（1）dexy

　　（2）docco

　　（3）Ronn

　　（4）dox

　　（5）YUIDoc

　　（6）coddoc

　　三12、Windows 8 Style

　　（1）Metro UI CSS

　　（2）BootMetro

　　（3）metro-bootstrap

　　（4）Metro UI Template

　　（5）Droptiles – Metro-Style Web Dashboard

　　（6）Metro JS

　　（7）Windows Metro tiles with Javascript and CSS3

　　（8）Cosmo

　　（9）Vid: What Web Developers Need to Know When Building Metro style Apps

　　（10）CSS3 Microsoft Modern Buttons

　　（11）Visual Studio 2012 Image Library - 5,000+ Images Downloadable Now

　　（12）Metro User Interface Implementation and Resources

　　三十3、Video

SublimeVideo

　　三十4、Audio

　　（1）howler.js

　　（2）Stratus 2soundcloud player

　　三十5、Library Collections

　　（1）jster

　　（2）MicroJS

　　（3）JSPkg

　　（4）TheToolbox

　　（5）Unheap

　　三十6、Chat

XMPP using JSON

　　三十7、Prototyping

　　（1）fixie

　　（2）Holder.js

　　三十8、JSON

　　（1）JSON Query Language

　　（2）Oboe.js

　　三十9、Presentations

　　（1）Ancesor.js

　　（2）Slideshow.html

　　（3）HTML5 Slideshow

　　（4）jQuery Screen

　　（5）reveal.js

　　（6）html5 Slides by Google

　　（7）Slides

　　（8）CSSS

　　（9）deck.js

　　（10）controldeck.js

　　四10、Scrolling

　　（1）Scrollpath

　　（2）jQuery NiceScroll

　　（3）FoldScroll

　　（4）Scrollorama

　　四11、Keyboard

　　（1）Mousetrap

　　（2）Keypress

　　（3）konami.js

　　四12、Tables & DataGrids

　　（1）Tablecloth.js

　　（2）Responsive Data Tables

　　（3）stacktable.js

　　（4）FooTable

　　（5）Handsontable

　　（6）Backgrid.js

　　（7）Gridster

　　（8）Flex

　　四十3、Security

　　（1）oAuth Consumer Library

• ohauth
• How iD Logs in to OpenStreetMap

　　（2）JSO - a Javascript OAuth Library

　　（3）xdoauthproxy

　　（4）JavaScript Cryptography

　　（5）Javascript Crypto Library

　　（6）Stanford Javascript Crypto Library

　　（7）mozilla / jwcrypto

　　（8）Critic

• Javascript Cryptography Considered Harmful
• Final post on Javascript crypto

　　四十4、Layout

　　（1）Shapeshift

　　（2）CollagePlus

　　四十5、Misc

　　（1）zip.js

　　（2）simpleCart.js

　　（3）Aware.js

　　（4）How to directly upload files to Amazon S3 from your client side web app