JavaScript file referring/JavaScript 文件引用

Modern web developing languages such as ASP.NET, PHP even CSS have the syntax of importing other code files to current one.

• ASP.NET:

  <!--#include file="inc_footer.aspx"-->

  
  
• PHP:

  <?php include("menu.php"); ?>
  
  <?php require("wrongFile.php"); ?>

  
  
• CSS:

  @import url("import1.css");

Unfortunately, JavaScript doesn’t provide similar statements. So it’s really hard to maintain the quickly growing number of .js files.

I ever tried to maintain them through kinds of server side ways, like:

1. Create a web page(.aspx, .php) which accept a url parameter, according to the value of the parameter, the page concatenates the content of required .js files and returns.
   So I can link to those required .js files by adding a script link to page:

   <script type="text/javascript" src="abc.aspx?key=Ajax" />

   
   
2. Design a custom control, which contains links to required .js files, and put the control at where those files are needed.

But those ways are a bit of complicated. If you just want to ensure that the required .js files have been loaded at somewhere in a piece of js code, I recommend the following approach.

1. Create a default.js, or common.js or basic.js that most web pages would use. And insert the piece of code below to it:
   

   if (typeof (window.PO) === 'undefined') window.PO = {};
   if (typeof (PO.Url) === 'undefined') PO.Url = {};
   
   PO.Url.Combine = function(baseUrl, relativeUrl) {
       if (!baseUrl) return relativeUrl ? relativeUrl : null;
       if (!relativeUrl) return baseUrl;
   
       var ri = 0;
       var bi = baseUrl.length - 1;
   
       if (baseUrl.charAt(bi) == '/') {
           baseUrl = baseUrl.substr(0, bi);
       } else {
           bi = baseUrl.lastIndexOf('/');
           if (bi > -1 && baseUrl.indexOf('.', bi) > -1)
               baseUrl = baseUrl.substr(0, bi);
       }
   
       ri = relativeUrl.indexOf('../');
       bi = baseUrl.lastIndexOf('/');
       while (ri > -1 && bi > -1) {
           relativeUrl = relativeUrl.substr(ri + 3);
           baseUrl = baseUrl.substr(0, bi);
   
           ri = relativeUrl.indexOf('../');
           bi = baseUrl.lastIndexOf('/');
       }
   
       return baseUrl + '/' + relativeUrl;
   };
   
   //Google's approach:
   //document.write(unescape('%3Cscript src="' + baseUrl + 'common.js" type="text/javascript"%3E%3C/script%3E'));
   PO.Require = function(relativeUrl) {
       if (!relativeUrl) return;
   
       var scripts = document.getElementsByTagName('script');
       if (!scripts || !scripts.length)
           return;
   
       var reg = /Basic.js/i; //TODO: replace Basic.js with yours.
       var url = 'Script/Main'; //TODO: change default base url;
   
       for (i = 0; i < scripts.length; i++) {
           var s = scripts[i];
           if (s.src && s.src.match) {
               var m = s.src.match(reg);
               if (null != m) {
                   url = m.input.substr(0, m.index - 1);
                   break;
               }
           }
       }
   
       url = this.Url.Combine(url, relativeUrl);
   
       var s = document.createElement('script');
       s.type = 'text/javascript';
       s.src = url;
   
       var head = document.getElementsByTagName('head')[0];
       head.appendChild(s);
   };

2. Then at somewhere that current piece of code requires another code file, add a statement as in:
   

   PO.Require('../Common/DragDrop.js');

   
   Note: the path of required .js file (“../Common/DragDrop.js” in the example) is relative to the default.js.

And, consider what you can do with it in the following case:

You found a pretty accordion control of javascript, but it requires a couple of .js files.

You don’t think it’s a good idea to add script links of all required .js files to each page that use this control.

How about:

• Create a new folder and put all .js file related to that accordion control in it.
• Create a new .js file, let’s call it accordion.js, and add some code as in:
  

PO.Require('../Accordion/eee.ui.js');
PO.Require('../Accordion/eee.ui.fade.js');
PO.Require('../Accordion/eee.ui.move.js');
...

• Add a script link of default.js (the one contains the defination of PO.Require function) to page:

<script type="text/javascript" src="/Script/default.js" />



• Add a script link of newly created accordion.js:

<script type="text/javascript" src="/Script/Controls/accordion.js" />