我正在编写一个类,在其属性中,有一个动态加载的DOM元素。这个流程的一个非常简单的概述:
SomeClass
的对象(使用(2.1)一些属性,以及(2.2)使用AJAX动态加载的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。
答案 0 :(得分: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();
}
}
}