title: Understanding how JS Module Pattern works
body: <p>I'm trying to understand js module patterns in use with jQuery. I've edited this a couple of times and will try to end up with a good practice for my skill level (a couple of months fresh on jquery).</p>
  
  <p>There's no direct question in this post. I'm more aiming for feedback and inputs on how to properly use the module pattern (together with jquery) in a large scale website. </p>
  
  <p><strong>Update</strong>: I've added a bunch of examples in order to get an overview of all ways of writing things, and try to cover any pitfalls.. </p>
  
  <pre><code>/* 
  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 &amp;&amp; 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();
  });  
  </code></pre>
  
  <h3>Trying to understand what's happening (Feel free to provide corrections or better explanations):</h3>  
  
  <pre><code>Company.AppName = (function ($) { ...
  </code></pre>
  
  <p>Here the namespace Company.AppName is created. I set ($) inside so I can use the $ without it conflicting with any other libraries that might use $. </p>
  
  <pre><code>})(jQuery); 
  </code></pre>
  
  <p>As far as I know, the methods and variables are returned to the namespace here ...})(); and by adding jQuery inside () it'll tell it that the $ means jQuery. </p>
  
  <h3>Initializing </h3>
  
  <p>I'm not sure what's best practice here, but I'll add what I know so far.</p>
  
  <p>Initializing within js file:</p>
  
  <pre><code>jQuery(function() { 
      AppLaunch.Admin.init();
  });
  </code></pre>
  
  <p>Initializing from a file:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // Shorthand for jQuery(document).ready(function() { ... }
  
  jQuery(function($) { 
      AppLaunch.Admin.init($('#someSelector'));     
  });
  &lt;/script&gt;
  </code></pre>