javascript - 从 $.ajax({ 成功 : function() }) dungeon

Question

所以我有一个常见的场景，其中一切都取决于 AJAX 响应，然后可能是更多的 AJAX 响应。

最终发生的事情是在 success() 回调中抛出大量的演示(特定于页面的)代码:

 $.ajax({
     ...
     success: function (response) {
         // too much $('#something').html() crap goes in here!
     }
 });

从表示代码中完全删除此“数据访问”代码但保持加载顺序的最佳做法是什么？

我已经使用了像 $.when().then() 这样的延迟调用，但对我来说这仍然显得草率。有没有更好的？

为了让答案更简单，假设我想检索有关 Person 对象的信息并将所有这些逻辑隔离到它自己的区域中。示例:

注意:此代码将不起作用 - 我知道这一点

Person.js:

var Person = {
    getByID: function(id) {
        // ajax call to return a person object (format is arbitrary)
        //   { id: 12345, name: 'Joe Smith', email: 'joe@smith.com }
    }
};

SomePage.html

var myID = 12345;  // get ID from wherever
var person = Person.getByID(myID);
$('#person .name').html(person.name);
$('#person .email').html(person.email);

---

编辑:我的解决方案

虽然许多答案很有帮助，但我还是选择传递回调函数，将所有不同的逻辑部分彼此分开。示例代码:

JS:

Person = {
    get: function(params, callback) {
         $.ajax({
            url: '/person/get',
            data: params,
            success: callback
         });
    }
};

Pages = {
    Person: {
        render: function(person) {
           // in reality I'm using templates, this is for simplicity
           $('#person .name').html(person.name);
           $('#person .email').html(person.email);
        }
    }
};

SomePage.html

$('#someElement').someEvent(function() {
    var params = {
        id: 12345
    };

    Person.get(params, Pages.Person.render);
}

我还应该补充一点，我发现这个幻灯片非常有用:

http://speakerdeck.com/u/addyosmani/p/large-scale-javascript-application-architecture

Answer 1

你必须在成功回调中有一些东西，但你不需要那里的演示细节。成功调用可以简单地调用:

Person.render(attributes, element)

细节将在渲染函数中。