How to modularize javascript?

I have two web page(a.php & b.php). They have very similar logic but distinct UI. I wrote two javascript.

They both look like:

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

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

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

logic.js:

function foo() {
    UI.displayMessage();
    UI.sho开发者_如何学PythonwDetails();
    //other things about UI
}
foo();    

aUI.js and bUI.js:

UI = {
    displayMessage = function ...
    showDetail = function ...
}

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

<script type="text/javascript" src="aUI.js"></script>
<script type="text/javascript" src="logic.js"></script>  

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

Is there a better way?

What about this?

aUI.js and bUI.js have there own namespace like aUI and bUI. And add some more code like this:

<script type="text/javascript" src="aUI.js"></script>
<script type="text/javascript">
  var UI = aUI;
</script>
<script type="text/javascript" src="logic.js"></script>  

This approach resolves the problem about duplicated namespace 'UI'. I think this is kind of DI.

This sounds like a classic problem to be solved by inheritance. You can do this any number of ways in javascript. Here are a few examples.

• Classical inheritence: http://www.crockford.com/javascript/inheritance.html
• Prototypal inheritence: http://javascript.crockford.com/prototypal.html
• dojo.declare: http://docs.dojocampus.org/dojo/declare *

If you did this in Dojo, for example, it would look like this

ui-base.js

dojo.declare("_UI", null, {
  displayMessage: function() { },
  showDetails: function() { },
  foo: function() {
    this.displayMessage();
    this.showDetail();
  }
});

ui-a.js

dojo.declare("UI", _UI, {
  displayMessage: function() { /* Override and define specific behavior here */ },
  showDetails: function() {  /* Override and define specific behavior here */ }
});

ui-b.js

dojo.declare("UI", _UI, {
  displayMessage: function() { /* Override and define specific behavior here */ },
  showDetails: function() {  /* Override and define specific behavior here */ }
});

Then, in your PHP, you just include the appropriate javascript files

a.php

<script src="ui-base.js"></script>
<script src="ui-a.js"></script>

b.php

<script src="ui-base.js"></script>
<script src="ui-b.js"></script>

* The world has too many jQuery examples to make yet another, so you get Dojo this time around ;)

The solution is to architect your code that you don't need to do this and duplicate code. But if you want to stick with it then you can create a file called logic.php and inside do something like this

header("Cache-Control: no-cache");
$currentScript = reset(explode(".", end(explode("/", $_SERVER["SCRIPT_NAME"]))));
read_file("scripts/" . $currentScript . ".js");
echo "\n;\n";
read_file("scripts/logic.js");

and in html

<script type="text/javascript" src="logic.php"></script>

this way the script will change it's content because it will concatenate the required script based on it's name and the content of logic.js. The downside of this is thatit invalidates the caching of the browser.

Another solution will be to synchronously load in logic.js the other module you need. You can get the name of the script from document.location.href