如何从另一个加载一个JavaScript文件？

How do you load one JavaScript file from another JavaScript file, like CSS? In CSS we use write @import url("mycss.css");.

如何从另一个JavaScript文件加载一个JavaScript文件，如CSS？在CSS中我们使用write @import url（“mycss.css”）;.

Is there any way to do it in JavaScript?

有没有办法在JavaScript中做到这一点？

5 个解决方案

#1

Yes. If you want in pure JavaScript, you have to create dynamically a script tag, and append it to the document.

是。如果您想要纯JavaScript，则必须动态创建脚本标记，并将其附加到文档中。

Yes. If you use the jQuery library, you can use the $.getScript method.

是。如果使用jQuery库，则可以使用$ .getScript方法。

$.getScript("another_script.js");

#2

There's no @import-ish function/method in Javascript, but you can simply append a script to the <head> tag like so:

在Javascript中没有@ import-ish函数/方法，但您可以简单地将脚本附加到标记，如下所示：

var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/path/to/js/file';
document.getElementsByTagName('head')[0].appendChild(newScript);

Or like Edgar mentioned right before me you can use jQuery.

或者就像Edgar在我之前提到的那样你可以使用jQuery。

#3

Just because no-one has mentioned it yet, there's another option, which doesn't require any fancy libraries or tricky coding, document.write. In principal, it would look like this, although see below for a caveat:

仅仅因为没有人提到它，还有另一种选择，它不需要任何花哨的库或棘手的编码，document.write。原则上，它看起来像这样，虽然请参阅下面的警告：

document.write('<script src="myscript.js" type="text/javascript"></script>');

This will be executed upon completely parsing the script tag, and if you put your script tag in the head, the new script tag will also be in the head, right after the one being executed. Take care to execute it directly rather than when the document has been loaded (as in a $(function(){}) callback. This is what I use:

这将在完全解析脚本标记时执行，如果您将脚本标记放在头部，新脚本标记也将在执行一个标记之后。注意直接执行它而不是在加载文档时（如$（function（）{}）回调。这是我使用的：

(function(){
  function load(script) {
    document.write('<'+'script src="'+script+'" type="text/javascript"><' + '/script>');
  }

  load("script1.js");
  load("script2.js");
  load("etc.js");
})();

The enclosing function is just there to not pollute the global namespace.

封闭函数就是不污染全局命名空间。

The caveat (and why the 'script' that is broken up above) is that there may be no ending script tags within a script tag, the HTML parser doesn't know it's part of the script. There's an other question on that subject.

警告（以及为什么上面分解的'脚本'）是脚本标签中可能没有结束脚本标签，HTML解析器不知道它是脚本的一部分。关于这个问题还有另外一个问题。

#4

Javascript itself doesn't provide any help with modularization other than the ability to eval a string. But this is a common-enough need that most big javascript frameworks have come up with their own solutions, and more recently, there has been an effort to standardize those APIs in the requirejs project. If you're using a framework like Dojo or jQuery, you're probably just best off learning to use their facilities, but if not, requirejs is a lightweight standalone tool. You basically just add

除了评估字符串的能力之外，Javascript本身不提供任何模块化帮助。但这是一个普遍的需求，大多数大型javascript框架都提出了自己的解决方案，最近，我们一直在努力在requirejs项目中标准化这些API。如果您正在使用像Dojo或jQuery这样的框架，那么您可能最好学会使用它们的设施，但如果没有，requirejs就是一个轻量级的独立工具。你基本上只是添加

<script data-main="scripts/main" src="scripts/require.js"></script>

to your <head> section, and then put your own javascript inside some wrapper code like this (stolen from the require.js site):

到你的部分，然后将你自己的javascript放在一些像这样的包装器代码中（从require.js站点窃取）：

require(["helper/util"], function() {
    //This function is called when scripts/helper/util.js is loaded.

    require.ready(function() {
        //This function is called when the page is loaded
        //(the DOMContentLoaded event) and when all required
        //scripts are loaded.

    });
});

#5

use const dataName =require('./fileName.js');

使用const dataName = require（'。/ fileName.js'）;

#1