JavaScript Modules de module et de module révélateur


Exemple

Modèle de module

Le modèle de module est un modèle de conception créative et structurelle qui permet d'encapsuler des membres privés tout en produisant une API publique. Ceci est accompli en créant un IIFE qui nous permet de définir des variables uniquement disponibles dans sa portée (via la fermeture ) tout en retournant un objet qui contient l’API publique.

Cela nous donne une solution propre pour cacher la logique principale et exposer uniquement une interface que nous souhaitons que d’autres parties de notre application utilisent.

var Module = (function(/* pass initialization data if necessary */) {
  // Private data is stored within the closure
  var privateData = 1;

  // Because the function is immediately invoked,
  // the return value becomes the public API
  var api = {
    getPrivateData: function() {
      return privateData;
    },
    
    getDoublePrivateData: function() {
      return api.getPrivateData() * 2;
    }
  };
  return api;
})(/* pass initialization data if necessary */);

Modèle de module révélateur

Le modèle de module révélateur est une variante du modèle de module. Les principales différences sont que tous les membres (privés et publics) sont définis dans la fermeture, la valeur de retour est un littéral d'objet ne contenant aucune définition de fonction et toutes les références aux données membres sont effectuées via des références directes plutôt que par l'objet renvoyé.

var Module = (function(/* pass initialization data if necessary */) {
  // Private data is stored just like before
  var privateData = 1;

  // All functions must be declared outside of the returned object
  var getPrivateData = function() {
    return privateData;
  };

  var getDoublePrivateData = function() {
    // Refer directly to enclosed members rather than through the returned object
    return getPrivateData() * 2;
  };

  // Return an object literal with no function definitions
  return {
    getPrivateData: getPrivateData,
    getDoublePrivateData: getDoublePrivateData
  };
})(/* pass initialization data if necessary */);

Motif de prototype révélateur

Cette variation du motif révélateur est utilisée pour séparer le constructeur des méthodes. Ce modèle nous permet d'utiliser le langage javascript comme un langage orienté objet:

//Namespace setting
var NavigationNs = NavigationNs || {};

// This is used as a class constructor 
NavigationNs.active = function(current, length) {        
    this.current = current;
    this.length = length;
}

// The prototype is used to separate the construct and the methods    
NavigationNs.active.prototype = function() {
    // It is a example of a public method because is revealed in the return statement
    var setCurrent = function() {
        //Here the variables current and length are used as private class properties  
        for (var i = 0; i < this.length; i++) {                
                $(this.current).addClass('active');                 
        }
    }
    return { setCurrent: setCurrent };
}();

// Example of parameterless constructor  
NavigationNs.pagination = function() {}

NavigationNs.pagination.prototype = function() {
// It is a example of a private method because is not revealed in the return statement
    var reload = function(data) {
        // do something
    },
    // It the only public method, because it the only function referenced in the return statement
     getPage = function(link) {
        var a = $(link);

        var options = {url: a.attr('href'), type: 'get'}
        $.ajax(options).done(function(data) {            
           // after the the ajax call is done, it calls private method
           reload(data);
        });

        return false;
    }
    return {getPage : getPage}
}();

Ce code ci-dessus doit être dans un fichier séparé .js à référencer dans n'importe quelle page nécessaire. Il peut être utilisé comme ceci:

var menuActive = new NavigationNs.active('ul.sidebar-menu li', 5);
menuActive.setCurrent();