前言

做過(guò)移動(dòng)Web開(kāi)發(fā)的同學(xué)都知道，移動(dòng)端日期選擇是很常見(jiàn)的需求。在PC端，我們有很豐富的選擇，比較出名的就有Mobiscroll和jQuery UI Datepicker。個(gè)人看來(lái)，這些插件存在的兩個(gè)顯而易見(jiàn)的問(wèn)題，第一是過(guò)重的依賴(lài)，對(duì)于jQuery的插件，已經(jīng)強(qiáng)制依賴(lài)了80多k的龐然大物，把很多移動(dòng)端項(xiàng)目拒之門(mén)外；第二是太過(guò)強(qiáng)大的功能，很多插件花百分之八十的時(shí)間去完善插件百分之二十炫酷的額外功能，導(dǎo)致代碼量變大，配置繁雜。所以一款少依賴(lài)、輕量級(jí)和使用簡(jiǎn)單的移動(dòng)端日期選擇插件是非常必要的。本文簡(jiǎn)單介紹近來(lái)寫(xiě)的一款基于zepto的移動(dòng)端輕量級(jí)日期插件--date_picker。

插件設(shè)計(jì)原則

只保留最必要的功能

日期選擇插件無(wú)非就是可以進(jìn)行年、月、日選擇，并且提供必要的年月切換動(dòng)畫(huà)特效，至于什么最小時(shí)間、最大時(shí)間、主題定制，概不在本插件功能范圍。

保留必要的依賴(lài)

本插件雖說(shuō)是基于zepto，實(shí)際上還隱性依賴(lài)了Github上面一個(gè)比較牛的庫(kù)fastclick。我們知道，移動(dòng)端點(diǎn)擊事件處理有兩個(gè)常見(jiàn)的問(wèn)題：（1）移動(dòng)端click事件有300ms,通常采用touch事件來(lái)代替click事件來(lái)提高靈敏性；（2）touch事件會(huì)存在穿透的問(wèn)題，一般插件都不用touch事件；基于這兩個(gè)問(wèn)題，fastclick做了兼容，只需要簡(jiǎn)單調(diào)用它提供的api就能夠愉快得和原本一樣調(diào)用click事件，所以這個(gè)依賴(lài)不能省。至于依賴(lài)zepto，實(shí)際上是可有可無(wú)的，一來(lái)博主平時(shí)工作都是寫(xiě)原生js的，不用插件也沒(méi)多大的感覺(jué)，二來(lái)插件受眾面就會(huì)小一些。不過(guò)鑒于zepto在移動(dòng)端已然和zepto在PC端一樣如魚(yú)得水，就毫不客氣采用了。

既能夠支持模塊化又能本地引用文件使用的

久遠(yuǎn)一點(diǎn)的插件基本都是讓你下載一個(gè)文件，然后用script去引用，這樣本無(wú)可厚非，只不過(guò)放著最大的包管理器npm不用，豈不是對(duì)不起頁(yè)面仔這個(gè)稱(chēng)號(hào)。所以本插件支持文件引用也支持CMD方式的模塊引用。

功能介紹

直接上圖：

技術(shù)細(xì)節(jié)

transitionEnd事件

插件的主面板是當(dāng)前月份的天數(shù)詳情，如果點(diǎn)擊上一個(gè)月或者下一個(gè)月插件需要計(jì)算出上一個(gè)月或者下一個(gè)月的天數(shù)信息，然后插入到DOM節(jié)點(diǎn)中。在插入到DOM節(jié)點(diǎn)之后，就需要采用動(dòng)畫(huà)效果來(lái)顯示最新的一月并且褪去老的一個(gè)月，采用的方式是CSS2d轉(zhuǎn)化加過(guò)渡。我們需要處理的就是在舊的一個(gè)月褪去看不見(jiàn)的時(shí)候及時(shí)從DOM樹(shù)中刪除，不然如果用戶(hù)一直點(diǎn)下一個(gè)月或者上一個(gè)月的話(huà)，內(nèi)存會(huì)炸的。為了實(shí)現(xiàn)這個(gè)移除功能，一個(gè)辦法是采用setTimeout事件在特定的時(shí)間去刪除節(jié)點(diǎn)，經(jīng)過(guò)嘗試，發(fā)現(xiàn)由于Javascript定時(shí)器不準(zhǔn)確的特性和前后一個(gè)月切換帶來(lái)的邏輯復(fù)雜度增加,這種方案很不可行。
于是，本插件采用了第二個(gè)方案：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.

也就是只要你不去隨便亂動(dòng)元素的CSS屬性，在動(dòng)畫(huà)完成的時(shí)候，你就可以執(zhí)行相應(yīng)的操作（刪除節(jié)點(diǎn)）。
再來(lái)看看兼容性：

對(duì)于移動(dòng)Web開(kāi)發(fā)足矣！

最后就是在綁定事件的兼容性問(wèn)題，不同廠(chǎng)商對(duì)于這個(gè)事件的定義并不一致，比如IOS里面監(jiān)聽(tīng)的是transitionend事件，但是在安卓里面監(jiān)聽(tīng)transitionend事件完全沒(méi)反應(yīng)，經(jīng)過(guò)一番Google，發(fā)現(xiàn)安卓需要監(jiān)聽(tīng)webkitTransitionEnd事件。為了解決綁定事件時(shí)候的兼容性問(wèn)題，就需要檢測(cè)瀏覽器到底支持哪種事件。下面貼上Stackoverflow上面一個(gè)問(wèn)答的代碼片段：

 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');
實(shí)例化組件，綁定插件日期選擇完成之后的回調(diào)函數(shù)

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();
 };

插件外置兩個(gè)API： open和close,其中特別注意上面demo中_date在獲取焦點(diǎn)之后里面強(qiáng)制去除了焦點(diǎn)，是為了避免安卓下面為input標(biāo)簽設(shè)置readonly屬性并不能禁止原生鍵盤(pán)彈出的問(wèn)題。

最新評(píng)論