给定 jQuery 中的回调模式和观察者模式，哪个更受欢迎？

Question

我正试图围绕回调和事件。 每个都有两种常见的模式。 哪一种被认为是最佳实践，为什么？

我有一段面向回调的代码如下：

$(function() {
  console.log('Document ready');
  getData();
})

function getData(){

  var url = "http://ip.jsontest.com/";  

  $.ajax({
      dataType: "json",
      url: url,
      success: function(data){
        buildElements(data, writeData)
      }
  });
}

function buildElements(data, callback) {
  $('div.foo').append("<div class='bar'></div>");
  callback(data);
}

function writeData(data){
  $('div.bar').append('<p>Your IP is ' + data.ip + '</p>');
}

然后是一段面向事件的代码（遵循观察者模式）如下：

$(function() {
  console.log('Document ready');
  getData();
})

function getData(){

  var url = "http://ip.jsontest.com/";  

  $.ajax({
      dataType: "json",
      url: url,
      success: function(data){
        $('div.foo').trigger('getDataDone', data);
      }
  });
}

//build elements
$('div.foo').on('getDataDone', function(event, data) {
  $('div.foo').append("<div class='bar'></div>")
  $('div.foo').trigger('elementsBuilt', data);
})

//write data
$('div.foo').on('elementsBuilt', function(event, data) {
  $('div.bar').append('<p>Your IP is ' + data.ip + '</p>');     
}) 

Answer 1

面向事件提供了更松散的耦合，因此它有好处，但同时它更难跟踪系统的哪些部分进行通信，因此您可能不想为您的项目开发一些工具来记录和检查您的哪些组件系统发出事件并对事件作出反应。

您可能希望对哪些组件可以附加事件处理程序保持一些纪律。 我已经看到，最好不要在叶组件中附加事件，而是在其父组件中执行此操作，以响应事件调用适当的子组件方法。

你可能不想看承诺。 它比回调更宽松，但同时它们显式地传递给您的代码，因此只需查看源代码就可以更轻松地跟踪发生的情况。

承诺示例：

$(function() {
  console.log('Document ready');
  gettingData()
    .done(function(data) {
      buildingElements(data)
        .done(writeData);
    });

//// alternatively:
//gettingData()
//.then(buildingElements)
//.done(writeData);
})

function gettingData(){

  var url = "http://ip.jsontest.com/";  

  // $.ajax returns a promise
  return $.ajax({
      dataType: "json",
      url: url
  });
}

function buildingElements(data) {
  $('div.foo').append("<div class='bar'></div>");

  // returns immediately resolved promise, but it could return a promise but resolve it asynchronously later
  return $.Deferred().resolve(data).promise();
}

function writeData(data){
  $('div.bar').append('<p>Your IP is ' + data.ip + '</p>');
}

js小提琴

Answer 2

回调模式的程序性质允许您更严格地定义程序流。 逻辑将是：

• 做点什么
• 完成后（它可以应用于 ajax 或其他），做下一个定义的事情。

等等。 这对于 ajax 调用非常有效，因为该执行路径易于维护。

观察者模式允许多个侦听器对事件采取行动（他们正在观察变化）。 所以它看起来像：

• 做点什么
• 完成后，引发事件并忘记它
• 观察者会做出反应并从那里拿走它

因此，在您的观察者示例中，您可以轻松拥有更多 .on('elementsBuilt') 并相对同时地执行大量其他操作。 非常适合观察者在完全任意的时间生生不息。

就最佳实践而言，这取决于您要实现的目标。 如果您需要一个更明确的解决方案，您通常希望一次执行一个操作，请使用回调模式路线。 如果您需要在不同的地方发生多件事情，并且您特别不关心谁先处理事件的顺序，请走观察者模式路线。