How to include js file in another js file?

 

Possible Duplicate:
Including a .js file within a .js file

How can I include a js file into another js file , so as to stick to the DRY principle and avoid duplication of code.

You can only include a script file in an HTML page, not in another script file. That said, you can write JavaScript which loads your "included" script into the same page: 

var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);

There's a good chance your code depends on your "included" script, however, in which case it may fail because the browser will load the "imported" script asynchronously. Your best bet will be to simply use a third-party library like jQuery or YUI, which solves this problem for you. 

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
});

I disagree with the critic of document.write technique (see suggestion of Vahan Margaryan). I like the way document.getElementsByTagName('head')[0].appendChild(...) (see suggestion of Matt Ball), but there are one important problem: the order of executing of the scripts included in the way. I have to describe the problem more exactly below.

Recently I spend many time to reproduce one close problem. Well-knows jQuery plugin use the same technique (see src here) to load the files, but different people had reported problem with working of this. I can describe the problem as following. Let us you have JavaScript library which consist from many scripts and one loader.js loads all the parts. Some from the parts are depend from another. Let us you include another main.js script per <script> which use the objects from loader.js immediately after the loader.js . The problem was that sometime, the main.js are executed before all scripts loaded by loader.js . The usage of $(document).ready(function () {/*code here*/}); inside of main.js script could also not help. The usage of cascading onload event handler in the loader.js will follow to sequential instead of parallel loading of the scripts and will make difficult to use main.js script which should be just includes somewhere after loader.js .

I could reproduce the problem in my environment and can see that the order of executing of the scripts in Internet Explorer 8 can be another as the order of including of JavaScripts . It is very hard problem if you need include some scripts where one depends from another. The problem and is described in Loading Javascript files in parallel. As the workaround are suggested to use document.writeln : 

document.writeln("<script type='text/javascript' src='Script1.js'></script>");
document.writeln("<script type='text/javascript' src='Script2.js'></script>");

It is described that in the case "the scripts are downloaded in parallel but executed in the order they're written to the page". After changing from document.getElementsByTagName('head')[0].appendChild(...) technique to document.writeln I had never seen any problem more.

So I recommend you to use document.writeln .

UPDATED : If somebody have an interest he can try to load (and reload) the page in Internet Explorer (the page use document.getElementsByTagName('head')[0].appendChild(...) technique) and compare with the fixed version used document.writeln . (The code of the page is relatively dirty and is not from me, but it can be used to reproduce the problem which I describe).

It is not possible directly. You may as well write some preprocessor which can handle that.

If I understand it correctly then below are the things that can be helpful to achieve that:

  • Use a pre-processor which will run through your JS files for example looking for patterns like "@import somefile.js" and replace them with the content of the actual file. Nicholas Zakas(Yahoo) wrote one such library in Java which you can use (http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/)

  • If you are using Ruby on Rails then you can give Jammit asset packaging a try, it uses assets.yml configuration file where you can define your packages which can contain multiple files and then refer them in your actual webpage by the package name.

  • Try using a module loader like RequireJS or a script loader like LabJs with the ability to control the loading sequence as well as taking advantage of parallel downloading.

    • JavaScript currently does not provide a "native" way of including a JavaScript file into another like CSS ( @import ), but all the above mentioned tools/ways can be helpful to achieve the DRY principle you mentioned. I can understand that it may not feel intuitive if you are from a Server-side background but this is the way things are. For front-end developers this problem is typically a "deployment and packaging issue".

    Hope it helps.

    链接地址: http://www.djcxy.com/p/42530.html

    上一篇: 如何使用jQuery将子元素从一个父元素移动到另一个父元素

    下一篇: 如何将js文件包含在另一个js文件中？