前端开发常用插件总结

一、PC端

1、JQuery ( 1.7.0 ~ 3.1.o 版本）

官网：https://jquery.com/

JQuery是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
强大的选择器
出色的DOM操作的封装
可靠的事件处理机制
完善的ajax
不污染顶级变量
出色的浏览器兼容性
链式操作方式
隐式迭代
行为层与结构层分离
丰富的插件支持

二、移动端

1、百度云团队开发的touch.js

移动设备上的手势识别与事件库，由百度云Clouda团队开发维护

官网：http://touch.code.baidu.com/

下载地址：http://touch.code.baidu.com/touch-0.2.14.min.js

轻量级插件
优秀的单指旋转手势
基于原生事件
支持事件代理，性能更好
API简单
2、zepto.js下的touch模块
针对移动设备原生touch事件封装的手势识别事件模块

官网：http://www.bootcss.com/p/zeptojs/

下载地址： https://github.com/madrobby/zepto/blob/master/src/touch.js

3、zepto.js（1.0.0 ~ 1.1.6 )

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api

官网：http://www.bootcss.com/p/zeptojs/

下载地址：http://www.bootcss.com/p/zeptojs/

轻量级，压缩后大小只有 5~ 10k , 但功能齐全
不支持低版本 IE（<10) ，移动端网页开发首选，但不支持 wp系统手机
API仿照JQuery ，上手方便
包含polyfill，zepto，detect，event，ajax，form，fx 这7个就是标准版包含的模块
用tap事件取代click事件200~300 ms 的延迟
Zepto 没有 .innerHeight() .outerWidth() 等四个方法，其次，它的 .height()/.width() 方法也不完善

4、iScroll.js（iScroll4.0~iScroll5.0)

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件

下载地址：https://github.com/cubiq/iscroll/

旨在解决移动webkit系浏览器的区域滚动问题 ( 原生 mobile safari 只能双指滑动，不支持单指滑动且没有滚动条；android自带浏览器也支持区域滚动，且可单指滑动操作，但很不流畅）
兼容mobile safari 、android默认浏览器、safari 、chrome 、 ffirefox5+、opera11+、IE9+及其他webkit核心浏览器
实现上拉刷新、下拉加载问题
官方定义iscroll只能滚动wrapper里的第一个子节点
缩放（Pinch/Zoom）
拉动刷新（Pull up/down to refresh）
轻量级插件，只有4k，性能高
自定义滚动条
扩展性差，接口不明显
点击输入框不灵敏，无法聚焦，页面文字无法选择和复制（iScroll禁止了浏览器的默认行为）

5、hammer.js ( 2.0.8版本）

hammerJS是一个优秀的、轻量级的触屏设备手势库

官网：http://hammerjs.github.io/

下载地址：https://github.com/hammerjs/hammer.js/

开源的移动端脚本框架，可以完美的实现在移动端开发的大多数事件
主要分为六大事件：点击、滑动、拖动、多点触控、按压、旋转

6、flexible.js （0.3.2版本）

flexible.js 是一个用来解决H5屏幕适配问题的一个轻量级插件

下载地址：https://github.com/amfe/lib-flexible

动态改写了标签
给元素添加 data –dpr属性，并且动态改写 data –dpr 的值
给元素添加 font-size 属性，并且动态改写 font-size 的值

7、jQuery Mobile (1.4.0版本）

jQuery Mobile 是一个用于创建移动端web应用的的前端框架

官网：http://jquerymobile.com/

jQuery Mobile为开发移动应用程序提供了非常简单的用户接口
这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码
拥有一个完整统一的UI框架
多页面之间跳转，完全使用ajax加载页面
性能不好，兼容性一般，UI限制大

8、Bootstrap（Bootstrap3.0版本）

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目

官网：http://www.bootcss.com/

下载地址：http://v3.bootcss.com/

CSS3媒体查询（Media Query）实现一个框架、多种设备
手机（<768px) 、平板（>= 768px) 、桌面显示器（>=992px) 、大桌面显示器（>=1200px)
百分比布局实现的12份栅格化系统
丰富完善的UI组件和svg图标库
bootstrap2不支持IE6、bootstrap3不支持IE8以下浏览器
重量级类库
站点样式风格都一样，没有新意

9、Angular.js (1.x版本）

为克服HTML在构建应用上的不足而设计WVC、WVVM框架

官网：http://www.apjs.net/

下载地址：https://angularjs.org/

声明式的模板，自带丰富的Angular指令
完善的前端MVC、MVVM框架，包含模板、数据双向绑定、路由、模块化、服务、过滤器、依赖注入等
可以自定义封装directive
改变了传统JQuery以dom操作为核心的方式，以数据为中心
ng提倡在控制器里面不要有操作DOM的代码 , 对于一些JQuery插件的使用，如果不想破坏代码的整洁性，需要写一些directive去封装插件
Angular太笨重

10、Swiper(3.x版本）

Swiper是一款免费以及轻量级的移动设备触控滑块的js框架

官网：http://2.swiper.com.cn/

下载地址：http://2.swiper.com.cn/download/index.html#file1

Swiper实现触屏焦点图、触屏Tab切换、触屏多图切换等
无需加载任何公用库
Swiper默认的触摸比例为1：1
Swiper带有所有常用的导航控制器，包括分页器，切换箭头，滚动条
使用流行的flexbox布局
Swiper还包含自适应、滚动反弹、抵抗反弹、loop模式、嵌套Swiper
拥有丰富的API，允许你建立自己独特的分页器、导航、视差滚动等效果
允许多行Slide布局

11、Ionic(1.3版本）

Ionic是一款以web开发原生应用App的框架

官网：http://ionicframework.com/

下载地址：http://ionicframework.com/getting-started/

基于AngualrJs来增强应用
通过SASS构建应用程序,提供很多UI组件
旨在从web的角度开发手机应用，基于phoneGap的编译平台，事项编译成各个平台的应用程序
ios上比较流畅，但在android低版本机上运行有些卡