【JavaScript】直接拿來用!最火的前端開源項目(一)

【JavaScript】直接拿來用!最火的前端開源項目(一) - daishuguang

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

詳細內容以下:css

1、Architecturehtml

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

 

(1) BEM :該方法可讓開發人員快速開發出網站,延長網站的壽命;保持代碼的重用性 html5

(2)  Atomic Design :以原子的觀點設計系統架構,從具體到抽象構建系統架構java

(3) Aura :是一個事件驅動的架構,利用可重用的部件,開發可擴展的應用程序  react

(4)  Terrific.js :提供一個可擴展的JavaScript架構,幫助你對JQuery/Zepto代碼進行模塊化。  jquery

(5)  大型JavaScript應用程序架構的模式e  css3

(6)  視頻:Nicholas Zakas:可擴展的JavaScript應用程序架構  git

(7)  圖書:學習JavaScript設計模式  

(8)  圖書:雄辯的JavaScript  

(9)  圖書:深刻單頁面的應用程序  

(10)  jQuery的應用程序架構圖  

(11)  如何管理大型jQuery的應用程序  

(12)  對於CSS的可擴展和模塊化架構  

(13)  比較不一樣觀察者模式之間的實現過程

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

3、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) React by 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 Compose r:是一個前端開發框架構,專爲構建高級前端而設計的 

(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 :一些混合項內容

4、Cross Browser

 

5、Cross Device

 

(1)Reponsive

(2)E-Mail

(3)Mobile

(4)Printers

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字體

(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

相關文章
相關標籤/搜索