Fermer

mars 15, 2019

Comment remplacer jQuery avec Vue –

ES6 en action: let et const


Vous voulez apprendre Vue.js à partir de la base? Obtenez une collection complète de livres Vue couvrant les bases, les projets, les astuces, les outils et plus avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 $ par mois ou essayez notre essai gratuit de 7 jours .

Je suis prêt à parier qu'il y a beaucoup de développeurs qui cherchent encore jQuery chargée de créer des applications simples. Il arrive souvent que nous ayons besoin d'ajouter de l'interactivité à une page, mais atteindre un framework JavaScript semble excessif – avec tous les kilo-octets supplémentaires, le passe-partout, les outils de construction et les empaqueteurs de modules. Inclure jQuery à partir d'un CDN semble être une évidence.

Dans cet article, j'aimerais tenter de vous convaincre que l'utilisation de Vue.js (appelée Vue à partir de maintenant) , même pour des projets relativement basiques, ne doit pas être un casse-tête et vous aidera à écrire un meilleur code plus rapidement. Prenons un exemple simple, codons-le dans jQuery, puis nous le recréerons dans Vue, étape par étape.

Ce que nous construisons

Pour cet article, nous allons créer une facture en ligne de base. , en utilisant ce modèle open-source de Sparksuite . J'espère que cela devrait apporter un changement rafraîchissant par rapport à une autre liste de tâches à effectuer et fournir une complexité suffisante pour démontrer les avantages d'utiliser quelque chose comme Vue tout en restant simple à suivre.

 Capture d'écran du modèle

rendez cette interactive interactive en fournissant des entrées d'article, de prix unitaire et de quantité, et en faisant recalculer automatiquement la colonne Price lorsque l'une des valeurs change. Nous allons également ajouter un bouton pour insérer de nouvelles lignes vides dans la facture, ainsi qu'un champ Total qui sera automatiquement mis à jour lorsque nous modifierons les données.

J'ai modifié le modèle afin que le code HTML pour une seule ligne (vide) ressemble maintenant à ceci:


  
   $ 
  
   0,00 $ 

jQuery

Commençons par examiner comment nous pourrions procéder avec jQuery.

 $ ('table'). sur ('mouseup keyup', 'input [type=number]', CalculateTotals);

Nous attachons un auditeur à la table elle-même, qui exécutera la fonction CalculateTotals lorsque les valeurs du coût unitaire ou sont modifiées: [[19659013] function CalculateTotals () {
  const subtotals = $ ('. item'). map ((idx, val) => calcule un sous-total (val)). get ();
  const total = subtotals.reduce ((a, v) => a + Nombre (v), 0);
  $ ('. total td: eq (1)'). text (formatAsCurrency (total));
}

Cette fonction recherche toutes les lignes d'éléments du tableau et les parcourt, en passant chaque ligne à une fonction CalculateSototal puis en faisant la somme des résultats. Ce total est ensuite inséré à l'emplacement approprié sur la facture.

 function CalculateSotalot (row) {
  const $ row = $ (row);
  const input = $ row.find ('input');
  const subtotal = entrées [1] .value * entrées [2] .value;

  $ row.find ('td: last'). text (formatAsCurrency (sous-total));

  retourner le sous-total;
}

Dans le code ci-dessus, nous saisissons une référence à tous les de la ligne et multiplions le deuxième et le troisième ensemble pour obtenir le sous-total. Cette valeur est ensuite insérée dans la dernière cellule de la ligne.

 function formatAsCurrency (amount) {
  return `$$ {Number (amount) .toFixed (2)}`;
}

Nous disposons également d'une petite fonction d'aide que nous utilisons pour nous assurer que les sous-totaux et le total sont formatés avec deux décimales et précédés du symbole monétaire.

 $ ('. Btn-add-row' ) .on ('clic', () => {
  const $ lastRow = $ ('. item: last');
  const $ newRow = $ lastRow.clone ();

  $ newRow.find ('input'). val ('');
  $ newRow.find ('td: last'). text ('0,00 $');
  $ newRow.insertAfter ($ lastRow);

  $ newRow.find ('input: first'). focus ();
});

Enfin, nous avons un gestionnaire de clics pour notre bouton Add row . Ce que nous faisons ici consiste à sélectionner la dernière ligne d’élément et à créer un duplicata. Les entrées de la ligne clonée sont définies sur les valeurs par défaut et sont insérées en tant que nouvelle ligne. Nous pouvons également être sympathiques avec nos utilisateurs et mettre l'accent sur la première entrée, prêt à commencer à taper.

Voici la démo de jQuery terminée:

Voir le stylo jQuery Invoice de SitePoint ( @SitePoint ) sur CodePen .

Inconvénients

Qu'est-ce qui ne va pas avec ce code dans sa version actuelle, ou plutôt ce qui pourrait être mieux?

Vous avez peut-être entendu Certaines de ces nouvelles bibliothèques, comme Vue et React, prétendent être déclaratives plutôt qu'impératives. En regardant ce code jQuery, la majorité se lit comme une liste d’instructions sur la façon de manipuler le DOM. Il est souvent difficile de définir l’objet de chaque section de code – le «quoi» – à travers les détails de «comment» cela se fait. Bien sûr, nous pouvons clarifier l’intention du code en le divisant en fonctions bien nommées, mais ce code demandera toujours un effort d’analyse mentale si vous y revenez après un moment.

Le code comme celui-ci est que nous gardons notre état d'application dans le DOM lui-même. Les informations sur les articles commandés n'existent que dans le cadre du code HTML constituant l'interface utilisateur. Cela ne semble pas être un gros problème lorsque nous affichons uniquement les informations dans un seul emplacement, mais dès que nous commençons à avoir besoin d'afficher les mêmes données à plusieurs endroits dans notre application, il devient de plus en plus complexe de s'assurer que chaque élément est maintenu en synchronisation. Il n'y a pas de source unique de vérité.

Bien que rien dans jQuery ne nous empêche de garder notre état en dehors du DOM et d'éviter ces problèmes, des bibliothèques telles que Vue fournissent des fonctionnalités et une structure qui facilitent la création d'une bonne architecture et l'écriture d'un code plus modulaire, plus propre.

Conversion en Vue

Alors, comment pourrions-nous recréer cette fonctionnalité à l'aide de Vue?

Comme je l'ai mentionné plus tôt, Vue ne nous oblige pas à utiliser un bundler de modules, un transpiler ou à y adhérer. leurs composants de fichier unique (fichiers .vue ) afin de commencer. Comme jQuery, nous pouvons simplement inclure la bibliothèque à partir d’un CDN. Commençons par échanger la balise script:

 %MINIFYHTML21ad1a10a646ad36ff53dc8b04fea9d613%

La prochaine chose à faire est de créer une nouvelle instance de Vue:

 const app = new Vue ({
  el: 'table'
});

La seule option que nous devons fournir ici est el qui est un sélecteur (comme nous l'utilisons avec jQuery) identifiant la partie du document que nous voulons que Vue gère.

Nous pouvons mettre Vue en charge de tout ce qui se trouve sur la page entière (pour une application à une seule page, par exemple) ou sur un seul

. Pour notre exemple de facture, nous allons donner le contrôle Vue au tableau HTML.

Data

Ajoutons également les données des trois lignes d’exemple à notre instance Vue:

 const app = new Vue ({
  el: 'table',
  Les données: {
    articles: [
      { description: 'Website design', quantity: 1, price: 300 },
      { description: 'Hosting (3 months)', quantity: 1, price: 75 },
      { description: 'Domain name (1 year)', quantity: 1, price: 10 },
    ]
  }
});

La propriété data est l'emplacement dans lequel nous stockons l'état de notre application. Cela inclut non seulement les données avec lesquelles nous voulons que notre application fonctionne, mais également des informations sur l'état de l'interface utilisateur (par exemple, la section actuellement active dans un groupe d'onglets, ou si un accordéon est développé ou réduit).

Vue nous encourage à séparer l'état de notre application de sa présentation (c'est-à-dire le DOM) et à le centraliser à un seul endroit – une source unique de vérité.

Modification du modèle

Modifions maintenant notre modèle pour afficher les éléments de notre objet de données. Comme nous l'avons dit à Vue pour contrôler la table, nous pouvons utiliser sa syntaxe de modèle dans le code HTML pour indiquer à Vue comment la restituer et la manipuler.

En utilisant l'attribut v-for nous peut restituer un bloc de code HTML pour chaque élément de notre tableau :

  


Vue répétera ce balisage pour chaque élément du tableau (ou de l'objet) que vous transmettez à la construction v-for vous permettant ainsi de référencer chaque élément de la boucle – dans ce cas, comme élément . Comme Vue observe toutes les propriétés de l'objet data il restitue dynamiquement le balisage au fur et à mesure que le contenu des éléments change. Tout ce que nous avons à faire est d'ajouter ou de supprimer des éléments dans l'état de notre application, et Vue se charge de mettre à jour l'interface utilisateur.

Nous devons également ajouter pour que l'utilisateur remplisse la description, prix unitaire, et quantité de l'article:


 $ 

 $ {{item.price * item.quantity}} 

Nous utilisons ici l’attribut v-model pour établir une liaison bidirectionnelle entre les entrées et les propriétés de notre modèle de données. Cela signifie que toute modification apportée aux entrées mettra à jour les propriétés correspondantes dans le modèle d'élément, et inversement.

Dans la dernière cellule, nous utilisons des doubles accolades {{} pour afficher du texte. . Nous pouvons utiliser n’importe quelle expression JavaScript valide entre accolades. Nous multiplions donc deux de nos propriétés d’élément et produisions le résultat. Encore une fois, alors que Vue observe notre modèle de données, une modification apportée à l'une de ces propriétés entraînera la réévaluation automatique de l'expression.

Evénements et méthodes

Nous avons maintenant configuré notre modèle pour afficher nos éléments . collection, mais comment pouvons-nous ajouter de nouvelles lignes? Comme Vue restituera tout ce qui se trouve dans les éléments il suffit de pousser un objet avec les valeurs par défaut souhaitées dans le tableau items .

Pour créer des fonctions accessible à partir de notre modèle, nous devons les transmettre à notre instance Vue en tant que propriétés d’un objet méthodes :

 const app = new Vue ({
  // ...
  méthodes: {
    myMethod () {}
  },
  // ...
})

Définissons une méthode addRow que nous pouvons appeler pour ajouter un nouvel élément à notre tableau :

 méthodes: {
  ajouter une rangée() {
    this.items.push ({description: '', quantité: 1, prix: 0});
  },
},

Notez que toutes les méthodes que nous créons sont automatiquement liées à l'instance Vue elle-même. Nous pouvons donc accéder aux propriétés de notre objet data et à d'autres méthodes, en tant que propriétés de de . [19659008] Donc, maintenant que nous avons notre méthode, comment l'appelons-nous lorsque le bouton Add row est cliqué? La syntaxe permettant d'ajouter des écouteurs d'événement à un élément du modèle est la suivante: . V-on: nom-événement :

 

Vue fournit également un raccourci pour nous permettre d’utiliser @ à la place de v-on: comme je l’ai montré dans le code ci-dessus. Pour le gestionnaire, nous pouvons spécifier n'importe quelle méthode à partir de notre instance Vue.

Propriétés calculées

Il ne reste plus qu'à afficher le total général au bas de la facture. Potentiellement, nous pourrions le faire dans le modèle lui-même: comme je l’ai mentionné plus tôt, Vue nous permet de mettre toute instruction JavaScript entre accolades. Cependant, il est bien préférable de garder quelque chose de plus qu'une logique très basique dans nos modèles. C’est plus propre et plus facile à tester si nous gardons cette logique séparée.

Nous pourrions utiliser une autre méthode pour cela, mais je pense qu’une propriété calculée convient mieux. Semblable à la création de méthodes, nous transmettons à notre instance Vue un objet calculé contenant les fonctions dont nous voulons utiliser les résultats dans notre modèle:

 const app = new Vue ({
  // ...
  calculé: {
    total() {
      return this.items.reduce ((acc, item) => acc + (item.price * item.quantity), 0);
    }
  }
});

Nous pouvons maintenant référencer cette propriété calculée dans notre modèle:


  
   Total: $ {{total}} 

Comme vous l'avez peut-être déjà remarqué, les propriétés calculées peuvent être traitées comme s'il s'agissait de données. nous n’avons pas à les appeler avec des parenthèses. Mais l'utilisation des propriétés calculées présente un autre avantage: Vue est suffisamment intelligent pour mettre en cache la valeur renvoyée et ne réévalue la fonction que si l'une des propriétés de données dépend des modifications.

Si nous utilisions une méthode pour résumer le grand total , le calcul serait effectué à chaque fois que le modèle serait rendu. Comme nous utilisons une propriété calculée, le total n'est recalculé que si l'un des champs de la quantité de l'élément ou du élément est modifié.

Filtres

Vous avez peut-être repéré nous avoir un petit bug dans notre implémentation. Bien que les coûts unitaires soient des nombres entiers, notre total et les sous-totaux sont affichés sans les centimes. Ce que nous souhaitons réellement, c’est que ces chiffres soient toujours affichés avec deux décimales.

Plutôt que de modifier à la fois le code qui calcule les sous-totaux et le code qui calcule le total général, Vue nous fournit un moyen agréable de traiter les problèmes courants. Les tâches de formatage telles que celle-ci: filtres.

Comme vous l’auriez peut-être déjà deviné, pour créer un filtre, nous passons un objet avec cette clé dans notre instance Vue:

 const app = new Vue ({
  // ...
  filtres: {
    monnaie (valeur) {
      valeur de retour.toFixée (2);
    }
  }
});

Nous avons créé ici un filtre très simple appelé devise qui appelle àFixed (2) sur la valeur qu’il reçoit et renvoie le résultat. Nous pouvons l'appliquer à n'importe quelle sortie dans notre modèle, comme ceci:

 Total: $ {{total | devise}} 

Voici la démo Vue achevée:

Voir le stylo Vue Invoice de SitePoint ( @SitePoint ) sur CodePen .

Résumé

. 19659005] En comparant côte à côte les deux versions du code, quelques éléments ressortent de l'application Vue:

  • La séparation claire entre l'interface utilisateur et la logique / les données qui la pilotent : le code est beaucoup plus simple. pour comprendre et se prêter à des tests plus faciles
  • L’UI est déclarative : vous n’avez besoin que de vous préoccuper de ce que vous voulez voir, pas de la façon de manipuler le DOM pour le réaliser.

La taille (en Ko) ) des deux bibliothèques est presque identique. Bien sûr, jQuery pourrait être un peu allégé avec une construction personnalisée, mais même avec un projet relativement simple tel que notre exemple de facture, je pense que la facilité de développement et la lisibilité du code justifient la différence.

Vue peut également le faire. beaucoup plus que ce que nous avons couvert ici. Sa force réside dans la possibilité de créer des composants d’UI modulaires et réutilisables pouvant être composés dans des applications frontales sophistiquées. Si vous souhaitez approfondir votre connaissance de Vue, je vous recommande de consulter Bien démarrer avec le framework Vue.js 2.0 .



Source link