我如何在另一个JavaScript文件中添加一个JavaScript文件,类似于CSS中的 @import?
当前回答
所以,如果你想要它快,容易......试试这个:
function include(filename)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.appendChild(script)
}
其他回答
请注意,我们通常使用静态脚本,所以我们希望尽可能多地从缓存中获取。
这节省了网络流量,加速着陆。
使用
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
console.log( textStatus );
});
存储:真实的选项已添加到 Ajax 方法。
如果你想要它在纯粹的JavaScript,你可以使用document.write。
document.write('<script src="myscript.js" type="text/javascript"></script>');
如果您使用 jQuery 图书馆,您可以使用 $.getScript 方法。
$.getScript("another_script.js");
ES6 模块
是的,在脚本标签(支持)中使用 type="module" :
<script type="module" src="script.js"></script>
在一个 script.js 文件中包含另一个文件如下:
import { hello } from './module.js';
...
// alert(hello());
在“module.js”中,您必须导出您将导入的函数/类:
export function hello() {
return "Hello World";
}
這裡有一個工作例子。
对于 Node.js 而言,这对我来说是最好的!
我在这里尝试了很多解决方案,但没有一个帮助我只是能够在没有改变范围的情况下加载另一个文件。
const fs = require('fs');
eval(fs.readFileSync('file.js') + '');
$("head").append($("<script></script>").attr("src", url));
/* Note that following line of code is incorrect because it doesn't escape the
* HTML attribute src correctly and will fail if `url` contains special characters:
* $("head").append('<script src="' + url + '"></script>');
*/
但是,这个方法也有一个问题:如果一个错误发生在进口的JavaScript文件,Firebug(以及Firefox Error Console和Chrome Developer Tools也)将报告其位置错误,这是一个很大的问题,如果你使用Firebug跟踪JavaScript错误很多(我做)。
但是,如果这不是一个问题,那么这个方法应该工作。
我實際上寫了一個名為 $.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></script').attr('src', script));
import_js_imported.push(script);
}
}
});
})(jQuery);
因此,所有你需要做才能进口JavaScript是:
$.import_js('/path_to_project/scripts/somefunctions.js');
我也做了一个简单的测试为这个例子。
它包含主.js 文件在主 HTML 中,然后在主.js 中的脚本使用 $.import_js() 来导入一个名为 included.js 的额外文件,该文件定义了此功能:
function hello()
{
alert("Hello world!");
}
(这个答案是回复e-satis的评论)。