How to modularize javascript?

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.

Answer 2

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 ;)