如何将 JavaScript 文件包含在另一个 JavaScript 文件中?

Is there something in JavaScript similar to @import in CSS that allows you to include a JavaScript file inside another JavaScript file?

转载于:https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file

weixin_41568127
?yb? feelfreehere.com/…
大约 2 年之前 回复
csdnceshi62
csdnceshi62 what is the practical advantage of doing this? either way the code base dependent on javascript file isn't going to load and start working in any case it is not loaded !
3 年多之前 回复
csdnceshi74
7*4 That wouldn't help to import anything, but it should work as well. If you have a JS file that depends of another JS file, just declare the script tags of the dependency files first, so the later will already have its dependencies loaded. If you have a situation where it isn't a possible approach, the answers here should be helpful.
4 年多之前 回复
csdnceshi74
7*4 Why not declaring the imported file before the other one that requires it, simply using ordered script tags?
5 年多之前 回复
csdnceshi54
hurriedly% I do not want to use an AJAX call.
11 年多之前 回复
csdnceshi72
谁还没个明天 stackoverflow.com/questions/21294/…
11 年多之前 回复

30个回答

The old versions of JavaScript had no import, include, or require, so many different approaches to this problem have been developed.

But since 2015 (ES6), JavaScript has had the ES6 modules standard to import modules in Node.js, which is also supported by most modern browsers.

For compatibility with older browsers, build and/or transpilation tools can be used.

ES6 Modules

ECMAScript (ES6) modules have been supported in Node.js since v8.5, with the --experimental-modules flag. All files involved must have the .mjs extension.

// module.mjs
export function hello() {
  return "Hello";
}
// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

ECMAScript modules in browsers

Browsers have had support for loading ECMAScript modules directly (no tools like Webpack required) since Safari 10.1, Chrome 61, Firefox 60, and Edge 16. Check the current support at caniuse.

<script type="module">
  import { hello } from './hello.mjs';
  hello('world');
</script>
// hello.mjs
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

Read more at: https://jakearchibald.com/2017/es-modules-in-browsers/

Dynamic imports in browsers

Dynamic imports let the script load other scripts as needed:

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

Read more at: https://developers.google.com/web/updates/2017/11/dynamic-import

Node.js require

The old style of importing modules, still widely used in Node.js, is the module.exports/require system.

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

There are other ways for JavaScript to include external JavaScript contents in browsers that do not require preprocessing.

AJAX Loading

You could load an additional script with an AJAX call and then use eval to run it. This is the most straightforward way, but it is limited to your domain because of the JavaScript sandbox security model. Using eval also opens the door to bugs, hacks and security issues.

jQuery Loading

The jQuery library provides loading functionality in one line:

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Dynamic Script Loading

You could add a script tag with the script URL into the HTML. To avoid the overhead of jQuery, this is an ideal solution.

The script can even reside on a different server. Furthermore, the browser evaluates the code. The <script> tag can be injected into either the web page <head>, or inserted just before the closing </body> tag.

Here is an example of how this could work:

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

This function will add a new <script> tag to end of the head section of the page, where the src attribute is set to the URL which is given to the function as the first parameter.

Both of these solutions are discussed and illustrated in JavaScript Madness: Dynamic Script Loading.

Detecting when the script has been executed

Now, there is a big issue you must know about. Doing that implies that you remotely load the code. Modern web browsers will load the file and keep executing your current script because they load everything asynchronously to improve performance. (This applies to both the jQuery method and the manual dynamic script loading method.)

It means that if you use these tricks directly, you won't be able to use your newly loaded code the next line after you asked it to be loaded, because it will be still loading.

For example: my_lovely_script.js contains MySuperObject:

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

Then you reload the page hitting F5. And it works! Confusing...

So what to do about it ?

Well, you can use the hack the author suggests in the link I gave you. In summary, for people in a hurry, he uses an event to run a callback function when the script is loaded. So you can put all the code using the remote library in the callback function. For example:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

Then you write the code you want to use AFTER the script is loaded in a lambda function:

var myPrettyCode = function() {
   // Here, do whatever you want
};

Then you run all that:

loadScript("my_lovely_script.js", myPrettyCode);

Note that the script may execute after the DOM has loaded, or before, depending on the browser and whether you included the line script.async = false;. There's a great article on Javascript loading in general which discusses this.

Source Code Merge/Preprocessing

As mentioned at the top of this answer, many developers use build/transpilation tool(s) like Parcel, Webpack, or Babel in their projects, allowing them to use upcoming JavaScript syntax, provide backwards compatibility for older browsers, combine files, minify, perform code splitting etc.

weixin_41568208
北城已荒凉 Why isn't just including the script on the HTML page before the 2nd script included as an option? The vast majority of the time, this makes perfect sense, and everything else is overkill.
2 年多之前 回复
csdnceshi56
lrony* The events do not work when using script type="module" to allow for ES6 imports. For a work around see this related SO question: stackoverflow.com/questions/47978809/…
2 年多之前 回复
csdnceshi61
derek5. Safari 10.1.2 on MacOS Sierra says SyntaxError: Unexpected keyword 'import'.
接近 3 年之前 回复
csdnceshi67
bug^君 Note that $.getScript adds an annoying anticache to the script url to prevent browser caching. Most people would want the script cached. jQuery 1.12.0 or later support disabling the anticache using this: $.getScript({url: "file.js",cache:true},callback)
大约 3 年之前 回复
csdnceshi51
旧行李 Soon we will have the native imports developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
大约 4 年之前 回复
csdnceshi71
Memor.の I edited the question to point out that jQuery's getScript is not as useful as it first appeared to be, so take the previous comments with a pinch of salt.
5 年多之前 回复
csdnceshi54
hurriedly% When I use this loadScript function, IE9 appears to be loading my script multiple times.
5 年多之前 回复
weixin_41568183
零零乙 Your answer requires some modification for IE (onreadystatechange event and the readyState property). Also, dynamic script loading does not benefit from the broswer's preload scanners. Recommend this HTML5Rocks article: html5rocks.com/en/tutorials/speed/script-loading
5 年多之前 回复
csdnceshi59
ℙℕℤℝ At the time I wrote my original comment (5 years ago) I had never heard of node, and was running JS on the command-line with the MS scripting library or whatever it was. The point still stands -- the answer is specifically browser-based while the question only says Javascript. So, node or other JS-engines seem applicable.
5 年多之前 回复
weixin_41568196
撒拉嘿哟木头 i'm using Javascript outside a browser can't I just use the features of a given shell / engine / interpreter? If I want to write standalone JS files and run them in Node, I imagine I can use require/
5 年多之前 回复
csdnceshi52
妄徒之命 Note that jQuery 1.x does not fire error callbacks! jQuery 2.x does, but does not support IE <= 8
接近 6 年之前 回复
weixin_41568110
七度&光 The $.getScript(), seems to hang the browser until the the script is loaded. But this seems to happens only with some javascripts. I tried with tiny.mce.js
接近 6 年之前 回复
weixin_41568174
from.. as with all performance related questions: measure. 1 load of data always beats multiple requests if everything needs to be loaded anyway. But, as you say, certain things only need to be loaded when it is needed, then chunking it up is a lot faster for the initial load. So perceived performance goes up. No clear cut anwer for this one unfortunately.
接近 6 年之前 回复
weixin_41568110
七度&光 I would agree with you but suppose one needs to load as less javascript (maybe for performance for rendering faster) as it can, what is better load a lot of javascript at once or just load on demand when it is needed?
接近 6 年之前 回复
csdnceshi55
~Onlooker In the JavaScript Madness: Dynamic Script Loading webpage, I cannot really follow about the readyState bits. It says the states are quite nondeterministic (isn't it?) If yes, I have an idea of using setTimeout to keep checking the typeof functions until they are not "undefined". Is it good?
接近 6 年之前 回复
csdnceshi57
perhaps? To work with IE8+ : msdn.microsoft.com/fr-fr/library/ie/hh180173(v=vs.85).aspx
大约 6 年之前 回复
csdnceshi72
谁还没个明天 Can't the whole problem of javascript files loading asynchronously be solved by simply putting the code that requires other javascript files inside of a window.onload function?
6 年多之前 回复
weixin_41568127
?yb? Note: If you run loadScript before the document is loaded, you'll get an error like "Cannot call method 'appendChild' of null".
6 年多之前 回复
csdnceshi76
斗士狗 // Here you can use anything you defined in the loaded script I want to use functions includes in the loaded script everywhere after the use of getScript, Can I do that??
接近 7 年之前 回复
csdnceshi75
衫裤跑路 But my page does not know JQUERY This is exactly what I want to add!!! What to do?
接近 7 年之前 回复
csdnceshi78
程序go Someone should really mention the .onload JS native method in context of scripts relying on each other...
大约 7 年之前 回复
csdnceshi77
狐狸.fox The events for script don't seem to fire in anything but IE (using XP so 8). Tried using addEventListener as well to no avail.
大约 7 年之前 回复
csdnceshi65
larry*wei Yes, there are several importers like this. Coffeescript got one as well.
大约 7 年之前 回复
csdnceshi69
YaoRaoLov I guess this import is a node.js thing, am I right?
大约 7 年之前 回复
csdnceshi65
larry*wei I didn't say pirating, I said hack. For exemple, if you have code that have "use strict" in it, you will have to hack the hell out of it to make it work with eval.
7 年多之前 回复
csdnceshi64
游.程 How does eval open the door to hacks if it's your code that you're executing?
7 年多之前 回复
weixin_41568134
MAO-EYE Shouldn't "document.createElement("my_lovely_script.js");" in the example be "document.createElement("script")" ?
接近 8 年之前 回复
weixin_41568126
乱世@小熊 Loading scripts and posting forms through ajax are where jQuery shows its strength.
大约 8 年之前 回复
weixin_41568174
from.. Just to be complete, there is a third way: In certain solutions when you control both javascript files, you can just make 1 giant javascript file which combines the content of both files.
大约 8 年之前 回复
csdnceshi65
larry*wei Nope but somebody that uses something as advanced as Rhino or else wouldn't ask this question.
大约 10 年之前 回复

Another way, that in my opinion is much cleaner, is to make a synchronous Ajax request instead of using a <script> tag. Which is also how Node.js handles includes.

Here's an example using jQuery:

function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

You can then use it in your code as you'd usually use an include:

require("/scripts/subscript.js");

And be able to call a function from the required script in the next line:

subscript.doSomethingCool(); 
csdnceshi52
妄徒之命 You don't need jQuery for this. The Facebook button is a great example of very reliably loading an external script dynamically. Here's an answer based on their code.
大约 5 年之前 回复
csdnceshi56
lrony* We are not using jqXHR objects here. Your quote doesn't seem to back up your previous comment stating that async: false supposedly is deprecated. It is not! As your quote states, only the jqXHR related stuff is.
5 年多之前 回复
weixin_41568196
撒拉嘿哟木头 From the documentation. "The jqXHR objects returned by $.ajax() implement the Promise interface, giving them all the properties, methods, and behavior of a Promise. async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete"
5 年多之前 回复
csdnceshi56
lrony* (and njzk2): Please provide documentation for your claims. I believe you are mistaken, because the changelog and documentation only states that the usage of deferred/promise functionality is deprecated with $.ajax() and async: false and not the async: false functionality itself. This is the relevant ticket.
5 年多之前 回复
weixin_41568208
北城已荒凉 Works in 1.10.2 here. Is there another way to do it?
6 年多之前 回复
csdnceshi65
larry*wei this is deprecated as of jquery 1.8, and does not work in jquery 1.9
接近 7 年之前 回复
weixin_41568196
撒拉嘿哟木头 unfortunatelly, async:false is now deprecated in jQuery. Might break in the future, so i'd avoid.
接近 7 年之前 回复
csdnceshi77
狐狸.fox Found I could do debug it by adding this directive at the bottom of the file for Chrome : //@ sourceURL=view_index.js
7 年多之前 回复
csdnceshi77
狐狸.fox -- I LOVE LOVE this BUT is there anyway to debug those required scripts? This would be the perfect solution if I could just step through my code still in Chrome.
7 年多之前 回复
csdnceshi70
笑故挽风 I love this solution!. The phpjs library also has similar functions: link
接近 8 年之前 回复
weixin_41568127
?yb? Correct. That's why I prefer absolute urls ;)
大约 8 年之前 回复
csdnceshi80
胖鸭 Good solution. Seems to work. Keep in mind, the path you pass to require will be relative to the page your loading the scripts on, and not the scripts themselves.
大约 8 年之前 回复
weixin_41568127
?yb? As someone else mentioned, requirejs.org does this and also has a pre-compiler that puts js files together so they load faster. You may want to check it out.
8 年多之前 回复
weixin_41568110
七度&光 Good solution, the head include is async unfortunately, the ajax solution works.
接近 9 年之前 回复

There actually is a way to load a JavaScript file not asynchronously, so you could use the functions included in your newly loaded file right after loading it, and I think it works in all browsers.

You need to use jQuery.append() on the <head> element of your page, that is:

$("head").append('<script type="text/javascript" src="' + script + '"></script>');

However, this method also has a problem: if an error happens in the imported JavaScript file, Firebug (and also Firefox Error Console and Chrome Developer Tools as well) will report its place incorrectly, which is a big problem if you use Firebug to track JavaScript errors down a lot (I do). Firebug simply doesn't know about the newly loaded file for some reason, so if an error occurs in that file, it reports that it occurred in your main HTML file, and you will have trouble finding out the real reason for the error.

But if that is not a problem for you, then this method should work.

I have actually written a jQuery plugin called $.import_js() which uses this method:

(function($)
{
    /*
     * $.import_js() helper (for JavaScript importing within JavaScript code).
     */
    var import_js_imported = [];

    $.extend(true,
    {
        import_js : function(script)
        {
            var found = false;
            for (var i = 0; i < import_js_imported.length; i++)
                if (import_js_imported[i] == script) {
                    found = true;
                    break;
                }

            if (found == false) {
                $("head").append('<script type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

So all you would need to do to import JavaScript is:

$.import_js('/path_to_project/scripts/somefunctions.js');

I also made a simple test for this at Example.

It includes a main.js file in the main HTML and then the script in main.js uses $.import_js() to import an additional file called included.js, which defines this function:

function hello()
{
    alert("Hello world!");
}

And right after including included.js, the hello() function is called, and you get the alert.

(This answer is in response to e-satis' comment).

csdnceshi69
YaoRaoLov I was looking for something like this so that I could use Jest & Node with some jquery javascript functions. I did something along the same idea... gist.github.com/peteristhegreat/…
2 年多之前 回复
csdnceshi62
csdnceshi62 Shouldn't the script variable have html entities encoded? If the link contains the ", code will break
大约 3 年之前 回复
csdnceshi74
7*4 Hmm, according to this article, appending a script element to head will cause it to run asynchronously, unless the async is specifically set to false.
5 年多之前 回复
csdnceshi74
7*4 Does this technique really block until the imported script is both loaded and executed?
5 年多之前 回复
csdnceshi71
Memor.の - use jQuery.getScript, that way you don't have to worry about writing the plugin...
7 年多之前 回复
csdnceshi57
perhaps? I am trying this method, but is not working for me, the element just does not appear in head tag.
7 年多之前 回复

If anyone is looking for something more advanced, try out RequireJS. You'll get added benefits such as dependency management, better concurrency, and avoid duplication (that is, retrieving a script more than once).

You can write your JavaScript files in "modules" and then reference them as dependencies in other scripts. Or you can use RequireJS as a simple "go get this script" solution.

Example:

Define dependencies as modules:

some-dependency.js

define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {

     //Your actual script goes here.   
     //The dependent scripts will be fetched if necessary.

     return libraryObject;  //For example, jQuery object
});

implementation.js is your "main" JavaScript file that depends on some-dependency.js

require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.   
    //Then your script is executed
});

Excerpt from the GitHub README:

RequireJS loads plain JavaScript files as well as more defined modules. It is optimized for in-browser use, including in a Web Worker, but it can be used in other JavaScript environments, like Rhino and Node. It implements the Asynchronous Module API.

RequireJS uses plain script tags to load modules/files, so it should allow for easy debugging. It can be used simply to load existing JavaScript files, so you can add it to your existing project without having to re-write your JavaScript files.

...

csdnceshi76
斗士狗 can you elaborate more? I'm playing with struts2 framework and thinking of giving RequireJS a go... Have you had bad experiences with it while using a MVC approach? RequireJS seems a bit overwhelming to me as I only need kind of "includes" on my JS files and I'm not developing a SPA, but It might be interesting to try it out
3 年多之前 回复
csdnceshi75
衫裤跑路 ‘add .. w/o having to re-write your JavaScript files’; cool, but how exactly? Cur. answer suggests add such a ‘require’(not ‘requirejs’?) to main script +such a ‘define’ to every dependent file,yes? But that IS rewrite so what not rewritten? -rest of code since RequireJS lets ea file make global defs as normal? -does it? I just tried that, +(forgotten?) <script src="requirejs.org/docs/release/2.2.0/comments/require.js"> </script>, then ‘requirejs(['GoogleDrive.com/host/..',..],function(a,b){mycode})’: Firebug says every dependent loaded BUT their defs not defined in mycode&after.
4 年多之前 回复
csdnceshi71
Memor.の doesn't work well with MVC and script bundling with automatic minification
接近 5 年之前 回复
csdnceshi63
elliott.david -1: Those abstractions -- "some_dependency" -- are really poor, with indexes adding to confusion. I struggle to understand what a working code example looks like. If author supplied working example, almost anybody would be able to tailor and generalize it to his needs.
接近 6 年之前 回复
weixin_41568131
10.24 To overcome require.js the most latest would be angular js which is more stable and easy to use with along with other binding and rich HTML features.
接近 6 年之前 回复
csdnceshi53
Lotus@ MattDmo's reason plus it relies on an external library which in return rely on the accepted answer.
6 年多之前 回复
weixin_41568184
叼花硬汉 Library APIs for dependency1 and dependency2, respectively. So if dependency1 was, in fact, the jQuery library then it would be your jQuery API and you can name it whatever you want - such as $.
6 年多之前 回复
csdnceshi70
笑故挽风 What exactly are d1 and d2 in some-dependency.js?
6 年多之前 回复
weixin_41568184
叼花硬汉 per your suggestion - I added a short example
7 年多之前 回复
csdnceshi60
℡Wang Yan +1 for citing the right way to do it :-) It would be even better if you included an example!
7 年多之前 回复

Or rather than including at run time, use a script to concatenate prior to upload.

I use Sprockets (I don't know if there are others). You build your JavaScript code in separate files and include comments that are processed by the Sprockets engine as includes. For development you can include files sequentially, then for production to merge them...

See also:

csdnceshi63
elliott.david Browserify is far more popular than Sprockets.
大约 5 年之前 回复

I wrote a simple module that automates the job of importing/including module scripts in JavaScript. For detailed explanation of the code, refer to the blog post JavaScript require / import / include modules.

// ----- USAGE -----

require('ivar.util.string');
require('ivar.net.*');
require('ivar/util/array.js');
require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');

ready(function(){
    //Do something when required scripts are loaded
});

    //--------------------

var _rmod = _rmod || {}; //Require module namespace
_rmod.LOADED = false;
_rmod.on_ready_fn_stack = [];
_rmod.libpath = '';
_rmod.imported = {};
_rmod.loading = {
    scripts: {},
    length: 0
};

_rmod.findScriptPath = function(script_name) {
    var script_elems = document.getElementsByTagName('script');
    for (var i = 0; i < script_elems.length; i++) {
        if (script_elems[i].src.endsWith(script_name)) {
            var href = window.location.href;
            href = href.substring(0, href.lastIndexOf('/'));
            var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length);
            return url.substring(href.length+1, url.length);
        }
    }
    return '';
};

_rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark
                                                   //the root directory of your library, any library.


_rmod.injectScript = function(script_name, uri, callback, prepare) {

    if(!prepare)
        prepare(script_name, uri);

    var script_elem = document.createElement('script');
    script_elem.type = 'text/javascript';
    script_elem.title = script_name;
    script_elem.src = uri;
    script_elem.async = true;
    script_elem.defer = false;

    if(!callback)
        script_elem.onload = function() {
            callback(script_name, uri);
        };
    document.getElementsByTagName('head')[0].appendChild(script_elem);
};

_rmod.requirePrepare = function(script_name, uri) {
    _rmod.loading.scripts[script_name] = uri;
    _rmod.loading.length++;
};

_rmod.requireCallback = function(script_name, uri) {
    _rmod.loading.length--;
    delete _rmod.loading.scripts[script_name];
    _rmod.imported[script_name] = uri;

    if(_rmod.loading.length == 0)
        _rmod.onReady();
};

_rmod.onReady = function() {
    if (!_rmod.LOADED) {
        for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){
            _rmod.on_ready_fn_stack[i]();
        });
        _rmod.LOADED = true;
    }
};

_.rmod = namespaceToUri = function(script_name, url) {
    var np = script_name.split('.');
    if (np.getLast() === '*') {
        np.pop();
        np.push('_all');
    }

    if(!url)
        url = '';

    script_name = np.join('.');
    return  url + np.join('/')+'.js';
};

//You can rename based on your liking. I chose require, but it
//can be called include or anything else that is easy for you
//to remember or write, except "import", because it is reserved
//for future use.
var require = function(script_name) {
    var uri = '';
    if (script_name.indexOf('/') > -1) {
        uri = script_name;
        var lastSlash = uri.lastIndexOf('/');
        script_name = uri.substring(lastSlash+1, uri.length);
    } 
    else {
        uri = _rmod.namespaceToUri(script_name, ivar._private.libpath);
    }

    if (!_rmod.loading.scripts.hasOwnProperty(script_name)
     && !_rmod.imported.hasOwnProperty(script_name)) {
        _rmod.injectScript(script_name, uri,
            _rmod.requireCallback,
                _rmod.requirePrepare);
    }
};

var ready = function(fn) {
    _rmod.on_ready_fn_stack.push(fn);
};

If your intention to load the JavaScript file is using the functions from the imported/included file, you can also define a global object and set the functions as object items. For instance:

global.js

A = {};

file1.js

A.func1 = function() {
  console.log("func1");
}

file2.js

A.func2 = function() {
  console.log("func2");
}

main.js

A.func1();
A.func2();

You just need to be careful when you are including scripts in an HTML file. The order should be as in below:

<head>
  <script type="text/javascript" src="global.js"></script>
  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>

In case you are using Web Workers and want to include additional scripts in the scope of the worker, the other answers provided about adding scripts to the head tag, etc. will not work for you.

Fortunately, Web Workers have their own importScripts function which is a global function in the scope of the Web Worker, native to the browser itself as it is part of the specification.

Alternatively, as the second highest voted answer to your question highlights, RequireJS can also handle including scripts inside a Web Worker (likely calling importScripts itself, but with a few other useful features).

There is also Head.js. It is very easy to deal with:

head.load("js/jquery.min.js",
          "js/jquery.someplugin.js",
          "js/jquery.someplugin.css", function() {
  alert("Everything is ok!");
});

As you see, it's easier than Require.js and as convenient as jQuery's $.getScript method. It also has some advanced features, like conditional loading, feature detection and much more.

I have created a function that will allow you to use similar verbiage to C#/Java to include a JavaScript file. I've tested it a little bit even from inside of another JavaScript file and it seems to work. It does require jQuery though for a bit of "magic" at the end.

I put this code in a file at the root of my script directory (I named it global.js, but you can use whatever you want. Unless I'm mistaken this and jQuery should be the only required scripts on a given page. Keep in mind this is largely untested beyond some basic usage, so there may or may not be any issues with the way I've done it; use at your own risk yadda yadda I am not responsible if you screw anything up yadda yadda:

/**
* @fileoverview This file stores global functions that are required by other libraries.
*/

if (typeof(jQuery) === 'undefined') {
    throw 'jQuery is required.';
}

/** Defines the base script directory that all .js files are assumed to be organized under. */
var BASE_DIR = 'js/';

/**
* Loads the specified file, outputting it to the <head> HTMLElement.
*
* This method mimics the use of using in C# or import in Java, allowing
* JavaScript files to "load" other JavaScript files that they depend on
* using a familiar syntax.
*
* This method assumes all scripts are under a directory at the root and will
* append the .js file extension automatically.
*
* @param {string} file A file path to load using C#/Java "dot" syntax.
*
* Example Usage:
* imports('core.utils.extensions');
* This will output: <script type="text/javascript" src="/js/core/utils/extensions.js"></script>
*/
function imports(file) {
    var fileName = file.substr(file.lastIndexOf('.') + 1, file.length);

    // Convert PascalCase name to underscore_separated_name
    var regex = new RegExp(/([A-Z])/g);
    if (regex.test(fileName)) {
        var separated = fileName.replace(regex, ",$1").replace(',', '');
        fileName = separated.replace(/[,]/g, '_');
    }

    // Remove the original JavaScript file name to replace with underscore version
    file = file.substr(0, file.lastIndexOf('.'));

    // Convert the dot syntax to directory syntax to actually load the file
    if (file.indexOf('.') > 0) {
        file = file.replace(/[.]/g, '/');
    }

    var src = BASE_DIR + file + '/' + fileName.toLowerCase() + '.js';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;

    $('head').find('script:last').append(script);
}
共30条数据 1 3 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐