Javascript 在每个页面上加载脚本_Javascript_Html_Dom_Domdocument_Dom Manipulation

Javascript 在每个页面上加载脚本

javascript html dom

Javascript 在每个页面上加载脚本,javascript,html,dom,domdocument,dom-manipulation,Javascript,Html,Dom,Domdocument,Dom Manipulation,我有一个问题，就是在我所有的页面上加载相同的脚本，而不必一遍遍地定义它们我想出了一个半完整的解决方案，看起来像 var scriptLocs = []; function loadScripts() { for (var i = 0; i < scriptLocs.length; i++) { var crtElement = document.createElement('script'); crtElement.src = scriptLoc

我有一个问题，就是在我所有的页面上加载相同的脚本，而不必一遍遍地定义它们

我想出了一个半完整的解决方案，看起来像

var scriptLocs = [];

function loadScripts() {
    for (var i = 0; i < scriptLocs.length; i++) {
        var crtElement = document.createElement('script');
        crtElement.src = scriptLocs[i];
        var hh = document.getElementsByTagName('head')[0];
        // Getting head tag
        hh.appendChild(crtElement);
        //Adding it to head
    }
}

var scriptLocs=[]；
函数loadScripts（）{
对于（var i=0；i


数组可能非常大，例如大约120个脚本（2.5MB），其中包括jQuery和Knockout等
我遇到的问题是，这可能不可靠。我的函数似乎遗漏了，或者加载顺序与数组中定义的顺序不同。顺序非常重要，因为有些东西可能依赖于jQuery，所以必须在加载其他脚本之前加载它
而且每次刷新时都会出现不同的错误。。。例如，装货顺序可能不同
在一个元素中定义所有脚本，然后一次追加一批脚本，这样做有没有好处？这样行吗
更新：
使用这个test.js文件
for (var i = 0; i < scriptLocs.length; i++) {
    document.write("<script type=\"text/javascript\" src=\"" + scriptLocs[i] + "\"><\/script>");
}

for（变量i=0；i

把它作为第一件事放在脑子里就像
<!DOCTYPE HTML>
<html>
    <head>
        <title>Test</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="text/javascript" src="test.js"></script>


试验

似乎解决了这个问题
 有很多脚本，你也许应该考虑压缩和连接它们，并把它们作为一个简化的脚本来服务。
你可以这样做，例如：
 有很多脚本，你应该考虑压缩和连接它们，并把它们作为一个简化的脚本来服务。
您可以使用或执行以下操作：
听起来您正在寻找一种方法来声明依赖项并指定加载顺序，这是一种处理得非常好的方法。另外,
RequireJS有一个优化工具。。。[c] ombines
将相关脚本合并到构建层中，并通过
UglifyJS（默认）或闭包编译器（使用
Java）
这将允许您在应用程序的所有页面中包含一个缩小的脚本。
听起来您正在寻找一种方法来声明依赖项并指定加载顺序，这是一种处理得非常好的方法。另外,
RequireJS有一个优化工具。。。[c] ombines
将相关脚本合并到构建层中，并通过
UglifyJS（默认）或闭包编译器（使用
Java）
这将允许您在应用程序的所有页面中包含一个缩小的脚本。您是否检查了正在调用的脚本的大小？
数组将按照您的顺序进行，元素创建将按照您的顺序进行，但请记住，您是在javascript中调用它们的，因此它不会等待一个脚本加载，然后再加载另一个脚本，例如，如果您正在加载100 kb的jquery，并且您正在调用某个10 kb的本机脚本，因此，您的脚本将首先加载到jquery中。
添加属性async以使dom不等待脚本。是否检查了正在调用的脚本的大小？
数组将按照您的顺序进行，元素创建将按照您的顺序进行，但请记住，您是在javascript中调用它们的，因此它不会等待一个脚本加载，然后再加载另一个脚本，例如，如果您正在加载100 kb的jquery，并且您正在调用某个10 kb的本机脚本，因此，您的脚本将首先加载到jquery中。
您可以添加属性async，使dom不必等待脚本。
这就是document.write（）
的用途。它经常被误用，但在这种情况下，它是一个很好的选择：
var scriptLocs = [...];
for (var i = 0; i < scriptLocs.length; i++) {
    document.write("<script type=\"text/javascript\" src=\""+scriptLocs[i]+"\"><\/script>");
}

var scriptLocs=[…]；
对于（var i=0；i

但不要将其放入函数中或从事件处理程序调用它。此脚本应在加载页面时立即运行。加载dom后调用document.write（）
会导致问题。
这就是document.write（）
的用途。它经常被误用，但在这种情况下，它是一个很好的选择：
var scriptLocs = [...];
for (var i = 0; i < scriptLocs.length; i++) {
    document.write("<script type=\"text/javascript\" src=\""+scriptLocs[i]+"\"><\/script>");
}

var scriptLocs=[…]；
对于（var i=0；i

但不要将其放入函数中或从事件处理程序调用它。此脚本应在加载页面时立即运行。加载dom后调用document.write（）
会导致问题。
每次刷新时都会出现不同的错误。。。例如，可能不同的加载顺序？在使用串联时，您还可以省去另一件事；）你能再解释一下吗？你可以使用的另一个图书馆是。我没有亲自使用过，但它似乎是最合适的。所有这些工具的不同之处在于，不是手动维护脚本数组，而是每个脚本说出它需要什么并加载它。在这种情况下，它只是意味着将所有（缩小的）脚本放在一个大文件中。这不仅可以提高性能，还可以确保以正确的顺序加载脚本。而且每次刷新时都会出现不同的错误。。。例如，可能不同的加载顺序？在使用串联时，您还可以省去另一件事；）你能再解释一下吗？你可以使用的另一个图书馆是。我没有亲自使用过，但它似乎是最合适的。所有这些工具的不同之处在于，不是手动维护脚本数组，而是每个脚本说出它需要什么并加载它。在这种情况下，它只是意味着将所有（缩小的）脚本放在一个大文件中。这不仅可以提高性能，还可以确保脚本以正确的顺序加载。这就是我们现在正在做的，但例如，如果我们想添加一个新脚本，我们必须遍历每个页面并添加它…可以吗