Plug-in de date léger et mobile basé sur zepto--date_picker_jquery

Avant-propos

Les étudiants qui ont fait du développement Web mobile savent tous que la sélection de dates sur les terminaux mobiles est une exigence très courante. Côté PC, nous avons beaucoup de choix, les plus connus sont Mobiscroll et jQuery UI Datepicker. Personnellement, il y a deux problèmes évidents avec ces plug-ins. Le premier est une dépendance excessive. Pour le plug-in jQuery, il a été contraint de s'appuyer sur un géant de plus de 80 000 $, ce qui a exclu de nombreux projets mobiles. Avec des fonctions puissantes, de nombreux plug-ins passent 80 % de leur temps à améliorer les 20 % de fonctions supplémentaires intéressantes du plug-in, ce qui entraîne des volumes de code plus importants et des configurations compliquées. Par conséquent, un plug-in de sélection de date mobile avec peu de dépendances, léger et simple à utiliser est très nécessaire. Cet article présente brièvement un plug-in de date léger mobile récemment écrit basé sur zepto - date_picker.

Principes de conception des plug-ins

Conservez uniquement les fonctionnalités les plus nécessaires

Le plug-in de sélection de date vous permet uniquement de sélectionner l'année, le mois et le jour, et fournit les effets d'animation de changement d'année et de mois nécessaires. Quant à la durée minimale, à la durée maximale et à la personnalisation du thème, ce n'est pas dans les limites. la portée de cette fonction de plug-in.

Conserver les dépendances nécessaires

Bien que ce plug-in soit basé sur zepto, il s'appuie en fait implicitement sur fastclick, une bibliothèque relativement géniale sur Github. Nous savons qu'il existe deux problèmes courants dans le traitement des événements de clic mobile : (1) L'événement de clic mobile dure 300 ms et les événements tactiles sont généralement utilisés à la place des événements de clic pour améliorer la sensibilité. (2) Les événements tactiles auront généralement des problèmes de pénétration ; les plug-ins n'utilisent pas d'événements tactiles ; sur la base de ces deux problèmes, fastclick est compatible. Il vous suffit d'appeler l'API qu'il fournit pour appeler l'événement click comme à l'origine, cette dépendance ne peut donc pas être omise. Quant à s'appuyer sur zepto, c'est en fait superflu. Premièrement, les blogueurs écrivent généralement des js natifs pour leur travail, donc cela ne semble pas grand-chose sans plug-ins. Deuxièmement, le public des plug-ins sera plus restreint. Cependant, comme zepto est déjà aussi à l’aise côté mobile que zepto l’est côté PC, il a été adopté sans hésitation.

Capable de prendre en charge à la fois la modularisation et les fichiers de référence locaux

Les plug-ins plus anciens vous permettent essentiellement de télécharger un fichier puis d'utiliser un script pour le référencer. Il n'y a rien de mal à cela, mais si npm, le plus grand gestionnaire de paquets, n'est pas utilisé, ne serait-ce pas dommage. le titre de Page Boy ? Par conséquent, ce plug-in prend en charge la référence de fichier et la référence de module en mode CMD.

Présentation des fonctions

Téléchargez directement la photo :

Détails techniques

transitionFin de l'événement

Le panneau principal du plug-in contient les détails du nombre de jours du mois en cours. Si vous cliquez sur le mois précédent ou sur le mois suivant, le plug-in doit calculer le nombre de jours du mois précédent. mois ou le mois suivant, puis insérez-le dans le nœud DOM. Après l'insertion dans le nœud DOM, vous devez utiliser des effets d'animation pour afficher le dernier mois et estomper l'ancien mois. La méthode utilisée est la conversion et la transition CSS2d. Ce que nous devons faire, c'est supprimer l'ancien mois de l'arborescence DOM au moment où il disparaît. Sinon, si l'utilisateur continue de cliquer sur le mois suivant ou le mois précédent, la mémoire explosera. Afin de réaliser cette fonction de suppression, une solution consiste à utiliser l'événement setTimeout pour supprimer le nœud à un moment précis. Après l'avoir essayé, il a été constaté qu'en raison des caractéristiques inexactes du minuteur Javascript et de la complexité logique accrue causée par la commutation. un mois avant et après, cette solution est très difficile à réaliser.
Ce plug-in adopte donc la deuxième solution : l’événement transitionEnd. Citez directement l’introduction de 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.

C'est-à-dire que tant que vous ne jouez pas avec les propriétés CSS de l'élément, vous pouvez effectuer l'opération correspondante (supprimer le nœud) lorsque l'animation est terminée.
Jetons un coup d'œil à la compatibilité :

Assez pour le développement web mobile !

La dernière chose est le problème de compatibilité des événements de liaison. Différents fabricants ont des définitions différentes de cet événement. Par exemple, l'événement transitionend est surveillé dans IOS, mais il n'y a aucune réponse dans l'événement transitionend dans Android. Google, j'ai découvert qu'Android devait écouter l'événement webkitTransitionEnd. Afin de résoudre le problème de compatibilité lors de la liaison d'événements, il est nécessaire de détecter les événements pris en charge par le navigateur. Collez l'extrait de code d'une séance de questions-réponses sur Stackoverflow ci-dessous :

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

Installer et utiliser

Installation

Prend en charge les deux méthodes suivantes

1. Après git clone, copiez et référencez directement datepicker.min.css et datepicker.min.js sous le dossier bin
2. Télécharger et installer depuis npm : npm install --save date_picker
   

Utiliser

Style de référence datepicker.min.css
Référence datepicker.min.js ou module de référence var DatePicker = require('date_picker');
Instanciez le composant et liez la fonction de rappel une fois la sélection de la date du plug-in terminée

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

Le plug-in dispose de deux API externes : open et close. Portez une attention particulière au fait que dans la démo ci-dessus, _date supprime de force le focus après avoir obtenu le focus. Ceci permet d'éviter de définir l'attribut readonly pour la balise d'entrée. sous Android et empêchant le clavier natif d'apparaître.