首页 > 代码库 > 前端开发常用插件总结

前端开发常用插件总结

 


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

前端开发常用插件总结