How to modularize javascript? - Stack Overflow

admin管理员组

文章数量:1430701

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?

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?

• javascript

Share Improve this question Follow edited Jul 14, 2011 at 9:05 Luke Girvin 13.5k1010 gold badges6767 silver badges8585 bronze badges asked Jul 14, 2011 at 8:25 Lai Yu-HsuanLai Yu-Hsuan 28.2k2929 gold badges100100 silver badges168168 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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./javascript/inheritance.html
• Prototypal inheritence: http://javascript.crockford./prototypal.html
• dojo.declare: http://docs.dojocampus/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

本文标签： How to modularize javascriptStack Overflow