Quiet-Night
Quiet-Night

前端框架与工具库选择

转载自 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

路由

  • page.JS
    类似 Express.Router 的路由规则的前端路由库

  • Director.JS
    可以前后端使用同一套规则定义路由

  • Stateman
    处理深层复杂路由的独立路优库

  • crossroad.JS
    老牌路由库，API功能较为繁琐

最后推荐一个框架选型网站 https://www.javascripting.com，该网站根据不同的需求的选择，给出当下流行的框架选型

你可能感兴趣的:(Web前端)