直接拿来用！最火前端开源项目（三）

摘要：在前面的（一）、（二）中为开发者提供了十九个类别的开源项目列表，你们是否会感到目不暇接呢？没关系，只要对你有所帮助，我们的目的也就达到了，这里继续向你推荐剩下的二十六个类别的开源项目列表，供你查阅。

在《直接拿来用！最火前端开源项目（一）、（二）》中提供了十九个类别的开源项目列表，开发者们是否会目不暇接呢？没关系，只要对你有所帮助，我们的目的也就达到了，这里继续向你推荐剩下的二十六个类别的开源项目列表，供你查阅。

二十、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

二十一、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

二十二、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

二十三、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风格的行为，让它更适合书写代码。

二十四、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! 

二十六、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

二十七、Package Management

（1）bower
（2）volo
（3）parce
（4）jam.js
（5）component

二十八、Image Manipulation

（1）Paintbrush.js
（2）Obscura
（3）jCrop

二十九、HTTP

（1）Using CORS
（2）Cross-domain Ajax with Cross-Origin Resource Sharing

三十、Error Handling & Debugging

（1）Tracing.js
（2）JavaScript error handling anti-pattern
（3）Tattletale

三十一、Documentation

（1）dexy
（2）docco
（3）Ronn
（4）dox
（5）YUIDoc
（6）coddoc

三十二、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

三十三、Video

SublimeVideo

三十四、Audio

（1）howler.js
（2）Stratus 2soundcloud player

三十五、Library Collections

（1）jster
（2）MicroJS
（3）JSPkg
（4）TheToolbox
（5）Unheap

三十六、Chat

XMPP using JSON

三十七、Prototyping

（1）fixie
（2）Holder.js

三十八、JSON

（1）JSON Query Language
（2）Oboe.js

三十九、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

四十、Scrolling

（1）Scrollpath
（2）jQuery NiceScroll
（3）FoldScroll
（4）Scrollorama

四十一、Keyboard

（1）Mousetrap
（2）Keypress
（3）konami.js

四十二、Tables & DataGrids

（1）Tablecloth.js
（2）Responsive Data Tables
（3）stacktable.js
（4）FooTable
（5）Handsontable
（6）Backgrid.js
（7）Gridster
（8）Flex

四十三、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

四十四、Layout

（1）Shapeshift
（2）CollagePlus

四十五、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

文章来源：github.com