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?

Sanghyun Lee · Accepted Answer · 2011-07-14 09:04:03Z

4

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.

answered Jul 14, 2011 at 9:04

Sanghyun Lee

23.4k19 gold badges106 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Johnson · Accepted Answer · 2011-07-14 09:41:09Z

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

TheBrain · Accepted Answer · 2011-07-14 08:54:36Z

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

Collectives™ on Stack Overflow

How to modularize javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related