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

【问题标题】：Trying to use object oriented javascript and AJAX尝试使用面向对象的 javascript 和 AJAX
【发布时间】：2015-04-24 22:28:22
【问题描述】：

我正在尝试使用一些面向对象的 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 返回吗？或者如果我完全不了解，人们在使用 Ajax 时如何封装代码？

【问题讨论】：

研究使用回调。回调与 AJAX 密切相关
异步代码不应该对任何语言的 OOP 代码产生影响。
出于好奇，您认为this.attr1; 行在您的Class 函数中的作用是什么？
有人争辩说，ajax 回调实际上简化了 JS 中的 OO 方法——您在完成 ajax 调用后立即创建一个对象。如果您需要在 ajax 调用之间进行同步，请使用 Promise（例如 perjQiery 的 Deferred 对象）。
我一直在其他领域使用回调，但这是一个可能会在所有地方都使用的类属性。我认为延迟和承诺是我正在寻找的。span>

标签： javascript ajax oop

【解决方案1】：

这应该可以，但是如果我从其他地方访问该属性，我真的不能确定它是否已设置，对吗？

正确

有没有办法解决这个问题。比如如果我需要在某个地方使用 attr1，我可以等待 ajax 返回吗？

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

您似乎希望将启动 ajax 调用的代码与稍后使用属性值的代码分开。如果是这样，基于 Promise 的机制在这种情况下可能会更有用。当您使用 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 实现有一个大多数 Promise 库没有的问题：您传递的回调 then 将有时被异步调用，其他时候同步调用。（特别是：如果 promise 已经被解析，回调是同步的。）要么在使用时记住这一点，要么使用不同的 promise 实现。

【讨论】：

这是一些有用的信息。非常感谢！我猜我需要兑现承诺。

【解决方案2】：

通常，您会：

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

【讨论】：

【解决方案3】：

将需要使用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);
    }
  });
}

【讨论】：