首页 > 代码库 > 前端开发常用插件总结
前端开发常用插件总结
一、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低版本机上运行有些卡
前端开发常用插件总结