Comprendre comment fonctionne modèle JS Module

Question

Je suis en train de comprendre les modèles de modules js utilisés avec jQuery. J'ai édité ce plusieurs fois et je vais essayer de finir avec une bonne pratique pour mon niveau de compétence (un couple de mois frais sur jquery).

Il n'y a pas question directe à ce poste. Je suis plus en vue des commentaires et des contributions sur la façon d'utiliser correctement le motif de module (avec jquery) dans un grand site Web à grande échelle.

Mise à jour : J'ai ajouté un tas d'exemples afin d'obtenir un aperçu de toutes les façons d'écrire les choses et essayer de couvrir tous les pièges ..

/* 
Not all browsers works with console.log, so we want to make sure that
console.log is defined. This defines the consol.log and send the messages
into an alert.
*/
if(!window.console) console = {
  log: function(s) { 
    alert(s); // alert since we dont have the firebug console
  }
};

// Check if namespace is defined
if (typeof (CompanyName) === 'undefined') {
    CompanyName = {};
}

// Or if AppName under CompanyName...

if (typeof (CompanyName.AppName) === 'undefined') {
    CompanyName.AppName = {};
}

// Our namespace
CompanyName.AppName = (function ($) {

    // CHAINING
    var _first = function () {
        // Important to always start with "var"
    },

    _second = function () {
        // Chained (  ...},  ) so it doesnt need "var"
    },

    _third = "Just a var", // Variables just ends with ,

    _four = "Another var"; // Closing the chain with ;

    var _anotherFirst = function () {
        // Previous chain of var's was ended with ; so this var needed "var" in order to start.
    };

    g_globalVar = "I'm free!"; // When starting a var without "var", it becomes global.

    g_globalMethod = function () { 
        alert("I'm free too!"); // Global method.
    };

    g_chainedGlobalVarOne = "We are free!",
    g_chainedGlobalVarTwo = "We are free!";

    // Private Variables
    var _privateVar = "privateVar: accessed from within AppLaunch.Admin namespace";

    // Private Methods
    var _privateMethod = function () {
       log("privateMethod: accessed only from within AppLaunch.Admin");
    }; // Last variable in a chain must always end with ; before the return {}

    function log() {
        if (window.console && window.console.log)
            window.console.log('[AppName] ' + Array.prototype.join.call(arguments, ' '));
    };

    return {
        init: function () {

            // Calling private
            _privateMethod();

            // Calling Public
            this.myPublicMethod();

            // Also Calling Public
            CompanyName.AppName.myPublicMethod();

            // Calling Other namespace's Public Method (when exists)
            CompanyName.OtherNamespace.externalPublicMethod(); 
        },

        // Public
        myPublicMethod: function() {
            log("myPublicMethod");
        },
        // In a View (MVC), I could have a page called myPage where I want to init
        // some particular functions. myPage can be called just like init. 
        myPage: function() { 
            _second();
            _third();
        }

    }
})(jQuery); 

// Initialize
jQuery().ready(function() {
    CompanyName.AppName.init()
    CompanyName.AppName.myPublicMethod();
});  

Essayer de comprendre ce qui se passe (Ne hésitez pas à fournir des corrections ou de meilleures explications):

Company.AppName = (function ($) { ...

Ici, l'espace de noms Company.AppName est créé. Je set ($) à l'intérieur pour que je puisse utiliser le $ sans qu'il en conflit avec d'autres bibliothèques qui pourraient utiliser $.

})(jQuery); 

Pour autant que je sache, les méthodes et les variables sont retournées à l'espace de noms ici ...}) (); et en ajoutant à l'intérieur jQuery () il va lui dire que les moyens $ jQuery.

Initializing

Je ne sais pas ce qui est la meilleure pratique ici, mais je vais ajouter ce que je sais à ce jour.

Initialiser dans les fichier js:

jQuery(function() { 
    AppLaunch.Admin.init();
});

Initialisation à partir d'un fichier:

<script type="text/javascript">
// Shorthand for jQuery(document).ready(function() { ... }

jQuery(function($) { 
    AppLaunch.Admin.init($('#someSelector'));     
});
</script>

Answer 1

Il y a beaucoup d'endroits qui vous donnera une explication approfondie du motif du module; L'utilisation de jQuery de c'est assez standard.

Ceci est juste un des nombreux modules explications motif là-bas .