尝试使用面向对象的 javascript 和 AJAX

Question

我正在尝试使用一些面向对象 Javascript 来保持我的代码干净，而不是像往常一样使用一个巨大而混乱的脚本。使用 Ajax 使事情变得复杂，具有异步性质，很难分离代码。

我遇到的一个具体问题是使用 Ajax.

设置对象属性

我有以下代码：

var Class = function(){
  this.attr1;
}

Class.prototype.setAttr1 = function(){
  var self = this;   
  $.ajax({
    url:'http://api.something.com?get=somedata',
    success: function(data){
      self.attr1 = data.name;
    }
  });
}

这应该有效，但我不能确定如果我从其他地方访问它属性是否已设置，对吗？有没有办法解决这个问题。就像我需要在某处使用 attr1 一样，我可以等待 ajax 到 return 什么的吗？或者，如果我完全不在乎，人们在使用 Ajax 时如何封装代码？

Answer 1

将需要与attr1一起工作的代码作为回调传递：

Class.prototype.setAttr1 = function(callback){
  var self = this;   
  $.ajax({
    url:'http://api.something.com?get=somedata',
    success: function(data){
      self.attr1 = data.name;
      if (callback)
        callback(self);
    }
  });
}

Answer 2

通常，您会：

传递回调或承诺，让您的代码等待设置值； jQuery 框架大量使用回调，但也 returns 来自其 AJAX 函数的承诺。
让您的对象在属性更改时引发事件。 Backbone 是大量使用事件的框架的一个很好的例子。

Answer 3

This should work, but I can't really be certain that the property is set if I access it from somewhere else, correct?

正确

Is there a way to deal with that. Like if I need to use attr1 somewhere, can I wait for the ajax to return or something?

是的：在您想使用 attr 的地方，让访问者接受回调（直接或间接通过返回承诺），并让它在属性时调用回调（或解析承诺）可用。

您似乎希望将启动 ajax 调用的代码与稍后使用属性值的代码分开。如果是这样，基于承诺的机制在这种情况下可能会更有用。当您使用 jQuery 时，这里有一个使用 jQuery 的 Deferred 和 Promise:

的 jQuery 示例

var Class = function(){
  this.attr1LoadDeferred = $.Deferred();
}

Class.prototype.setAttr1 = function(){
  var self = this;   
  $.ajax({
    url:'http://api.something.com?get=somedata',
    success: function(data){
      self.attr1 = data.name;
      self.attr1LoadDeferred.resolveWith(self);
    }
  });
}
Class.prototype.accessAttr1 = function() {
    return this.attr1LoadDeferred.promise();
};

用法：

// Create an instance
var c = new Class();

// At some point, initiate loading the value
c.setAttr1();

// At some point, look to use the value
c.accessAttr1().then(function(inst) {
    console.log(inst.attr1);
});

// Somewhere else, look to use the value
c.accessAttr1().then(function(inst) {
    doSomethingElseWith(inst.attr1);
});

不幸的是，jQuery 的 Deferred/Promise 实现有一个大多数承诺库没有的问题：你传递的回调 then 将有时被异步调用，其他时候被同步调用。（特别是：如果承诺已经解决，回调是同步的。）要么在使用它时记住这一点，要么使用不同的承诺实现。

尝试使用面向对象的 javascript 和 AJAX

Trying to use object oriented javascript and AJAX

javascript

oop

ajax