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

时间:2017-04-04 10:00:04

标签: javascript dom

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

  1. 已加载窗口
  2. 创建了类SomeClass的对象(使用(2.1)一些属性,以及(2.2)使用AJAX动态加载的DOM元素)
  3. 具有这些DOM元素属性的东西可以选择
  4. 完成(转换等)

    像这样:

    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。

1 个答案:

答案 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();
    }
  }
}