javascript - Comprender cómo funciona el patrón de módulo JS

javascript input text

Question

Estoy tratando de comprender los patrones del módulo js en uso con jQuery. He editado esto un par de veces y trataré de terminar con una buena práctica para mi nivel de habilidad (un par de meses frescos en jquery).

No hay una pregunta directa en esta publicación. Me interesa más la retroalimentación y las aportaciones sobre cómo usar correctamente el patrón del módulo (junto con jquery) en un sitio web a gran escala.

Actualización : He agregado un montón de ejemplos para obtener una visión general de todas las formas de escribir cosas, y tratar de cubrir cualquier problema.

/* 
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();
});  

Tratando de entender lo que está sucediendo (Siéntase libre de proporcionar correcciones o mejores explicaciones):

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

Aquí se crea el espacio de nombres Company.AppName. Configuré ($) adentro para poder usar $ sin conflicto con otras bibliotecas que podrían usar $.

})(jQuery); 

Por lo que yo sé, los métodos y las variables se devuelven al espacio de nombres aquí ...}) (); y al agregar jQuery dentro (), le dirá que $ significa jQuery.

Inicializando

No estoy seguro de cuál es la mejor práctica aquí, pero agregaré lo que sé hasta ahora.

Inicializando dentro del archivo js:

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

Inicializando desde un archivo:

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

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

Answer 1

Hay muchos lugares que le darán una explicación en profundidad del patrón del módulo; El uso de jQuery es bastante estándar.

Esta es solo una de las muchas explicaciones de patrones de módulos que existen .