Top 5 des design patterns que vous utilisez sans le savoir en Javascript

Même celles et ceux d’entre-vous qui sont les plus familiers avec Javascript ne savent peut-être pas qu’ils utilisent constamment des design patterns sans savoir qu’il s’agit de design patterns.

Voici le top 5 des design patterns simples que vous utilisez constamment… Peut-être sans le savoir.

Object Literal

Oui, l’usage d’objets littéraux est un design pattern ! Le fait de ne pas passer par une instanciation avec une méthode de construction et d’assigner un objet littéral directement à l’initialisation de sa variable est un pattern.

var o = {“foo”:”bar”};

Namespace

Le namespacing est un design pattern dont on peut se servir lorsqu’on code dans le global scope pour s’assurer de ne pas interférer avec d’autres méthodes ou objets qui pourraient s’y trouver. Ceci est surtout vrai pour le Javascript côté front-end (l’usage de “use strict” peut limiter les effets de bords), car nodejs possède un scope limité aux modules dans la majorité des cas (un module par script). Le namespacing trouve également une utilité dans la décomposition d’une application AngularJS complexe, par exemple si vous souhaitez un sous module dédié aux services ou au directives.

Ce qu’il ne faut pas faire dans le global scope :

function echo(foo){
  return “bar”;
}

car la fonction echo est un nom de fonction suffisamment commun pour qu’elle se retrouve à un autre endroit du global scope. Préférez mettre cette fonction dans un objet propre à votre application :

var app = app || {};
app.agilead = app.agilead || {};
app.agilead.design = app.agilead.design || {};
app.agilead.design.pattern = app.agilead.design.pattern || {};
app.agilead.design.pattern.echo = app.agilead.design.pattern.echo || function(foo){
  return foo;
}

Avec AngularJS :

angular.module(“foo.bar.services”);

Module

L’usage d’un module réduit le scope à celui-ci et permet d’accéder à l’ensemble des fonctions et variables à l’intérieur :

var mod = (function(){
  return {
    echo: function (foo){
      return foo;
    }
  }
})();

sous réserve que ce module est déclaré dans le global scope, il est accessible partout, à défaut il vous faut l’exporter, c’est notamment le cas pour nodejs :

module.exports = mod

Module Reveal

Le module reveal pattern permet de choisir ce que vous exposez de votre module, rendant certaines méthodes et variables “privées”.

var mod = (function(){
  function _echo (foo){
    return foo;
  }
  function _hello (){
    return “Hello World!”;
  }
  function _paf (){
    return “...le chien”;
  }
  function compose (){
    return _hello + _echo(“et PAF”) + _paf
  }
  return {
    compose: compose
  }
})();

La fonction compose sera la seule accessible à l’extérieur de ce module.

Decorator

J’ai hésité à le mettre dans le top 5, il était en concurrence avec le prototype, le singleton et l’observer… Mais en fait, on se rend vite compte que le decorator est tout de même plus simple et plus courant.

Le decorator est une fonction qui va altérer un objet (ou un tableau), le plus souvent par référence. Il va par exemple enrichir l’objet de certains events (il s’agit d’ailleurs de la manière la plus simple d’appliquer le pattern observer à un objet).

Un exemple très simple :

function addEchoDecorator (obj) {
  obj.echo = function echo(foo) {
    return foo;
  }
}

var o = {};
addEchoDecorator(o);
o.echo(“Done!”);

Pour ceux et celles qui connaissent lodash (comment ça vous ne connaissez pas lodash ?), beaucoup de ses fonctions de manipulation d’objets sont des décorateurs, extend par exemple.

Advertisements

4 thoughts on “Top 5 des design patterns que vous utilisez sans le savoir en Javascript

  1. “l’usage d’objets littéraux est un design pattern”.
    Étant donné que tout est objet dans JavaScript, hormis les primitives (quoique des fois), c’est un usage obligatoire dans tout code JS. 😉

    Like

      1. Pendant un moment, j’avais oublié que l’on pouvais créer des objets sans passer par un littéral (par exemple, Object.create). Ce sont les premiers effets après un mois de vacances loin de tout clavier et code. :p

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s