基于zepto的挪动端轻量级日期插件

2019年8月30日 238次阅读 来源: yuanzm

媒介

做过挪动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的挪动端轻量级日期插件》

技术细节

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的挪动端轻量级日期插件》
关于挪动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;
    }

装置运用

装置

支撑下面两种体式格局

  • git clone以后直接拷贝援用bin文件夹下面的datepicker.min.css和datepicker.min.js

  • 从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属性并不能制止原生键盘弹出的题目。

在线Demo

点击链接在PC上检察结果或许手机扫码可直接在手机上检察结果：
《基于zepto的挪动端轻量级日期插件》

小结

本插件代码托管在Github上面，堆栈地点为：https://github.com/yuanzm/simple-date-picker
npm上面的堆栈地点为：https://www.npmjs.com/package/date_picker
末了打个小广告，迎接follow我的github： https://github.com/yuanzm

参考资料

http://stackoverflow.com/questions/13823188/android-4-1-change-transition-and-webkittransition-defiend-how-to-properly-de

    原文作者：yuanzm
    原文地址: https://segmentfault.com/a/1190000004534780
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞