How to modulate javascript?

Question

I have two web pages (a.php and b.php). They have very similar logic, but a great interface. I wrote two javascript.

Both of them look like this:

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 that it should use aUI.js? I wrote a simple tool:

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

It works, but it seems not smart. I duplicated the 'UI' namespace in the project.

Is there a better way?

Answer 1

How about this?

aUI.js and bUI.js have their own namespace, such as aUI and bUI . And add another 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 solves the problem of duplicating the namespace 'UI'. I think this is a kind of CI.

Answer 2

It sounds like a classic problem solved by inheritance. You can do this in several ways in javascript. Here are some examples.

• Classic Inheritance: http://www.crockford.com/javascript/inheritance.html
• Prototype Inheritance: http://javascript.crockford.com/prototypal.html
• dojo.declare: http://docs.dojocampus.org/dojo/declare *

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

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> 

* There are too many jQuery examples in the world to do one more, so you get Dojo this time;)

Answer 3

The solution is to archive your code, which you do not need to do, and duplicate the code. But if you want to stick with this, 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> 

that way, the script will change its contents because it will concatenate the required script based on its name and logic.js content. The disadvantage of this is that browser caching is invalidated.

Another solution would be to synchronize in logical.js another module you need. You can get the script name from document.location.href