JavaScript中的属性初始化

Question

我在JavaScript中创建了一个类,如下所示:

var Test = function(){
    this.element = null;
    this.init = function() {
        if(Test.html == "") {
            Test.loadHtml(this);
            return;
        }
        this.initElements();
        this.someMethodInternalCall();
    };
    this.initElements = function() {
        // append the loaded html to body
        // etc...
        this.element = $("some-element-contained-in-loaded-html-apended-to-body");
    }
    this.someMethodInternalCall = function() {
        this.element.css({some:style}); // works in this place
    }
    this.someMethodExternalCall = function() {
        this.element.css({some:style}); // dosn't work in this place
        // I mean here this.element is null. WHY?
    }
};
Test.html = "";
Test.loadHtml = function() {
    // load html content by an ajax request (jQuery $.ajax method)
    // and put it in Test.html
    // then recall the Test.init ethod
    return function(caller) {
        Test.html = // load html by ajax... etc...
        caller.init();
    };
}();

function someUsage(){
    var t = new Test();
    t.init();
    t.element.css({some:style}); // error: t.element is null WHY?
    t.someMethodExternalCall(); // error: this.element is null WHY?
}

如您所见,我在上面的代码中解释.为什么我们在初始化后设置属性时,它只会在内部调用中生效？如何创建一个可以改变其价值的属性？

更新:

似乎我必须解释我的代码.探针是关于element财产,而Test.html不是Test.loadHtml方法或调用它.Test.loadHtml当前被解雇(你可以测试它)并Test.html获取加载的html和加载的html被附加到body等等.这是一种JavaScript模式(我忘了它的名字)并且当前正在工作.唯一错误的是关于属性初始化 - element.

Answer 1

问题是异步性.当您要通过AJAX加载HTML时,该功能的其余部分将继续...

function someUsage(){
  var t = new Test();
  t.init();
  // The following carries on whilst the request is loading it does not wait
  t.element.css({some:style}); // This is why I am null
  t.someMethodExternalCall(); // This is why I am also null
}

为了解决这个问题,您可以使用回调...

function someUsage(){
  var t = new Test();
  t.init(function() {
    // I do not continue until the loadHtml request has completed
    t.element.css({some:style}); // I am not null anymore
    t.someMethodExternalCall(); // I am not null anymore
  });
}

您需要修改init函数和loadHtml函数来调用回调而不是调用者对象的init方法,init函数......

this.init = function(callback) {

  // Using blank Test.html to determine whether the html has been loaded
  if(Test.html == "") {
    var me = this;

    // Call loadHtml with a callback function
    Text.loadHtml(function() {

      // I want to keep the this reference to the object and callback argument
      me.init(callback);
    });

  // It is loaded so continue set up and then trigger the callback
  } else {
    this.initElements();
    this.someMethodInternalCall();
    callback();
  }
};

如果您创建了许多这些Test类,那么仍然会出现问题,因为每个Test都会尝试获取HTML,而其他类正在加载.

要解决这个问题,您只需要有一个由第一个调用设置的标志.任何后续调用都会被忽略,但会记录回调,以便在HTML完成加载时调用...

Test.loadHtml = function(callback) {

  // If already loading roll up callbacks
  if(Test.loading) {

    // Callback becomes a function that calls the original callback function 
    // and then the new one
    Test.callback = (function(original) {
      return function() {
        original();
        callback();
      }
    }) (Test.callback);

  // First time it has been called set the flag to prevent multiple loads 
  // and add the callback
  } else {
    Test.loading = true;
    Test.callback = callback;

    // Added to illustrate the AJAX callback functionality
    ajax("html", function(response) {
      Test.html = response;
      Test.callback();
    });
  }
}();

首选方法是在实例化时强制执行对象有效性,这可以防止这些竞争条件.如果无法有效地构造类,则抛出错误,这会从类中移动操作顺序的复杂性.正如你在下面看到的那样,它不是那么漂亮,你必须自己调用加载步骤(或者让别的东西触发它).

new Test(); // Errors not loaded!
// We must perform the load step to use the class
Test.load(function() {
  new Test(); // Works!
});

更优雅的解决方案,特别是对于大型应用程序,涉及管理对类的访问.如果没有先执行加载步骤,则无法访问该类,这会强制在实例化类之前始终完成加载.

// views is some object managing the loading of view classes when asked for
// one or more views it will load the required HTML and return the class(es)
// so we can create instances...
views.load("Test", function(Test) {
  var t = new Test();
  t.element.css({some: style});
  t.someMethodExternalCall();
});