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

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

答案

JavaScript 的旧版本没有导入,包含或要求,因此已经开发了许多解决此问题的方法。

但是自 2015 年(ES6)起,JavaScript 就拥有了ES6 模块标准,可以在 Node.js 中导入模块, 大多数现代浏览器也支持该模块。

为了与旧版浏览器兼容,可以使用构建和 / 或编译工具。

ES6 模块

自 v8.5 起,带有--experimental-modules标志的 ECMAScript(ES6)模块已在 Node.js 中得到支持。涉及的所有文件都必须具有.mjs扩展名。

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

浏览器中的 ECMAScript 模块

Safari 10.1,Chrome 61,Firefox 60 和 Edge 16 开始,浏览器已经支持直接加载 ECMAScript 模块(不需要像 Webpack 这样的工具)。请在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);
}

https://jakearchibald.com/2017/es-modules-in-browsers/了解更多

浏览器中的动态导入

动态导入使脚本可以根据需要加载其他脚本:

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

前往https://developers.google.com/web/updates/2017/11/dynamic-import进一步了解

Node.js 要求

仍然在 Node.js 中广泛使用的旧式导入模块是module.exports / require系统。

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

JavaScript 还有其他方法可以在不需要预处理的浏览器中包含外部 JavaScript 内容。

AJAX 加载

您可以使用 AJAX 调用加载其他脚本,然后使用eval运行它。这是最直接的方法,但是由于 JavaScript 沙箱安全模型,它仅限于您的域。使用eval还打开了漏洞,黑客和安全问题的大门。

获取加载

像动态导入一样,您可以使用承诺通过Fetch Inject库控制对脚本依赖项的执行顺序,从而通过fetch调用来加载一个或多个脚本:

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQuery 加载

jQuery在一行中提供了加载功能:

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

动态脚本加载

您可以将带有脚本 URL 的脚本标签添加到 HTML 中。为了避免 jQuery 的开销,这是一个理想的解决方案。

该脚本甚至可以驻留在其他服务器上。此外,浏览器会评估代码。可以将<script>标记插入网页<head> ,也可以将其插入在结束</body>标记之前。

这是一个如何工作的示例:

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)
}

此函数将在页面头部的末尾添加一个新的<script>标记,其中src属性设置为该函数作为第一个参数给出的 URL。

JavaScript Madness:动态脚本加载中讨论和说明了这两种解决方案。

检测何时执行脚本

现在,您必须知道一个大问题。这样做意味着您需要远程加载代码 。现代的 Web 浏览器将加载文件并继续执行当前脚本,因为它们异步加载所有内容以提高性能。 (这适用于 jQuery 方法和手动动态脚本加载方法。)

这意味着,如果您直接使用这些技巧, 则在要求加载新代码之后将无法在下一行使用新加载的代码 ,因为它仍将加载。

例如: my_lovely_script.js包含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

然后,您按F5重新加载页面。而且有效!令人困惑...

那么该怎么办呢?

好吧,您可以使用作者在我给您的链接中建议的技巧。总而言之,对于有急事的人,他在加载脚本时使用事件来运行回调函数。因此,您可以将所有使用远程库的代码放入回调函数中。例如:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    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);
}

然后,在脚本加载到lambda 函数中之后,编写要使用的代码:

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

然后运行所有这些:

loadScript("my_lovely_script.js", myPrettyCode);

请注意,脚本可能在加载 DOM 之后或之前执行,具体取决于浏览器以及是否包含行脚本script.async = false;总的来说 ,有一篇很棒的文章介绍了 Javascript

源代码合并 / 预处理

如该答案的顶部所述,许多开发人员在其项目中使用了诸如 Parcel,Webpack 或 Babel 之类的构建 / 编译工具,从而允许他们使用即将到来的 JavaScript 语法,为较旧的浏览器提供向后兼容性,合并文件,缩小,执行代码拆分等

如果有人在寻找更高级的东西,请尝试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 文件。

...

实际上, 一种方法可以异步地加载 JavaScript 文件,因此您可以在加载后立即使用新加载的文件中包含的功能,而且我认为它在所有浏览器中都可以使用。

您需要在页面的<head>元素上使用jQuery.append() ,即:

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

但是,此方法也有一个问题:如果在导入的 JavaScript 文件中发生错误,则Firebug (以及 Firefox 错误控制台和Chrome 开发者工具 )也会错误地报告其位置,如果您使用 Firebug 进行跟踪,这将是一个大问题 JavaScript 错误很多(我愿意)。 Firebug 出于某种原因根本不了解新加载的文件,因此,如果该文件中发生错误,它将报告该错误是在您的主HTML文件中发生的,您将很难找出导致该错误的真正原因。

但是,如果这对您来说不是问题,则此方法应该有效。

我实际上已经编写了一个使用此方法的名为$ .import_js()的 jQuery 插件:

(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);

因此,导入 JavaScript 所需要做的就是:

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

我还在Example 上对此进行了简单测试。

它在主 HTML 中包含一个main.js文件,然后main.js的脚本使用$.import_js()导入一个名为included.js的附加文件,该文件定义了此功能:

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

在包含included.js ,立即调用hello()函数,您将收到警报。

(此答案是对 e-satis 的评论的回应)。

我认为更干净的另一种方法是发出同步 Ajax 请求,而不使用<script>标签。 Node.js处理的内容也包括在内。

这是使用 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);
        }
    });
}

然后,您可以像通常使用 include 那样在代码中使用它:

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

并能够在下一行中从所需脚本中调用函数:

subscript.doSomethingCool();

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

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

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

参考:

可以动态生成 JavaScript 标记并将其从其他 JavaScript 代码内部附加到 HTML 文档。这将加载目标 JavaScript 文件。

function includeJs(jsFilePath) {
    var js = document.createElement("script");

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

    document.body.appendChild(js);
}

includeJs("/path/to/some/file.js");

语句import在 ECMAScript 6 中。

句法

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;

也许您可以使用在此页面上找到的此功能, 如何在 JavaScript 文件中包含 JavaScript 文件?

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}

这是没有 jQuery同步版本:

function myRequire( url ) {
    var ajax = new XMLHttpRequest();
    ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
    ajax.onreadystatechange = function () {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4) {
            switch( ajax.status) {
                case 200:
                    eval.apply( window, [script] );
                    console.log("script loaded: ", url);
                    break;
                default:
                    console.log("ERROR: script not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

请注意,要获得此有效的跨域服务,服务器将需要在其响应中设置allow-origin标头。

我刚刚编写了以下 JavaScript 代码(使用Prototype进行DOM操作):

var require = (function() {
    var _required = {};
    return (function(url, callback) {
        if (typeof url == 'object') {
            // We've (hopefully) got an array: time to chain!
            if (url.length > 1) {
                // Load the nth file as soon as everything up to the
                // n-1th one is done.
                require(url.slice(0, url.length - 1), function() {
                    require(url[url.length - 1], callback);
                });
            } else if (url.length == 1) {
                require(url[0], callback);
            }
            return;
        }
        if (typeof _required[url] == 'undefined') {
            // Haven't loaded this URL yet; gogogo!
            _required[url] = [];

            var script = new Element('script', {
                src: url,
                type: 'text/javascript'
            });
            script.observe('load', function() {
                console.log("script " + url + " loaded.");
                _required[url].each(function(cb) {
                    cb.call(); // TODO: does this execute in the right context?
                });
                _required[url] = true;
            });

            $$('head')[0].insert(script);
        } else if (typeof _required[url] == 'boolean') {
            // We already loaded the thing, so go ahead.
            if (callback) {
                callback.call();
            }
            return;
        }

        if (callback) {
            _required[url].push(callback);
        }
    });
})();

用法:

<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
    require(['foo.js','bar.js'], function () {
        /* Use foo.js and bar.js here */
    });
</script>

要点: http : //gist.github.com/284442