前端开发常用插件总结

前端开发常用插件总结

---

一、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低版本机上运行有些卡