在Javascript中構建它後調用對象方法

Question

我正在寫一個類，它的屬性中包含一個動態加載的DOM元素。一個非常簡單的這種流動的概述：

1. 窗口加載
2. SomeClass類的對象被創建（帶（2.1）的一些屬性，以及（2.2）一個DOM元素使用AJAX動態加載）
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中，DOM元素尚未在步驟2.2，加載哪個導致步驟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(); 
    } 
    } 
}