title: What is this design pattern known as in JavaScript/jQuery?
body: <p>I was looking over the JavaScript source code for <a href="https://github.com/mleibman/SlickGrid" rel="noreferrer">SlickGrid</a>.</p>
  
  <p>I've noticed that slick.grid.js has the following structure:</p>
  
  <pre><code>(function($) {
      // Slick.Grid
      $.extend(true, window, {
          Slick: {
              Grid: SlickGrid
          }
      });
  
      var scrollbarDimensions; // shared across all grids on this page
  
      ////////////////////////////////////////////////////////////////////////////
      // SlickGrid class implementation (available as Slick.Grid)
  
      /**
       * @param {Node}           container   Container node to create the grid in.
       * @param {Array,Object}   data        An array of objects for databinding.
       * @param {Array}          columns     An array of column definitions.
       * @param {Object}         options     Grid options.
       **/
      function SlickGrid(container,data,columns,options) {
          /// &lt;summary&gt;
          /// Create and manage virtual grid in the specified $container,
          /// connecting it to the specified data source. Data is presented
          /// as a grid with the specified columns and data.length rows.
          /// Options alter behaviour of the grid.
          /// &lt;/summary&gt;
  
          // settings
          var defaults = {
              ...
          };
  
          ...
  
          // private
          var $container;
  
          ...
  
  
          ////////////////////////////////////////////////////////////////////////
          // Initialization
  
          function init() {
              /// &lt;summary&gt;
              /// Initialize 'this' (self) instance of a SlickGrid.
              /// This function is called by the constructor.
              /// &lt;/summary&gt;
  
              $container = $(container);
  
              ...
          }
  
          ////////////////////////////////////////////////////////////////////////
          // Private &amp; Public Functions, Getters/Setters, Interactivity, etc.
          function measureScrollbar() {
              ...
          }
  
          ////////////////////////////////////////////////////////////////////////
          // Public API
  
          $.extend(this, {
              "slickGridVersion": "2.0a1",
  
              // Events
              "onScroll":                     new Slick.Event(),
  
              ...
  
              // Methods
              "registerPlugin":               registerPlugin,
  
              ...
  
          });
  
          init();
      }
  }(jQuery));
  </code></pre>
  
  <p>Some code has been omitted for brevity and clarity, but this should give you the general idea.</p>
  
  <ol>
  <li><p>What is the purpose of the the following: <code>(function($) { // code }(jQuery));</code> Is this the module pattern that I've seen talked about? Is this meant to keep the global namespace clean?</p></li>
  <li><p>What do the <code>$.extend()</code> lines mean?: The top <code>$.extend(true, window, { // code });</code> looks like it has to do with a "namespace"; what's a namespace? It looks like the bottom <code>$.extend(this, { // code });</code> is used to exposed 'public' members and functions? How would you define a private function or variable?</p></li>
  <li><p>How would you initialize multiple "SlickGrids" if you wanted to? How much would they share and how would they interact? Note the "constructor" function: <code>function SlickGrid(...) { // code }</code>.</p></li>
  <li><p>What are some books, links, and other resources on coding in this style? Who invented it?</p></li>
  </ol>
  
  <p>Thanks! ♥</p>