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

2018-05-28 23:10:07

JavaScript中是否有类似于@import的JavaScript代码，允许您在另一个JavaScript文件中包含JavaScript文件？

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

但是最近版本的JavaScript有类似ES6模块的标准来导入模块，尽管大多数浏览器都不支持这种模式。许多使用模块的浏览器应用程序都使用构建和/或转换工具，以便使用具有模块等功能的新语法。

ES6模块

请注意，目前，浏览器对ES6模块的支持不是特别好，但它正在发展中。根据这个StackOverflow答案，它们在Chrome 61，Firefox 54（在about:config的dom.moduleScripts.enabled设置后面）和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 / require系统。如果您需要import语法，您可以使用babel进行转储。

// 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.");
});

动态脚本加载

您可以将脚本标签添加到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属性设置为作为第一个参数提供给该函数的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);
}

然后你编写你想在脚本加载到lambda函数后使用的代码：

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

然后你运行所有这些：

loadScript("my_lovely_script.js", myPrettyCode);

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

源代码合并/预处理

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

如果有人正在寻找更高级的东西，请尝试使用RequireJS。您将获得附加益处，例如依赖关系管理，更好的并发性并避免重复（即多次检索脚本）。

您可以将您的JavaScript文件写入“模块”，然后将它们作为其他脚本中的依赖项引用。或者你可以使用RequireJS作为一个简单的“去获得这个脚本”的解决方案。

例：

将依赖关系定义为模块：

一些-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是依赖于某些dependency.js的 “主”JavaScript文件

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

我在示例中也对此进行了简单的测试。

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

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

在包含included.js ，调用hello()函数，并获得警报。

（这个回答是回应e-satis的评论）。

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

上一篇: How do I include a JavaScript file in another JavaScript file?

下一篇: How to check whether a file exists?