javascript - 在 Javascript 中构造对象后立即调用对象方法

Question

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

1. 窗口已加载
2. 创建 SomeClass 类的对象(使用 (2.1) 一些属性，以及 (2.2) 使用 AJAX 动态加载的 DOM 元素)
3. 可以选择对这些 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();
    }
  }
}