基于zepto的移动端轻量级日期插件--date_picker


Posted in Javascript onMarch 04, 2016

前言

做过移动Web开发的同学都知道,移动端日期选择是很常见的需求。在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker。个人看来,这些插件存在的两个显而易见的问题,第一是过重的依赖,对于jQuery的插件,已经强制依赖了80多k的庞然大物,把很多移动端项目拒之门外;第二是太过强大的功能,很多插件花百分之八十的时间去完善插件百分之二十炫酷的额外功能,导致代码量变大,配置繁杂。所以一款少依赖、轻量级和使用简单的移动端日期选择插件是非常必要的。本文简单介绍近来写的一款基于zepto的移动端轻量级日期插件--date_picker。

插件设计原则

只保留最必要的功能

日期选择插件无非就是可以进行年、月、日选择,并且提供必要的年月切换动画特效,至于什么最小时间、最大时间、主题定制,概不在本插件功能范围。

保留必要的依赖

本插件虽说是基于zepto,实际上还隐性依赖了Github上面一个比较牛的库fastclick。我们知道,移动端点击事件处理有两个常见的问题:(1)移动端click事件有300ms,通常采用touch事件来代替click事件来提高灵敏性;(2)touch事件会存在穿透的问题,一般插件都不用touch事件;基于这两个问题,fastclick做了兼容,只需要简单调用它提供的api就能够愉快得和原本一样调用click事件,所以这个依赖不能省。至于依赖zepto,实际上是可有可无的,一来博主平时工作都是写原生js的,不用插件也没多大的感觉,二来插件受众面就会小一些。不过鉴于zepto在移动端已然和zepto在PC端一样如鱼得水,就毫不客气采用了。

既能够支持模块化又能本地引用文件使用的

久远一点的插件基本都是让你下载一个文件,然后用script去引用,这样本无可厚非,只不过放着最大的包管理器npm不用,岂不是对不起页面仔这个称号。所以本插件支持文件引用也支持CMD方式的模块引用。

功能介绍

直接上图:

基于zepto的移动端轻量级日期插件--date_picker

技术细节

transitionEnd事件

插件的主面板是当前月份的天数详情,如果点击上一个月或者下一个月插件需要计算出上一个月或者下一个月的天数信息,然后插入到DOM节点中。在插入到DOM节点之后,就需要采用动画效果来显示最新的一月并且褪去老的一个月,采用的方式是CSS2d转化加过渡。我们需要处理的就是在旧的一个月褪去看不见的时候及时从DOM树中删除,不然如果用户一直点下一个月或者上一个月的话,内存会炸的。为了实现这个移除功能,一个办法是采用setTimeout事件在特定的时间去删除节点,经过尝试,发现由于Javascript定时器不准确的特性和前后一个月切换带来的逻辑复杂度增加,这种方案很不可行。
于是,本插件采用了第二个方案:transitionEnd事件。直接引用一下MDN的介绍:

The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire. The event will also not fire if the animated element becomes display: none before the transition fully completes.

也就是只要你不去随便乱动元素的CSS属性,在动画完成的时候,你就可以执行相应的操作(删除节点)。
再来看看兼容性:

基于zepto的移动端轻量级日期插件--date_picker

对于移动Web开发足矣!

最后就是在绑定事件的兼容性问题,不同厂商对于这个事件的定义并不一致,比如IOS里面监听的是transitionend事件,但是在安卓里面监听transitionend事件完全没反应,经过一番Google,发现安卓需要监听webkitTransitionEnd事件。为了解决绑定事件时候的兼容性问题,就需要检测浏览器到底支持哪种事件。下面贴上Stackoverflow上面一个问答的代码片段:

function whichTransitionEvent() {
  var t,
   el = document.createElement('fakeelement');
   transitions = {
    'OTransition'  :'oTransitionEnd',
    'MSTransition'  :'msTransitionEnd',
    'MozTransition'  :'transitionend',
    'WebkitTransition' :'webkitTransitionEnd',
    'transition'   :'transitionEnd'
   };

  for(t in transitions){
   if( el.style[t] !== undefined ){
    return transitions[t];
   }
  }

  return false;
 }

安装使用

安装

支持下面两种方式

  1. git clone之后直接拷贝引用bin文件夹下面的datepicker.min.css和datepicker.min.js
  2. 从npm下载安装:npm install --save date_picker

使用

引用样式datepicker.min.css
引用datepicker.min.js或者引用模块var DatePicker = require('date_picker');
实例化组件,绑定插件日期选择完成之后的回调函数

var _date = document.getElementById('date');

 var datePicker = new DatePicker({
  confirmCbk: function(data) {
   _date.value = data.year + '-' + data.month + '-' + data.day;
  }
 });

 _date.onfocus = function(e) {
  _date.blur();
  datePicker.open();
 };

插件外置两个API: open和close,其中特别注意上面demo中_date在获取焦点之后里面强制去除了焦点,是为了避免安卓下面为input标签设置readonly属性并不能禁止原生键盘弹出的问题。

Javascript 相关文章推荐
jquery中eq和get的区别与使用方法
Apr 14 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
浅谈es6中的元编程
Dec 01 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 #Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 #Javascript
js实现文字滚动效果
Mar 03 #Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 #Javascript
JQuery日期插件datepicker的使用方法
Mar 03 #Javascript
jQuery日历插件datepicker用法详解
Mar 03 #Javascript
初步使用Node连接Mysql数据库
Mar 03 #Javascript
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php session 错误
2009/05/21 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
js 手机号码合法性验证代码集合
2012/09/29 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python实现的Kmeans++算法实例
2014/04/26 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python面向对象类的继承实例详解
2018/06/27 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python dict如何定义
2020/09/02 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
公司业务主管岗位职责
2013/12/07 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
大二学习计划书范文
2014/04/27 职场文书
和谐社区口号
2014/06/19 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
软件测试专业推荐信
2014/09/18 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
大学生见习总结报告
2015/06/24 职场文书
电视新闻稿
2015/07/17 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android