Concepts : Le modèle de conception du module JavaScript

Dans cette rubrique, vous apprendrez comment utiliser le modèle de conception de module JavaScript pour réduire le risque que votre code soit en conflit avec d'autres scripts de votre page Web.

Utilisation de variables JavaScript

Avant la sortie d'ES2015 (ES6), les variables JavaScript étaient déclarées à l'aide du var mot clé. Mais, avec l'introduction d'ES6, let const ils ont été ajoutés en tant que nouvelle façon de déclarer des variables. Cette situation soulève souvent des questions quant au choix du mot-clé à utiliser et au moment de le faire.

Voici une brève explication des différentes manières de déclarer une variable en JavaScript.

Utilisation de var

L'utilisation var est la plus ancienne méthode de déclaration de variables en JavaScript. Lorsqu'elle est définie dans une fonction, n'importe laquelle var est limitée à cette fonction, mais a var est global lorsqu'elle est définie en dehors d'une fonction.

// Global Declaration
var variable = value;

const varExampleFunction = () => {
    // Local Declaration
    var variable = value;
}

Notez qu'il n' var est pas limité à un bloc. Ainsi, lorsque vous déclarez une variable au sein d'un bloc de code, en utilisant des accolades { }, sa portée s'étend à l'extérieur du bloc.

Utilisation de let

La let déclaration a été introduite avec ES6. Ce type de déclaration est limité aux blocs, ce qui signifie que les variables déclarées avec ne sont let accessibles que dans le bloc ou la fonction dans lequel elles sont définies.

const letExampleFunction = () => {
    let variable = value;
}

Utilisation de const

Comme let, const a également été introduit avec ES6. C'est pourquoi les deux déclarations sont très similaires. La principale différence réside dans le const fait que les données en mémoire contiennent des valeurs constantes et que les variables de const référence ne peuvent pas être réaffectées à un autre objet en mémoire.

 const constExampleFunction = () => {
    const variable = value;
}

Veuillez noter qu'il const s'agit également d'un champ d'application par blocs. Elle est limitée au bloc défini par les accolades, qui peut être une fonction ou un bloc. La principale distinction est qu'ils ne peuvent pas être mis à jour ou redéclarés, ce qui implique que la valeur reste constante dans le champ d'application.

Conflits d'étendue

En JavaScript, lorsque vous définissez une variable à l'aide de la var , let ou const élément, il est délimité dans la fonction qu'il est défini. Les variables globales sont vulnérables aux collisions avec d'autres scripts sur votre page.

Regardons un exemple de code. Dans le code suivant, la fonction et les variables existent dans la portée de la page.

// script 1
const incrementCount = () => {
    count++;
}

const myButton = document.getElementById('buttonId');
let count = 0;

myButton.onclick = incrementCount;

Maintenant, disons qu'il existe une fonction en dehors de votre script qui modifie également la count variable globale. Cette collision de scripts peut provoquer des résultats inattendus.

// script 2
const countVideos = videoList => {
    count = videoList.length;
}

Résultats :

L'utilisateur sélectionne le myButton bouton deux fois, en incrémentant la count variable dans script 1.
- count = 2
La countvideos fonction est appelée qui existe dans Script 2, mais aussi sur votre page Web. Disons que le videoList contient 10 éléments. Maintenant, la variable count globale a une valeur de 10.
- count = 10
La prochaine fois que l'utilisateur sélectionne le myButton bouton, la count variable renvoie des résultats inattendus.
- Prévisible : count = 3
- Réel : count = 11

Vous pouvez essayer d'éviter les conflits dans vos scripts, mais il n'y a aucune garantie que les scripts tiers inclus dans votre page n'utiliseront pas des noms de fonction et de variables similaires.

Fonctions anonymes

Une solution consiste à envelopper votre code dans une fonction anonyme (également appelée fermeture), qui est exécutée immédiatement. Votre code dans une fermeture n'est pas accessible par d'autres scripts. Donc, cela vous donne un moyen de créer des fonctions et des variables privées.

Voici la syntaxe d'une fonction anonyme :

Ligne 3 : inclut un ensemble supplémentaire de parenthèses, qui indique à JavaScript d'exécuter la fonction immédiatement après qu'elle a été analysée, au lieu d'attendre qu'un autre code appelle la fonction.

( () => {
    // your code
}());

Autre exemple de syntaxe :

var res = function( [arguments] ) { ... }

Les fermetures peuvent être puissantes, car elles assurent la confidentialité et l'état tout au long de la durée de vie de l'application. Pour le code à l'intérieur de la fermeture, toutes les variables et fonctions sont dans la portée de fermeture uniquement. Mais, votre code à l'intérieur de la fermeture peut toujours accéder à toutes les variables ou fonctions globales.

Globals

Bien que JavaScript ait une fonctionnalité connue sous le nom de globaux implicites, il peut rendre votre code difficile à gérer, car il n'est pas facile de déterminer quelles variables sont globales. Pour déterminer si une variable est globale, l'interpréteur doit revenir à travers la chaîne de portée à la recherche d'une var instruction qui correspond au nom. Si aucun n'est trouvé, la variable est supposée être globale.

Passer dans les globaux

Avec la fonction anonyme, vous pouvez explicitement passer des paramètres globaux. C'est ce qu'on appelle l'importation de paramètres dans votre code.

Voici un exemple :

Ligne 1 : définit le nom des paramètres passés dans la fonction. Notez qu'ils n'ont pas à correspondre aux noms de la ligne 3. Ici, l' window objet est passé dans un paramètre nommé window1.
Ligne 3 : passe l' window objet dans la fonction.

( ( window1, undefined ) => {
    ...
})(window);

Puisqu'il n'y a qu'un seul objet transmis, mais qu'il existe deux paramètres, la valeur de ne undefined sera pas définie.

typeof undefined == "undefined"

Cela peut être pratique si vous voulez un moyen facile de vérifier si d'autres variables sont définies.

if(variable1 === undefined)

Exporter des globaux

Vous pouvez également passer des variables et des fonctions en dehors de votre fonction anonyme. Vous pouvez le faire en utilisant la return valeur.

Voici un exemple :

Ligne 1 : assigne notre fonction anonyme à BCLS. Cette valeur peut être tout ce que vous choisissez. Dans cet exemple, nous utilisons BCLS (Brightcove Learning Services).

const BCLS = ( ( window1, undefined ) => {
    var object1 = {};
    object1.count = 1;
    object1.method = function () {
        ...
    }
    return object1;
})(window);

L' object1 objet est maintenant disponible globalement avec deux propriétés publiques, une variable nommée count et une fonction nommée method. Ils sont accessibles en dehors de notre fonction anonyme comme :

BCLS.object1.count
BCLS.object1.method

Exemples complets

Voici quelques exemples complets du modèle de conception du module JavaScript.

Exemple 1

Cet exemple montre comment créer des variables et des fonctions privées et publiques à l'aide du modèle de module.

Variables privées : myvar, myvar2
Fonctions privées : fname, fname2
Variable publique : myvar3
Fonction publique : fname3

const BCLS = ( () => {
   var myvar = value,
       myvar2 = value;

   fname = () =>  {
        ...
   };
   fname2 = () =>  {
        ...
   };

   return {
        fname3 : () =>  {
             ...
        },
        myvar3 = value;
   };
}());

Exemple 2

Cet exemple transmet des objets globaux et expose une fonction publique.

const BCLS = ( ( window, document, videojs ) => {
  var myvar = value;

  // use a global object passed into the anonymous function
  videojs.registerPlugin('overlay');

  fname = () => {
      ...
  }
  return {
    fname2 : () => {
          ...
      }
  }
})(window, document, videojs);

// call the public function fname2
var newvar = BCLS.fname2();

Exemples de code

Certains de nos exemples de code utilisent le modèle de conception de module JavaScript, et vous pouvez les examiner pour trouver des idées sur la façon d'implémenter ce modèle.

Lecteur flottant