最受欢迎的五大前端框架比较
Posted 大叔讲JavaScript
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最受欢迎的五大前端框架比较相关的知识，希望对你有一定的参考价值。
“尺有所短，寸有所长”，每个前端框架都有自己的长处和短处，以及特定的开发应用领域，开发者可以根据特定项目的需求进行选择。
如果你的Web项目很简单，则不需要使用复杂框架。
此外，许多选项都是模块化的，允许自定义组件，甚至可以混合来自不同前端框架里的组件。
下面将要讨论的前端框架是基于GitHub的流行指数展开的。我们就从最流行的开始，这当属Bootstrap。
1. Bootstrap
Bootstrap是当前CSS前端框架中无可争议的领导者。
鉴于其强大的知名度，每天的使用度仍在不断增长。可以肯定的是，这个强大的前端工具箱不会让大家失望。它可以开发者可以独立一人建设网站。
· 发布时间： 2011年
· 当前版本： 4.0
· 人气： 当前GitHub上有121,374颗星
· 简介： 简洁，直观且功能强大的前端框架，可实现更快更轻松的网页开发。
· 核心概念/原则： RWD和移动优先。
· 框架大小： 578 KB（预编译的zip文件夹）
· 预处理器： Sass
· 响应：是的
· 模块化：是的
· 启动模板/布局：是的
· 图标集：不含
· 附加功能/附加组件：没有捆绑任何组件，还有许多第三方插件可用。
· 独特的组件： Jumbotron，Card
· 文档：非常好
· 定制：网格系统和重启的单独文件选项，使用Sass轻松定制; 无在线定制器
· 浏览器支持：最新版本的Firefox，Chrome，Safari，IE810-11-MicrosoftEdge。
· 许可证： MIT
使用Bootstrap的注意事项
Bootstrap的主要优势在于其用户量大而且口碑良好。从技术上讲，它不一定比列表中的其它框架好，但与其他四个前端框架相比较结合，它提供了特别多的资源（文章、教程，第三方插件和扩展，主题构建工具等）。总之，Bootstrap 无处不在，这是人们继续选择它的主要原因。
2. Foundation by ZURB
Foundation是前端框架中第二大玩家。 有了像ZURB这样强大技术团队的公司支持它，这个框架有一个真正强大的... 呃 ...基金会。 毕竟，基金会包括Facebook，Mozilla，易趣，雅虎的巨头和“美国国家地理”等都在使用该框架。
· 发布时间： 2011年
· 当前版本： 6
· 人气： GitHub上26,956颗星
· 描述： “世界上最先进的响应式前端框架”
· 核心概念/原则： RWD，移动优先，语义
· 框架大小： 197.5 KB
· 预处理器： Sass
· 响应：是的
· 模块化：是的
· 启动模板/布局：是的
· 图标集： 基础图标字体
· 附加功能/附加组件：是
· 独特的组件：图标栏，Flex视频，击键，Joyride，定价图标
· 文档：很好，有很多额外的资源可用
· 定制：基本的GUI定制器
· 浏览器支持： Chrome，Firefox，Safari，IE9+; ios，android，Windows Phone 7+
· 许可证： MIT
使用基金会的注意事项
基金会是一个真正专业的前端框架，提供商业支持，培训和咨询服务。 它还提供了许多资源，可帮助开发者更快，轻松地学习和使用该框架。
3.Sematic UI
Sematic Ui 框架为开发网站更加语义化做着持续努力。它利用自然语言原理，从而使代码更具可读性和可理解性。
· 发布： 2013
· 当前版本： 2.2
· 人气： GitHub上39,364颗星
· 描述： “基于自然语言原理的UI组件框架”
· 核心概念/原则：语义，标签矛盾，回应
· 框架大小： 806 KB
· 预处理器：少
· 响应式：是
· 模块化：是
· 开始模板/布局：是，提供了一些基本的初学者模板
· 图标集： Font Awesome
· 附加功能/附加组件：否
· 独特的组件：分频器，国旗，显示，广告，卡，饲料，项目，统计，调光器，评级，形状
· 文档：非常好，提供组织良好的文档，另外它提供入门指南，自定义和创建主题
· 定制：没有GUI定制器，只有手动定制
· 浏览器支持： Firefox，Chrome，Safari，IE10+（IE9仅支持浏览器前缀），Android 4，Blackberry 10
· 许可证： MIT
关于Sematic UI的说明
语义是这里讨论的最具创新性和功能全面的前端框架。 框架的整体结构和命名约定，就其类的明确逻辑和语义而言，也超过了其他类。
4.Yahoo! Pure
Pure是一个轻量级的模块化框架 - 用纯CSS编写 - 包括可以根据需要一起使用或分开使用的组件。
· 发布： 2013
· 当前版本： 1.0.0
· 人气： GitHub上18,183颗星
· 说明： “一组您可以在每个Web项目中使用的小型，响应式CSS模块”
· 核心概念/原则： SMACSS ，极简主义
· 框架大小： 3.8 KB缩小和gzipped
· 预处理器：无
· 响应：是的
· 模块化：是的
· 启动模板/布局：是的
· 图标集：无; 您可以改用Font Awesome
· 附加功能/附加组件：无
· 独特的组件：无
· 文档：很好
· 定制：基本的GUI皮肤生成器
· 浏览器支持： Firefox，Chrome，Safari的最新版本; IE7 +; iOS 6.x，7.x; Android4.x
· 许可证： Yahoo! Inc. BSD
关于Pure框架的说明
Pure只为您的项目提供纯粹的样式。对于那些不需要全功能框架只需有特定组件包含工作中的人来说，Pure是理想之选。
5.YOOtheme之UIkit
UIkit是一个易用且易定制组件的简明集合。尽管它不如其它竞争对手那么受欢迎，但它提供了相同的功能和质量。
· 创建者： YOOtheme
· 发布： 2013
· 当前版本： 3.0.0
· 人气： GitHub上11,604颗星
· 描述： “用于开发快速而强大的Web界面的轻量级和模块化前端框架”
· 核心概念/原则： RWD，首先移动
· 框架大小： 326.9 KB（压缩文件夹）
· 预处理器：少，SAAS
· 响应：是
· 模块化：是
· 启动模板/布局：是
· 图标集： UIkit带有自己的SVG图标系统和库，其中包含越来越多的轮廓图标
· 附加功能/附加组件：是
· 独特的组件：文章，Flex，封面，html编辑器
· 文档：很好
· 自定义：高级GUI定制程序仅在版本2（以前的版本）中可用
· 浏览器支持： Chrome，Firefox，Safari，IE9+
· 许可证： MIT
关于UIkit的相关说明
UIkit已成功用于许多WordPress主题 。 它提供了一个灵活而强大的手动定制机制。 （该框架的早期版本还提供了高级GUI定制工具。）
如何选择适合自己合适的前端框架？
做为一名前端开发者，需要有一个正确选择框架的指导思想。 以下是一些需要注意的重要事项：
· 框架是否有足够的知名度 ？ 更大的知名度意味着参与该项目的人越来越多，因此，来自社区的更多教程和文章，更实际的示例/网站，更多第三方扩展以及与相关Web开发产品的更好集成。 大受欢迎也意味着该框架更具前瞻性：围绕它的社区更大的框架不太可能被抛弃。
· 框架在积极开发中吗？ 一个好的框架需要随着最新的网络技术不断升级，特别是在移动方面。
· 框架已经成熟了吗？ 如果一个特定的框架尚未在真实项目中使用测试，你可以自由使用它，但依靠它来进行开发项目可能是不明智的。
· 框架是否提供了文档 ？ 为了提高学习过程，需要良好的文档。
· 什么是框架的特异性水平 ？ 这里的主要观点是，与具有高级特异性的框架相比，更通用的框架更容易处理。 在大多数情况下，最好选择应用最少样式的框架，这样自定制要容易得多。 与覆盖或覆盖现有的CSS规则相比，添加新的CSS规则更为方便和有效。 另外，如果您在现有规则的基础上添加新规则，则最终会出现未使用的规则，这会不必要地增加CSS的大小。
如果你还不确定，可以采用混合搭配的方式。
如果特定的框架不能满足需求，可以混合来自两个或更多项目的组件。 比如，可以从一个框架获得较小的CSS基础样式，从另一个框架获得一个首选的网格系统，以及从第三个获得更复杂的组件——这就是模块化！ :)
最后，应该指出的是，如今通过Flexbox和Grid Layout在最新版本的主流浏览器中都能提供良好的支持，构建复杂布局比以往任何时候都容易。 单单这一事实可能会鼓励更多的开发人员离开前端框架的拐杖从头开始编写自己的布局。
以上是关于最受欢迎的五大前端框架比较的主要内容，如果未能解决你的问题，请参考以下文章