Question

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.showDetails();
    //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?

Answer 1

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.