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

标签： 开源风暴 | 发表时间：2013-06-28 08:00 | 作者：秩名
出处：http://www.kuqin.com/jingyan/

对于开发者而言，了解当下比较流行的开源项目很是必要。利用这些项目，有时能够让你达到事半功倍的效果。为此，本文整理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

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

十一、Programming & Markup Languages

计算机语言总体分为机器语言、汇编语言、高级语言三大类，计算机的每个动作及步骤都是按照计算机语言编好的语言来执行的，而人们也通过计算机语言向计算机发出命令。

标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。

（1）CSS

（2）JavaScript

（3）HTML

（4）Higher Level Languages

  • Dart：基于JavaScript进行编译的类型语言
  • Sass：是对CSS3扩展的一种开发工具，它在CSS3的基础上添加了嵌入式规则、变量、多态、继承等。使用命令行工具或一个Web框架插件就能转换成标准格式的CSS。
  • Less：通过动态行为扩展了CSS，如：变量、多态、操作与函数
  • Roole：是一种编译成CSS的语言
  • Stylus：具有表现性、动态性、健壮性的CSS

十二、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：是一个健壮的绘图工具,可以适合任何数据的需求

十三、Widgets

Widgets是一个小模块代码，它可以在任意一个基于HTML的Web页面上执行，它的表现形式有：视频、地图，新闻、小游戏等。该思想源于代码的复用，通常情况下，Widgets代码形式包含了DHTML、JavaScript以及Adobe Flash。

（1）Kits

  • AlloyUI：是一个基于YUI（Yahoo! User Interface Library）实现的JavaScript UI组件库和CSS框架
  • Kendo UI：基于最新技术HTML5、CSS3和JavaScript标准设计开发的,用于开发现在HTML UI操作界面的框架
  • jQuery UI Bootstrap：一个基于Twitter Bootstrap的jQuery UI主题
  • Zebra：是一个JavaScript库，遵循简单OOP理念，它提供基于UI的HTML5 Canvas和包括Java到JavaScript转换器工具

（2）File Upload

（3）Sitemap

  • SlickMap CSS：一个简单的样式单，根据sitemap显示对应的图形化信息

（4）Table Of Contents

（5）Modals

（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

（8）Selects

（9）Progress Bars

（10）Misc

十四、Validation & Forms

（1） ALAJAX
（2） Parsley.js：是一个用来对Web表单的输入数据进行验证的JavaScript库，而无需另写一行 JavaScript 代码
（3） mailcheck.js：一个jQuery插件，当输入错误的邮件地址时，提示你输入正确的域名
（4） one-validation：是规则表达式的集合达到综合验证的目的
（5） nextVal：是一个易于使用的、灵活的、健壮的表单验证jQuery插件
（6） Fields.js：创建字段的集合。对每个字段经常进行有效性的评估，同时也易于通过收集的方式获取字段
（7） IV.js
（8） Ladda
（9） jQuery Super Labels

十五、Transitions

（1） Quicksand：用于实现动画洗牌效果的 jQuery 插件
（2） Isotope：是一个jQuery的插件,用来实现精美的动态元素布局
（3） flippant.js：一个让页面内容产生翻转的迷你js+css库
（4） Meaningful Transitions

十六 、Numbers

（1） accounting.js：是一个简单的JavaScript库用来格式化数字、货币的显示
（2） numbers.js

十七、Time and Dates

（1） moment.js：是一个简单易用的轻量级JavaScript日期处理类库,提供了日期格式化、日期解析等功能
（2） Pikaday：是一款超轻量级的javascript日期选择器,并且支持模块化的CSS,可以帮助你更加简单的配置样式

十八、Search

（1） Fullproof
（2） lunr.js： 为客户端应用程序提供一个简单的全文搜索引擎

十九、Testing

（1） Writing Testable JavaScript
（2） Writing Testable Frontend Javascript Part 1 – Anti-patterns and their fixes
（3） Introduction to BDD
（4） cucumber

  • 默认表情
  • 阿狸
  • 程序员咆哮体：前端工程师你们伤不起！！！
  • 默认表情
  • 阿狸
www.kuqin.com
数据正在加载中...
无觅相关文章插件，快速提升流量

[ comments ]

相关 [前端 开源 项目] 推荐：

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

- - 酷勤网-挖经验 [expanded by feedex.net]
对于开发者而言，了解当下比较流行的开源项目很是必要. 利用这些项目，有时能够让你达到事半功倍的效果. 为此，本文整理GitHub上最火的前端开源项目列表，内容涵盖了. 如何成为优秀的前端开发工程师、. Web开发教学材等，这里按分类的方式列出前九个. 一、Architecture. 网站架构，一般认为是根据客户需求分析的结果，准确定位网站目标群体，设定网站整体架构，规划、设计网站栏目及其内容，制定网站开发流程及顺序，以最大限度地进行高效资源分配与管理的设计.

推荐20个开源的不错前端低代码项目

- - SegmentFault 最新的文章
近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用. 低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式.

Android优秀开源项目

- - CSDN博客移动开发推荐文章
Android经典的开源项目其实非常多，但是国内的博客总是拿着N年前的一篇复制来复制去，实在是不利于新手学习. 今天爬爬把自己熟悉的一些开源项目整理起来，希望能对 Android开发同学们有所帮助. 另外，如果你有比较好的项目推荐，也烦请在评论里分享出来，我会定期更新博客内容. Apollo音乐播放器：就一个播放器，但是实现的很好.

开源项目之NeoCrypt

- - CSDN博客推荐文章
一个文件加密解密软件的源代码，可以设置很多著名的加密算法进行加密解密. 它集强力、安全的算法和简单、易用的界面于一身. 它的文件管理界面可以轻易地观看和更改整个系 统的加密设置，也可以加/解密选定的文件，安全地删除文件. 项目需要用到第三方库cryptlib，该库已经放到源码包中. 本程序有一个动态链接库NeoCryptSX与一个主程序Neocrypt组成，NeoCryptSX动态库操作简单，只负责发送调用消息，Neocrypt主程序中封装了Decryptor类负责解码、Encryptor类负责编码，File类负责文件操作、CProgUpdater类负责进度等.

开源项目 AllJoyn 初识

- - CSDN博客推荐文章
AllJoyn 高通的一个开源项目，针对IoT的. 光看到介绍第一个感觉就是高大上啊. 它要解决的问题是物联网中互联互通的问题，一个好大平台. 从它介绍的PPT的两张图比较一下就会比较清楚了. 第一张图中它描绘的是现状，各个设备厂商虽然都对外提供了物联网接口，云接口，但各个设备没有互联互通，各自为政，群雄割据.

Google正式开源LevelDB项目

- Jie - 新闻 - LUPA开源社区
　　Google 宣布 LevelDB 项目开源，使用的开源授权协议为 BSD. 　　Leveldb是一个google实现的非常高效的kv数据库，目前的版本1.2能够支持billion级别的数据量了. 在这个数量级别下还有着非常高的性能，主要归功.

晒晒我的开源项目们

- zffl - 透明思考 - Thoughts
在等“bundle install”的时候闲着没事，打开 我的Github ，发现还有那么一些东西值得分享一下的. 啤酒游戏 ：《 第五项修炼 》里讲的啤酒游戏. 合作的进化 ：这就是《 合作的进化 》那本书里讲的生存竞赛游戏. 可以自己写新的策略放进来，看看重复囚徒困境中的最佳策略是如何被选择出来的.

如何熟悉一个开源项目？

- - IT技术博客大学习
       你有个任务，需要用到某个开源项目;或者老大交代你一个事情，让你去了解某个东西.     1.首先，查找和阅读该项目的博客和资料，通过google你能找到某个项目大体介绍的博客，快速阅读一下就能对项目的目的、功能、基本使用有个大概的了解.     2.阅读项目的文档，重点关注类似 Getting started、Example之类的文档，从中学习如何下载、安装、甚至基本使用该项目所需要的知识.

OpenStack – 开源云计算项目

- - 弯曲评论
系列目录 Future Internet Technology. OpenFlow – 打造弹性化的可控互联网. Open vSwitch – 开放虚拟交换标准. Mininet – “懒惰”网络研究者的福音. NOX – 现代网络操作系统. OpenStack – 开源云计算项目. 时下云计算如火如荼，众多企业纷纷推出云计算相关的应用，不少还搭建企业私有云和少数公有云（代表为Amazon）.

2012年五大开源项目

- - 创意科技 - 果壳网
如果一切照计划运行，明年红帽公司（Red Hat）将成为第一家年收入超过10亿美元的开源软件企业，这将是开源社区历史上一个重要的分水岭，开源开发人员一向认为基于社区的开源开发模式非常的具有可行性，甚至比闭源开发更优越，将替代传统开发模式，成为将来软件开发模式. 近几年，诸如Linux，Perl, Apache, Hadoop, OpenOffice, GIMP等数十开源项目在软件市场上如鱼得水，新的一年，又有什么项目会脱颖而出.