Les classes et module dans JavaScript

0
79

Nous avons déjà pas mal exploré javascript et il est temps de structuré notre code javascript ainsi que le rendre modulaire c’est-à-dire que nous allons créer une classe qui servira comme un plan qui définit un Object et celui-ci nous allons le rendre mobile en permettant l’utilisation de cette class dans d’autre fichier Javascript.

Création de class

Nous allons commencer par créer une class que nous allons nommer Product et qui va donc représenter un plan d’un produit.

Pour cela nous allons définir deux variables qui seront propre à notre Produit qui serra le nom et le prix unité.

class Product{
  constructor(name,price){
    this.name = name
    this.price = price
  }
}

Bien sûr pour le moment on ne peut rien faire de spéciale avec notre class mais si nous ajoutons une fonction qui nous permettra de calculer la TVA on peut utiliser une attribue de notre class Product.

function calculateVat(product,vat){
  return product.price *(vat/100);
}

Nous allons aussi créer une autre fonction qui nous permettra de calculer le prix TTC

function calculateTotalVat(product,vat){
  return product.price + calculateVat(product,vat);
}

Les modules dans JavaScript

Alors désormais que nous avons notre class et ces méthodes nous allons voir comment le rendre modulaire le but est de faire en sorte que nous puissions utiliser cette class et ces fonctions dans un autre fichier JavaScript.

export default class Product{
  constructor(name,price){
    this.name = name
    this.price = price
  }
}

Vous allez voire c’est plutôt simple est logique nous allons devoir commencer à dire à notre class que nous voulons l’exporter et cela on le fait en ajoutant export default devant le class Product

Cela nous permettra d’exporter notre class.

Dans un autre fichier JavaScript nous allons dire que nous voulons utiliser cette class exporter en indiquant que nous voulons l’importer comme suite.

import Product from '/Product.js'

const product = new Product('simple pc', 100);

document.getElementById('ShowProduct').innerHTML=`
  name: ${product.name} <br/>
  unit price: ${product.price} € <br/>
`

Ici nous pouvons désormais utiliser notre class Product en instanciant un objet avec le new et puis pour montrer que cela fonctionne nous allons l’afficher sur une page HTML comme suite.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Tuto De Rien</title>
</head>
<body>
  <div class="container">

    <div id="ShowProduct"></div>
  </div>
  
  <script src="code.js" type="module"></script>
</body>
</html>

Importer les fonctions

Afin d’importer les fonctions de la class Product nous allons d’abord devoir indiquer les méthodes que nous voulons exporter comme suite

export function calculateVat(product,vat){
  return product.price *(vat/100);
}

export function calculateTotalVat(product,vat){
  return product.price + calculateVat(product,vat);
}

Puis dans notre fichier ou nous voulons importer les méthodes on les ajoute comme suite et nous allons l’utiliser de faire les calcule dans le innerHTML

import Product, {calculateVat,calculateTotalVat} from '/Product.js'

const product = new Product('simple pc', 100);

document.getElementById('ShowProduct').innerHTML=`
  name: ${product.name} <br/>
  unit price: ${product.price} € <br/>
  vat: ${calculateVat(product,21)} € <br/>
  Total price : ${calculateTotalVat(product,21)} €
`

Conclusion

Wow nous avons bien avancer avec javascript et la raison pourquoi j’ai décidé d’octroyer plus de temps sur javascript est simplement que je trouve personnellement que l’avenir du développement web se trouve dans javascript qui permet de faire beaucoup de chose et savoir utiliser javascript sans l’utilisation des Framework est très important car nous avons le contrôle total

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.