title: jQuery code organization and performance
body: <p>After doing some research on the subject, I've been experimenting a lot with patterns to organize my jQuery code (Rebecca Murphy did a <a href="http://blog.rebeccamurphey.com/organize-your-jquery" rel="nofollow noreferrer">presentation</a> on this at the jQuery Conference for example).</p>
  
  <p>Yesterday I checked the (revealing) module pattern. The outcome looks a bit reminiscent of the <a href="http://en.wikipedia.org/wiki/Yahoo!_UI_Library" rel="nofollow noreferrer">YUI</a> syntax I think:</p>
  
  <pre><code>//global namespace MyNameSpace
  if(typeof MNS=="undefined"||!MNS){var MNS={};}
  
  //obfuscate module, just serving as a very simple example
  MNS.obfuscate = function(){
      //function to create an email address from obfuscated '@'
      var email = function(){
          $('span.email').each(function(){
              var emailAddress = $(this).html().replace(' [ @ ] ','@');
              $(this).html('&lt;a href="mailto:' + emailAddress + '"&gt;' + emailAddress + '&lt;/a&gt;');
  
          });
      };    
      return {
          email: email
      };    
  }();
  
  //using the module when the dom's ready
  jQuery(document).ready(function($){
      MNS.obfuscate.email();
  });
  </code></pre>
  
  <p>In the end I had several modules. Some naturally included "private members", which in this case means variables and/or functions which were only of importance for other functions within this module, and thus didn't end up in the return statement.</p>
  
  <p>I thought having connected parts of my code (everything which has to do with the search for example) combined in a module makes sense, gives the whole thing structure.</p>
  
  <p>But after writing this, I read an <a href="http://ejohn.org/blog/simple-class-instantiation/" rel="nofollow noreferrer">article</a> by John (Resig), where he also writes about the performance of the module pattern:</p>
  
  <p>"Instantiating a function with a bunch of prototype properties is very, very, fast. It completely blows the Module pattern, and similar, out of the water. Thus, if you have a frequently-accessed function (returning an object) that you want people to interact with, then it's to your advantage to have the object properties be in the prototype chain and instantiate it. Here it is, in code:</p>
  
  <pre><code>// Very fast
  function User(){}
      User.prototype = { /* Lots of properties ... */ };
  
  // Very slow
  function User(){
      return { /* Lots of properties */ };
  }
  </code></pre>
  
  <p>(John mentions he is not against the module pattern "per se" though - just to let you know :)</p>
  
  <p>Then I wasn't sure anymore if I was going into the right direction with my code. The thing is: I don't really <strong>need</strong> any private members, and I also don't think I need inheritance for the time being.
  All I want for now is a readable/maintainable pattern. I guess this boils down to personal preference to a certain extend, but I don't wanna end up with readable code which has (rather serious) performance issues.</p>
  
  <p>I'm no JavaScript expert and thus even less of an expert when it comes to performance testing. So first, I don't really know in how far the things John mentioned ("frequently-accessed function (returning an object) that you want people to interact with", lots of properties, etc.) apply to my code. The documents my code interacts with are not huge, with 100s or 1000s of elements. So maybe it's not an issue at all.</p>
  
  <p>But one thing which came to my mind is that instead of just having</p>
  
  <pre><code>$('span.email').each(function(){
      var emailAddress = $(this).html().replace(' [ @ ] ','@');
      $(this).html('&lt;a href="mailto:' + emailAddress + '"&gt;' + emailAddress + '&lt;/a&gt;');
  });
  </code></pre>
  
  <p>(inside the domready function), I create two "extra" functions, obfuscate and email, due to the use of the module pattern. The creation of additional functions costs some time. The question is: will it be measurable in my case?</p>
  
  <p>I'm not sure if a closure is created in my example above (in an interesting post on the jQuery forum I read the following: "There is a philosophical debate on whether an inner function creates a closure if it doesn't reference anything on an outer function's variable object..."), but I did have closures in my real code. And even though I don't think I had any circular references in there, I don't know in how far this could lead to high(er) memory consumption/problems with garbage collection.</p>
  
  <p>I'd really like to hear your input on this, and maybe see some examples of your code. Also, which tools do you prefer to get information on execution time, memory and CPU usage?</p>