前端框架与工具库选择

最新推荐文章于 2025-07-22 14:42:12 发布

转载最新推荐文章于 2025-07-22 14:42:12 发布 · 1k 阅读

文章标签：

#前端框架

Web前端专栏收录该内容

67 篇文章

订阅专栏

转载自 http://www.cnblogs.com/xiaohuochai/p/7041595.html
作者 @小火柴的蓝色理想
原文有删改

DOM

常用方案

jQuery
jQuery是曾经风靡一时的最流行的前端解决方案，jQuery特有的链式调用的方式简化了javascript的复杂操作，而且使人们不再需要关心兼容性，并提供了大量的实用方法
zepto.JS
zepto是jQuery的精简版，针对现代高级浏览器的JavaScript 工具库，针对移动端设计，去除了大量jQuery的兼容代码，提供了简单的手势，部分API的实现方式不同。如果你会用 jQuery，那么你就已经会用 Zepto 了。
mootools
mootools源码清晰易懂，严格遵循Command-Query(命令-查询)的接口规范，没有诸如jQuery的两义性接口。还有一个不得不提的特点是，使用选择器获取的是DOM原生对象，而不是被包装过的对象。而它支持的诸多方法则是通过直接扩展DOM原生对象实现的，这也是它的争议所在

专业领域

手势 : Hammer.JS
包括了常见手势封装（Tab、Hold、Transform、Swifp）并支持自定义扩展
局部滚动 : iscroll.JS
移动端position:fix + overflow:scroll的救星
高级动画 : Velocity.JS
可以复杂动画序列实现，不仅局限于 DOM
视频播放 : Video.JS
类似原生video标签的使用方式，对低级浏览器使用flash播放器

通信

常用方案

jQuery
Reqwest
用于浏览器异步HTTP请求。支持xmlHttpRequest, JSONP, CORS, JSONP，稳定性高，IE6+支持，Promise/A 和 CommonJS约束
qwest
代码少、支持XMLHttpRequest2、CORS 跨域、支持高级数据类型（ArrayBuffer、Blob、FormData）

专业领域

socket.io
实时性高，支持二进制数据流，智能自动回退支持，且支持多种后端语言

工具包

es5-shim
提供 ES3 环境下的 ES5 支持
es6-shim
提供 ES5 环境下的 ES6 支持
underscore
提供兼容IE6+的扩展功能函数
Lodash
是underscore 的高性能版本，方法多为 runtime 编译出来的
响应式导航 : responsive-nav.js
一个很小的JS插件，压缩之后仅有1.7KB，能帮你创建针对小屏幕的可切换式导航
stickUp.js
一个 jQuery插件，能让页面目标元素“固定”在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。
unslider.js
一个超小的（不到 3kb）jQuery轮播（slider）插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。

模板

基于字符串的模板(String-based)
dustjs、hogan.js、dot.js
基于DOM的模板(DOM-based)
angularjs、vuejs、knockout
活动模板(Living Template)
RegularJS、RactiveJS、htmlbar

组件

Bootstrap
封装了常用的组件，是目前最火的组件解决方案，具有移动端first的流式栅格系统，由sass组织，可定制UI
Foundation
在国内知名度不高，具有移动端first的流式栅格系统，由sass组织，可定制UI
Flat UI
[Flat UI] 是基于 Bootstrap做的 Metro 化改造，由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！
bootstrap-switch
Bootstrap Switch是对Bootstrap控件的扩充。基于选 HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。
iCheck
基于 jQuery 或 Zepto，让不同浏览器下的复选框（ checkboxes和单选按钮（radio button）更美观、功能更强。
bootstrap-wysiwyg
为Bootstrap定制的微型(5kb)所见即所得（What you see is what you get）富文本编辑器
chart.js
6种图表类型，基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案，不依赖任何外部工具库，轻量级（压缩之后仅有4.5k），并且提供了加载外部参数的方法
messenger
非常酷的弹框组件，压缩之后仅有 2.5kb，依赖于jQuery、underscore、backbone
bootstrap-datetimepicker
日期时间选择器，依赖于 bootstrap的下拉菜单组件 (dropdowns.less) 的某些样式，还有bootstrap的sprites(sprites.less and associated images) 中的箭头图标。
Headroom.js
为页面顶部多留些空间。在不需要页头时将其隐藏，例如向下滚动页面时，隐藏头部导航栏，向上滚动式再显示出来
Button
高度可定制的、免费并且开源的按钮 CSS样式库，部分功能需要依赖 jquery，图标字体需要依赖 font-awesome