Question

我正在编写一个类，在其属性中，有一个动态加载的DOM元素。这个流程的一个非常简单的概述：

已加载窗口
创建了类SomeClass的对象（使用（2.1）一些属性，以及（2.2）使用AJAX动态加载的DOM元素）
具有这些DOM元素属性的东西可以选择

像这样：

window.addEventListener("load",function(){ // Step 1
  someObject = new someClass("element_id") // Step 2.1
  someObject.loadToDOMThroughAJAX(function(){ // Step 2.2
      someObject.optionalMethodAfterConstruction(); // Step 3
  }); 
})

修改：optionalMethodAfterConstruction()的代码段：

someClass.prototype.optionalMethodAfterConstruction = function(){
  var element = this.element.querySelector(".someClass")
  element.setAttribute("transform","translate(20,20)")
}

Edit2：loadDOMThroughAjax()的摘录：

someClass.prototype.loadDOMThroughAjax= function(){
  obj = this;
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "/path/to/html", true);
  ajax.send();
  ajax.onload = function(e) {
    obj.element.innerHTML = ajax.responseText
  }
}

但是，当执行步骤3时，尚未在步骤2.2中加载DOM元素，这会导致步骤3失败，因为它依赖于成功的document.querySelector()调用。类.someClass的DOM元素是动态加载的，并且在调用该方法时应该存在，但事实并非如此。手动调用该方法确实有效。

我觉得我很接近，但我想知道如何正确地做到这一点以及我所缺少的。

我无法将它附加到构造函数本身，因为它不应该应用于每个对象，只是一些。

没有jQuery。

Answer 1

在第二次编辑中，我发现您实际上并没有在步骤2.2中将您发送的功能作为参数调用。

someObject.loadToDOMThroughAJAX(function(){ // Step 2.2
  someObject.optionalMethodAfterConstruction(); // Step 3
});

但你的功能如下：

someClass.prototype.loadDOMThroughAjax= function(){
  obj = this;
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "/path/to/html", true);
  ajax.send();
  ajax.onload = function(e) {
    obj.element.innerHTML = ajax.responseText
  }
}

您还应该将参数作为onload函数的参数调用：

someClass.prototype.loadDOMThroughAjax= function(CALLBACK){
  obj = this;
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "/path/to/html", true);
  ajax.send();
  ajax.onload = function(e) {
    obj.element.innerHTML = ajax.responseText
    if (someConditionIsTrue) {
      CALLBACK();
    }
  }
}

在Javascript中构建后立即调用对象方法

1 个答案: