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

JavaScript中是否有类似于CSS中@import的内容，可让您在另一个JavaScript文件中包含一个JavaScript文件？

---

#1楼

而不是在运行时添加，而是使用脚本在上传之前进行串联。

我使用链轮 （我不知道是否还有其他链轮 ）。 您将JavaScript代码构建在单独的文件中，并包含由Sprockets引擎处理的注释（包括）。 对于开发，您可以依次包含文件，然后在生产中将它们合并...

也可以看看：

• Sprockets简介：JavaScript依赖关系管理和串联

---

#2楼

如果有人在寻找更高级的东西，请尝试RequireJS 。 您将获得更多好处，例如依赖管理，更好的并发性，并避免重复（也就是说，多次检索脚本）。

您可以在“模块”中编写JavaScript文件，然后在其他脚本中将它们作为依赖项引用。 或者，您可以将RequireJS用作简单的“获取此脚本”解决方案。

例：

将依赖项定义为模块：

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是您的“主要” JavaScript文件，它取决于some-dependency.js

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

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

摘自GitHub自述文件：

RequireJS加载普通的JavaScript文件以及更多定义的模块。 它针对浏览器内使用进行了优化，包括在Web Worker中使用，但可以在其他JavaScript环境（例如Rhino和Node）中使用。 它实现了异步模块API。

RequireJS使用简单的脚本标签来加载模块/文件，因此应便于调试。 它可以简单地用于加载现有的JavaScript文件，因此您可以将其添加到现有项目中，而无需重新编写JavaScript文件。

...

---

#3楼

有个好消息对你来说。 很快，您将能够轻松加载JavaScript代码。 这将成为导入JavaScript代码模块的标准方法，并将成为核心JavaScript本身的一部分。

您只需import cond from 'cond.js';编写import cond from 'cond.js'; 从文件cond.js加载名为cond的宏。

因此，您不必依赖任何JavaScript框架，也不必显式进行Ajax调用。

参考：

• 静态模块分辨率

• 模块装载机

---

#4楼

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

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

document.body.appendChild(js);

---

#5楼

应该这样做：

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);

---

#6楼

我编写了一个简单的模块，该模块可以自动执行导入/包含JavaScript中的模块脚本的工作。 有关代码的详细说明，请参阅博客文章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);
};

---

#7楼

我通常的方法是：

var require = function (src, cb) {
    cb = cb || function () {};

    var newScriptTag = document.createElement('script'),
        firstScriptTag = document.getElementsByTagName('script')[0];
    newScriptTag.src = src;
    newScriptTag.async = true;
    newScriptTag.onload = newScriptTag.onreadystatechange = function () {
        (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb());
    };
    firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag);
}

它的效果很好，对我来说不需要任何页面重载。 我已经尝试过AJAX方法（其他答案之一），但它似乎对我来说效果不佳。

这是代码对好奇的人如何工作的解释：从本质上讲，它会创建URL的新脚本标签（在第一个脚本标签之后）。 它将其设置为异步模式，因此它不会阻塞其余代码，但是会在readyState（要加载的内容的状态）更改为“已加载”时调用回调。

---

#8楼

此处显示的大多数解决方案都暗含动态载荷。 我搜索的是一个将所有依赖文件组合成单个输出文件的编译器。 与