Question

我的HTML模板底部有一堆JavaScript链接。我想创建一个单独的JavaScript文件，该文件只包含其中的所有源链接。

因此，我想要一个JavaScript文件中的所有链接，而不是混乱我的模板页脚。我怎样才能做到这一点？

我真正想问的是我如何获得与JavaScript的CSS @import 功能类似的效果。

如果不可能，我可以在不同HTML文件的模板页脚上放置一块HTML吗？

Answer 1

您可以使用ajax执行此操作，但一种简单的方法是使用jquery

添加它们

$('.div').append('<script src="myscript.js"></script>');

希望有所帮助

Answer 2

您可以在其中创建单独的js文件和object。此对象可以有多个键，它们的值将是这些链接。从文件

返回此对象

希望此代码段有用

<强> linkFile.js

var AllLinks = function(){
var _links ={};
_links.keyOne ="link1";
_links.keyTwo ="link2";
return {
 links:_links
 }
}

还使用script标记包含此文件在其他文件中，您可以将此值检索为

AllLinks.links.keyOne＆amp;等等

Answer 3

拥有一个包含脚本文件链接的数组，然后您有两个选项可以使用$.getScript()加载每个文件或者通过构建HTML并将其附加到head或body标记。我更喜欢head标记来保留所有脚本和css文件。

您的脚本文件数组

 var JsFiles = ["script1.js","script2.js","script3.js","script4.js"];

的第一种方法

JsFiles.each(function(i,v){
  $.getScript(JsFiles[i], function( data, textStatus, jqxhr){
     console.log( textStatus ); // Success
  });
});

上述方法的

缺点是getScript对您的脚本文件进行异步调用，这意味着script2.js是否依赖于script1.js（例如，如果script1.js是一些在script2.js中使用初始化的插件文件，那么您将遇到问题。

要想克服，您可能必须使用Promises或在每个getScript成功函数上写回调，这将触发下一个脚本加载等等。

如果脚本加载的顺序不重要，那么上面的方法就好了。

构建HTML的第二种方法

var scriptTags ="";
JsFiles.each(function(i,v){
     scriptTags += "<script src='"+ JsFiles[i] +"'></script>";
});
$('head').append(scriptTags);

这种方法的好处是脚本文件现在将同步加载，您将不会遇到依赖性问题。但要确保独立文件从第一个开始，依赖文件最后出现。