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

时间  2019-12-01
标签 直接 拿来 前端 开源 项目 繁體版
原文   原文链接

对于开发者而言，了解当下比较流行的开源项目非常必要。利用这些项目，有时可以让你达到事半功倍的效果。为此，本文整理GitHub上最火的前端开源项目列表，内容涵盖了Hack Design、 Designer School、TheExpressiveWeb、如何成为优秀的前端开发工程师、Web开发教学材等，这里按分类的方式列出前九个。javascript

详细内容以下：css

1、Architecturehtml

网站架构，通常认为是根据客户需求分析的结果，准肯定位网站目标群体，设定网站总体架构，规划、设计网站栏目及其内容，制定网站开发流程及顺序，以最大限度地进行高效资源分配与管理的设计。前端

（1） BEM：该方法可让开发人员快速开发出网站，延长网站的寿命；保持代码的重用性
（2） Atomic Design：以原子的观点设计系统架构，从具体到抽象构建系统架构html5

 

（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） 比较不一样观察者模式之间的实现过程 java

 

2、Workflow  node

工做流就是一系列相互衔接、自动进行的业务活动或任务。一个工做流包括一组活动及它们的相互顺序关系，还包括流程及活动的启动和终止条件，以及对每一个活动的描述。
react


（1） Vid：JavaScript开发流程+ 幻灯片
（2） Yeoman：为开发者提供一系列健壮的工具、程序库和工做流，帮助他们快速构建出漂亮、引人注目的Web应用。 
（3） Grunt：是一个基于任务的关于JavaScript项目命令行构建工具jquery

（4）前端处理——扁平化构建与自动化css3

（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） 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 ：一些混合项内容

 

4、Cross Browser


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

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

文章来源： github.com

转载：http://www.csdn.net/article/2013-06-25/2815979-front-end-development

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程