title: Appcelerator and CommonJS modules (caching and circular references)
body: <p>Here's the thing:</p>
  
  <p>I'm using the CommonJS way of making my mobile (iPhone/Android) application modular. No surprise there. But there's one thing that I just can't get my head around.</p>
  
  <p>CommonJS lets me create STATIC private variables, which lets me create singletons at ease. This, I think at least, is because the contents of a file that gets <code>require()</code>d is read only once and then the exports object (which is initialized only once) is returned every time.</p>
  
  <p>But when I create a circular reference as seen below, the code inside the included module is executed every time.</p>
  
  <p><strong>Wait...</strong>
  Funny thing is, while I'm writing this question, I suddenly realise that none of the calls to <code>require()</code> finish before the next one starts (hence the stack overflow demonstrated below).</p>
  
  <p>Any thoughts on whether I'm on track or not? It's past 5 AM over here, so all bets are off as far as I'm concerned :D.</p>
  
  <p><strong>EXAMPLES:</strong></p>
  
  <p>See this piece of code, it defines a singleton:</p>
  
  <pre><code>/* Singleton.js */
  
  exports.getSingleton = getSingleton;
  
  function getSingleton(name) {
    if (!instance) {
      instance = new Thing(name);
    }
  
    return instance;
  }
  
  function Thing(name) {
    this.name = name;
  }
  
  var instance;
  </code></pre>
  
  <p>I <code>require()</code> this file as such:</p>
  
  <pre><code>var theFirstThing = require('Singleton').getSingleton('first');
  Ti.API.info('first: ' + theFirstThing.name)
  
  var possiblyAnotherOtherThing = require('Singleton').getSingleton('second');
  Ti.API.info('second: ' + possiblyAnotherOtherThing.name);
  </code></pre>
  
  <p>The Output is:</p>
  
  <pre><code>[DEBUG] loading: /path/to/sim/MyApp.app/app.js, resource: app_js
  [DEBUG] loading: /path/to/sim/MyApp.app/Singleton.js, resource: Singleton_js
  [INFO] first: first
  [INFO] second: first
  </code></pre>
  
  <p>Why is it then that circular references like the following don't work? (I might have already ansered this myself, comment/answer on it if you like).</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>require('Banana');
  </code></pre>
  
  <p><strong>Pinapple.js</strong></p>
  
  <pre><code>require('Banana');
  </code></pre>
  
  <p><strong>Banana.js</strong></p>
  
  <pre><code>require('Pineapple');
  </code></pre>
  
  <p>Because the output is this:</p>
  
  <pre><code>[DEBUG] loading: /path/to/simulator/MyApp.app/app.js, resource: app_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Banana.js, resource: Banana_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Pineapple.js, resource: Pineapple_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Banana.js, resource: Banana_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Pineapple.js, resource: Pineapple_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Banana.js, resource: Banana_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Pineapple.js, resource: Pineapple_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Banana.js, resource: Banana_js
  
  /* etcetera (total of 15 times back and forth) */
  
  [DEBUG] loading: /path/to/simulator/MyApp.app/Pineapple.js, resource: Pineapple_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Banana.js, resource: Banana_js
  [DEBUG] loading: /path/to/simulator/MyApp.app/Pineapple.js, resource: Pineapple_js
  [ERROR] Script Error = Maximum call stack size exceeded. (unknown file)
  </code></pre>