Javascript divide and load multiple .js files

最新推荐文章于 2024-09-22 11:17:00 发布

iteye_13882

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量123

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_13882/article/details/82393778

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

It is a common practise to divide the programming code into multiple files. the same principle/rule/doctrin also applies to Javascript.

you may have a .htm file and several modules, each module in its own .js file. the problem here is how to load the the separate modules into the html file.

there are generally two strategies.

statically load modules
dynamically load modules.

statically load moduels

Statically load modules approach is useful when you know in advance which modules will be loaded and the modules will not change.

to do that, you simple do the following..

<script src="file1.js"></script>
<script src="file2.js"></script>
<script src="file3.js"></script>
<script src="file4.js"></script>

Or you can do the following.

<script src="file.js"></script>

and the content of the file.js is something like this:

document.write('<script src="file1.js"><\/script>');
document.write('<script src="file2.js"><\/script>');
document.write('<script src="file3.js"><\/script>');
document.write('<script src="file4.js"><\/script>');

NOTE: Common Pitfall

there is a common snag/snare that people might accidently fallen into. Let me illustrate that with a simple example.

first, we defined some unit test code, and store it in a file called js/unit.js, the conte of the file is.

/**
* @Name
* @Comment: add global function to do unit test 
*/
(function () {
  var results;
  this.assert = function assert(value, desc) {
    var li = document.createElement("li");
    // note, this is DOM specification 2, which it may not be suppported by the Editor, but should be fine, let me know if otherwise.
    li.className = value ? "pass" : "fail";
    li.appendChild(document.createTextNode(desc));
    results.appendChild(li);
    if (!value) {
      li.parentNode.parentNode.className = "fail";
    }
    return li;
  };
  this.test = function test(name, fn) {
    results = document.getElementById("results");
    results = assert(true, name).appendChild(
                  document.createElement("ul"));
    fn();
  };
})();

and we have a file, which demonstrate how to use an object to simuate an arrary, in "js/fakeArrayMethod.js", contents as

/**
* @Comment: this fake array methods and treat a normal object as an array 
*/

var elems = {
  // I think the find is the key to array[idx]??
  find: function (id) {
    this.add(document.getElementById(id));
  },
  // the length is the stub to the count given by array.length?
  length: 0,
  // while this is how you update the lengh property
  add: function (elem) {
    Array.prototype.push.call(this, elem);
  }
};

the content of the test file, "fakeArrayMethod.htm" has the following content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="js/unit.js" ></script>
    <!-- is that a bug, if you do this, 

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

    then nothing is displayed, but if you change to this, you can ?


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


    -->
   <script type="text/javascript" src="js/fakeArrayMethod.js"></script>

    <script type="text/javascript">
      window.onload = function () {
        test("A test.", function () {
          assert(true, "First assertion completed");
          assert(true, "Second assertion completed");
          assert(true, "Third assertion completed");  
        });

        test("FakeArrayMethod", function () {
          elems.find("first");

          assert(elems.length == 1 && elems[0].nodeType,
          "Verify that we have an element in our stash");

          elems.find("second");

          assert(elems.length == 2 && elems[0].nodeType, "Verify the other insertion");

        });


      };

    </script>
    <style type="text/css">
        #results li.pass { color: green; }
        #results li.fail { color: red; }
    </style>
</head>
<body>
<input id="first" />
<input id="second" />
    <ul id="results"></ul>
</body>
</html>

As described in the above comment, there is comment saying that if you have the script tag as follow, then, the program will not work correctly. so

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

will not be intepret by the runtime correctly, but if you have this

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

then it is correct.

Dynamically load moduels

In this post, How to split JavaScript code into multiple files and use them without including them via script tag in HTML? it introduced several ways that you can import some js modules dynamically.

and in another post titled 4 ways to dynamically load external JavaScript(with source) it discussed several ways to dynamically load external javascript.

they are

using document.write
Dynamically change the src property value
Dynamically create <script > element
Get Javascript by using XMLHttp, then create script object.

choice 1: using document.write

// you need to put an escape character before the closing </script> tag, like this: <\/script>
<script language="javascript">
document.write("<script src='other.js'><\/script>");
</script>

choice 2: Dynamically change the src property value

<script src='' id="s1"></script>
<script language="javascript">
s1.src="other.js"
</script>

choice 3: Dynamically create <script> element

<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="other.js";
oHead.appendChild( oScript);
</script>

choice 4: Get JavaScript by using XMLHTTP,then create script object

<script language="JavaScript">
function GetHttpRequest()
{
if ( window.XMLHttpRequest ) // Gecko
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
}
function AjaxPage(sId, url){
var oXmlHttp = GetHttpRequest() ;
oXmlHttp.OnReadyStateChange = function()
{
if ( oXmlHttp.readyState == 4 )
{
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )
{
IncludeJS( sId, url, oXmlHttp.responseText );
}
else
{
alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
}
}
}
oXmlHttp.open('GET', url, true);
oXmlHttp.send(null);
}
function IncludeJS(sId, fileUrl, source)
{
if ( ( source != null ) && ( !document.getElementById( sId ) ) ){
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement( "script" );
oScript.language = "javascript";
oScript.type = "text/javascript";
oScript.id = sId;
oScript.defer = true;
oScript.text = source;
oHead.appendChild( oScript );
}
}
AjaxPage( "scrA", "b.js" );
alert( "dynamically load javascript");
alert( "dynamically load a.js and get the variable：" + str );
</script>