直接拿來用！最火的前端開源專案（一）

csdn發表於2013-07-11
前端

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

　　詳細內容如下：

　　一、Architecture

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

直接拿來用！最火的前端開源專案（一）

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

直接拿來用！最火的前端開源專案（一）

　　（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） 比較不同觀察者模式之間的實現過程

　　二、Workflow 

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

直接拿來用！最火的前端開源專案（一）

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

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

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

　　三、Frameworks

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

直接拿來用！最火的前端開源專案（一）

　　1.JavaScript篇

　　JavaScript是一種基於物件和事件驅動並具有相對安全性的客戶端指令碼語言。同時也是一種廣泛用於客戶端Web開發的指令碼語言，常用來給HTML網頁新增動態功能。

　　（1）Angular： 是一組用來開發Web頁面的框架、模板以及資料繫結和豐富UI元件。

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

　　學習資源列表：

　　整合例項

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

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

　　（4） Meteor：是一個新鮮出爐的現代網站開發平臺，基礎構架是 Node.JS + MongoDB，它把這個基礎構架同時延伸到了瀏覽器端，可以同時在伺服器端和客戶端無差異地呼叫，本地和遠端資料通過 DDP（Distributed Data Protocol）協議傳輸。

　　（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的簡潔靈活的 網站前端框架及元件包。

　　（3）Themes

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

　　四、Cross Browser

直接拿來用！最火的前端開源專案（一）

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

　　五、Cross Device

直接拿來用！最火的前端開源專案（一）

　　（1）Reponsive

　　（2）E-Mail
　　（3）Mobile

　　（4）Printers

　　六、Patterns & Snippets

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

　　七、DOM Manipulation

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

直接拿來用！最火的前端開源專案（一）

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

　　八、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字型

　　（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：提升網站的排版功能

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

　　相關文件：直接拿來用！最火的前端開源專案（二）   直接拿來用！最火的前端開源專案（三）

　　文章來源： github.com

相關文章