如何从另一个加载一个 JavaScript 文件?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5892845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load one JavaScript file from another?
提问by Vins
How do you load one JavaScript file from another JavaScript file, like CSS?
In CSS we use write @import url("mycss.css");
.
如何从另一个 JavaScript 文件(如 CSS)加载一个 JavaScript 文件?在 CSS 中,我们使用 write @import url("mycss.css");
。
Is there any way to do it in JavaScript?
有没有办法在 JavaScript 中做到这一点?
回答by musicinmyhead
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 函数/方法,但您可以简单地将脚本附加到<head>
标记中,如下所示:
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。
回答by Edgar Villegas Alvarado
Yes. If you want in pure JavaScript, you have to create dynamically a script
tag, and append it to the document.
是的。如果您想使用纯 JavaScript,您必须动态创建一个script
标签,并将其附加到文档中。
Yes. If you use the jQuery library, you can use the $.getScript
method.
是的。如果您使用 jQuery 库,则可以使用该$.getScript
方法。
$.getScript("another_script.js");
回答by falstro
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:
这将在完全解析 script 标签后执行,如果你把你的 script 标签放在 head 中,新的 script 标签也将在 head 中,就在被执行的那个之后。注意直接执行它,而不是在加载文档时执行它(如在$(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 questionon that subject.
警告(以及上面分解的“脚本”的原因)是脚本标签中可能没有结束脚本标签,HTML 解析器不知道它是脚本的一部分。这里有一个其他问题,在这个问题上。
回答by gsteff
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 requirejsproject. 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
除了eval
字符串的能力之外,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):
到您的<head>
部分,然后将您自己的 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.
});
});
回答by user9975942
use const dataName =require('./fileName.js');
用 const dataName =require('./fileName.js');