Question

我正在尝试开发一个用javascript制作的页面构造函数。当我在页面上动态添加2个依赖于另一个脚本的脚本时，就会出现问题。在这个例子中，我从CDN加载jQuery，在第二个脚本中，我调用jQuery函数来修改标题的文本，并且，因为第一个尚未加载，我得到错误axios。

最好的方法是什么？也许等待加载下一个脚本，直到上一个脚本被加载？

一个提示，我不想使用像RequireJS这样的外部库（这需要在每次插件更新时更新页面，在这种情况下永远不可能）。

示例

这是我的 JS课程：

ReferenceError: $ is not defined

最后我创建一个页面并添加两个脚本：

NS.Script = function(nHasCode, nType, nSrc, nContent){
  this.hasCode = nHasCode;
  this.src = nSrc;
  this.type = nType;
  this.content = nContent;
};

NS.Page = function(){
  this.id;
  this.isIndex;
  this.title;
  this.metas = [];
  this.links = [];
  this.styles = [];
  this.scripts = [];
  this.body;
};

NS.Page.prototype.addScript = function(hasCode, type, src = null, content = null){
  var aux = new NS.Script(hasCode, type, src, content);
  var pageScripts = this.scripts;
  pageScripts.push(aux);
};

NS.Pages = {
  load: function(page){
    //document.write(page.body);
    document.body.innerHTML = page.body;
    document.title = page.title;
    page.scripts.forEach(function(pageScript) {
      if(pageScript.hasCode){
        document.write("<script type="+pageScript.type+">"+pageScript.content+"<\/script>");
      }else{
        var s = document.createElement( 'script' );
        s.setAttribute( 'type', pageScript.type );
        s.setAttribute( 'src', pageScript.src );
        if (s.readyState){  //IE
          script.onreadystatechange = function(){
            if (s.readyState == "loaded" ||
                    s.readyState == "complete"){
              s.onreadystatechange = null;
              //maybe here I have to call the script load of every dependance
            }
          };
        } else {  //Others
          s.onload = function(){
            //callback();
            //maybe here I have to call the script load of every dependance
          };
        }
        document.getElementsByTagName("head")[0].appendChild( s );
      }
    });
  }
};

Answer 1

看起来像鸡和蛋的问题。它源于动态插入的<script>标签获得默认＆＃34; async＆＃34;财产，并以不可预测的顺序执行。根据{{3}}，您可以请求同步它们：

var s = document.createElement( 'script' );
s.setAttribute( 'type', pageScript.type );
s.setAttribute( 'src', pageScript.src );
s.async = false;

Answer 2

<script type="text/javascript">
function loadJavaScriptSync(filePath)
{
    var req = new XMLHttpRequest();
    req.open("GET", filePath, false); // 'false': synchronous.
    req.send(null);

    var headElement = document.getElementsByTagName("head")[0];
    var newScriptElement = document.createElement("script");
    newScriptElement.type = "text/javascript";
    newScriptElement.text = req.responseText;
    headElement.appendChild(newScriptElement);
}

loadJavaScriptSync("file1.js");
loadJavaScriptSync("file2.js");
</script>

代码摘录自：http://trevweb.me.uk/javascripthtml-synchronous-and-asynchronous-loading/

Javascript - 使用依赖项动态加载页面上的多个脚本

2 个答案: