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


JavaScript中有类似的东西吗? @import 在CSS中允许您将JavaScript文件包含在另一个JavaScript文件中?


4158
2018-06-04 11:59


起源


stackoverflow.com/questions/21294/... - Daniel A. White
@Daniel,我不想使用AJAX调用。 - Alec Smart
为什么不在需要它的另一个文件之前声明导入的文件,只需使用ordered script 标签? - falsarella
@Claudiu那无济于事 进口 什么,但它也应该工作。如果你有一个依赖于另一个JS文件的JS文件,只需先声明依赖文件的脚本标记,这样后者就会加载它的依赖项。如果您的情况不是可行的方法,那么这里的答案应该会有所帮助。 - falsarella
这样做的实际优势是什么?无论如何,依赖于javascript文件的代码库不会加载并且在任何情况下都不会加载它开始工作! - Ciasto piekarz


答案:


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

但是最新版本的JavaScript有像这样的标准 ES6模块 导入模块,虽然大多数浏览器都不支持。很多人使用带浏览器应用程序的模块 建立 和/或 transpilation 使用具有模块等功能的新语法的实用工具。

ES6模块

请注意,目前,对ES6模块的浏览器支持并不是特别好,但它正在进行中。根据 这个StackOverflow的答案,它们在Chrome 61,Firefox 54中得到支持 dom.moduleScripts.enabled 设置 about:config)和MS Edge 16,只有Safari 10.1提供没有标志的支持。

因此,您目前仍需要使用构建和/或转换工具来运行有效的JavaScript,而无需用户使用这些浏览器版本或启用任何标志。

一旦ES6模块很常见,以下是您使用它们的方法:

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

Node.js需要

Node.js目前正在使用 module.exports /要求 系统。您可以使用 babel 如果你想要的话,就转移 import 句法。

// 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 还打开了通往错误,黑客和安全问题的大门。

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"); // Make a script DOM node
    script.src = url; // Set it's 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 attribute被设置为作为第一个参数赋予函数的URL。

这两种解决方案都在讨论和说明中 JavaScript疯狂:动态脚本加载

检测脚本何时执行

现在,您必须了解一个大问题。这样做意味着 你远程加载代码。现代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.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);
}

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

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

然后你运行所有:

loadScript("my_lovely_script.js", myPrettyCode);

请注意,脚本可以在DOM加载之后或之前执行,具体取决于浏览器以及是否包含该行 script.async = false;。有一个 关于Javascript加载的一篇很棒的文章 讨论这个。

源代码合并/预处理

正如在本答案的顶部所提到的,许多开发人员现在在他们的项目中使用像WebPack,Babel或Gulp这样的构建/转换工具,允许他们更好地使用新的语法和支持模块,组合文件,缩小等。


3586
2018-06-04 12:13



并非所有的javascript文件都在浏览器中执行。 - Michael Paulukonis
但是,有人使用像Rhino这样先进的东西,否则不会问这个问题。 - e-satis
为了完成,还有第三种方法:在某些解决方案中,当你控制两个javascript文件时,你可以制作一个巨大的javascript文件,它结合了两个文件的内容。 - Toad
不应该“document.createElement(”my_lovely_script.js“);”在示例中是“document.createElement(”script“)”? - Russell Silva
如果你正在执行你的代码,eval如何打开hack的大门? - Vince Panuccio


如果有人想要更先进的东西,请试试 RequireJS。您将获得额外的好处,例如依赖关系管理,更好的并发性,并避免重复(即,多次检索脚本)。

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

例:

将依赖项定义为模块:

一些-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文件 一些-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中   工作者,但它可以在其他JavaScript环境中使用,例如   犀牛和节点。它实现了异步模块API。

RequireJS使用普通脚本标签来加载模块/文件,所以它应该   允许轻松调试。它可以简单地用于加载现有的   JavaScript文件,所以 您可以将其添加到现有项目中   必须重写你的JavaScript文件。

...


514
2018-06-07 20:55



+1引用 对 做到这一点的方法:-)如果你包括一个例子会更好! - Sean Vieira
@Sean根据你的建议 - 我添加了一个简短的例子 - John Strickler
@aaaidan:MattDmo的原因加上它依赖于一个外部库,而后者依赖于已接受的答案。 - David Mulder
为了克服require.js,最新的是角度js,它更稳定,易于使用,还有其他绑定和丰富的HTML功能。 - zeeshan
-1:那些抽象 - “some_dependency” - 非常糟糕,索引增加了混乱。我很难理解工作代码示例的样子。如果作者提供了工作示例,几乎任何人都可以根据自己的需要进行定制和推广。 - Tegiri Nenashi


实际上  一种加载JavaScript文件的方法  异步,所以你可以在加载后立即使用新加载文件中包含的函数,我认为它适用于所有浏览器。

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

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

但是,此方法也存在问题:如果导入的JavaScript文件中发生错误, 萤火 (还有Firefox错误控制台和 Chrome开发者工具 如果你使用Firebug跟踪JavaScript错误很多(我这样做),这将是一个很大的问题。由于某种原因,Firebug根本不知道新加载的文件,因此如果该文件中发生错误,它会报告它发生在您的主文件中 HTML 文件,您将无法找出错误的真正原因。

但如果这对您来说不是问题,那么这种方法应该可行。

我实际上写了一个名为的jQuery插件 $ .import_js() 它使用这种方法:

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

我也做了一个简单的测试

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

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

包括之后 included.jshello() 函数被调用,你得到警报。

(这个答案是对e-satisf'评论的回应)。


162
2018-04-28 15:25



我正在尝试这种方法,但不适合我,元素只是没有出现在head标签中。 - juanpastas
@juanpastas - 使用 jQuery.getScript,这样你不必担心编写插件...... - MattDMo
在导入的脚本加载并执行之前,此技术是否真的会阻塞? - Flimm
嗯,据说 本文附加一个 script 元素来 head 会导致它以异步方式运行,除非 async 是专门设置为 false。 - Flimm
脚本变量不应该编码html实体吗?如果链接包含 ",代码会破裂 - Soaku


另一种方式,在我看来更清洁,是制作同步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);
        }
    });
}

然后,您可以在代码中使用它,因为您通常使用包含:

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

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

subscript.doSomethingCool(); 

134
2017-09-08 18:22



很好的解决方案,不幸的是头部包括async,ajax解决方案可行。 - Matteo Conta
正如其他人提到的那样,requirejs.org执行此操作并且还有一个预编译器将js文件放在一起,以便加载更快。你可能想看看。 - Ariel
发现我可以通过在Chrome文件底部添加此指令来调试它:// @ sourceURL = view_index.js - Todd Vance
不幸的是,async:false现在已经在jQuery中弃用了。未来可能会破裂,所以我会避免。 - sqram
@katsh我们这里没有使用jqXHR对象。您的报价似乎没有支持您之前的评论 async: false 据说已经弃用了。不是这样!正如你的引用所述,只有jqXHR相关的东西是。 - Zero3


有一个好消息要告诉你。很快您就可以轻松加载JavaScript代码了。它将成为导入JavaScript代码模块的标准方式,并将成为核心JavaScript本身的一部分。

你只需要写 import cond from 'cond.js'; 加载一个名为的宏 cond 从一个文件 cond.js

因此,您不必依赖任何JavaScript框架,也不必明确制作 阿贾克斯 调用。

参考:


86
2017-07-03 13:32



jsfile上的require / import在接下来的时间太长了。 (IMO)。 - rwheadon
@rwheadon是啊骇人听闻,这不是语言的一部分!如何让人们完成任何工作超出我的意义!我是新手,这似乎是最糟糕的(很多)疯狂的 - Jonny Leeds
@ jonny-leeds即使没有内置模块加载,浏览器中的JavaScript也足够灵活,我们可以为我们的模块管理实现像RequireJS这样的库。 - Keen
2015年中期 - 仍未在任何浏览器中实施, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... - scape
嗯你是对的。现在我开始为此感到难过:(。但是,一旦在所有浏览器中实现,这将是javascript内置的一个很棒的功能。 - Imdad


可以动态生成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");

72
2018-06-04 12:02



它确实有效,但由于异步负载而存在严重问题。 - e-satis
嗯...究竟是哪个? - Svitlana Maksymchuk
@ e-satisf - 实际上,这是一个优点,同步脚本会阻塞。课程的马匹,但10个中的9个你想要非阻塞选项。 - annakata
@Svitlana - 像这样创建的脚本元素是异步的。目前,这可能被视为利用漏洞,因此它可能不是未来的证据,我没有看到任何标准澄清这一点。 - annakata
@ e-satisf异步很好,因为它不会冻结你的页面。使用回调完成后会收到通知 js.onload = callback; - Vitim.us


声明 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;

58
2018-04-17 01:56



...但是根据您链接到的页面上的兼容性表,迄今为止任何浏览器都不支持。 - Zero3
您现在可以编写ES6代码并使用Babel.js进行编译(babeljs.io)无论您首选的当前模块系统是什么(CommonJS / AMD / UMD): babeljs.io/docs/usage/modules - Jeremy Harris
@ Zero3显然新的IE(Edge)是唯一的 - Julian Avar
有没有办法在没有ES6的情况下做到这一点?浏览器兼容性和那些没有ES6的人要求它。 - IamGuest