How to modularize javascript?
<p>I have two web page(a.php &amp; b.php). They have very similar logic but distinct UI. I wrote two javascript.</p>

<p>They both look like:</p>

<pre><code>aUI = {
    displayMessage = function ...
    showDetails = function ...
}
function foo() {
    aUI.displayMessage();
    aUI.showDetails();
    //    and other things about aUI.displayMessage() and aUI.showDetails()...
}
foo();
</code></pre>

<p>aUI.displayMessage() is different from bUI.displayMessage(). But a.js and b.js have the same foo().</p>

<p>I extracted foo(). So now I have three .js: aUI.js, bUI.js and logic.js.</p>

<p>logic.js:</p>

<pre><code>function foo() {
    UI.displayMessage();
    UI.showDetails();
    //other things about UI
}
foo();    
</code></pre>

<p>aUI.js and bUI.js:</p>

<pre><code>UI = {
    displayMessage = function ...
    showDetail = function ...
}
</code></pre>

<p>How can a.php know it should use aUI.js? I wrote the plain implement:</p>

<pre><code>&lt;script type="text/javascript" src="aUI.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="logic.js"&gt;&lt;/script&gt;  
</code></pre>

<p>It works but seems not clever. I have duplicated namespace 'UI' in a project.</p>

<p>Is there a better way?     </p>
