給定 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') 並相對同時地執行大量其他操作。 非常適合觀察者在完全任意的時間生生不息。

就最佳實踐而言，這取決於您要實現的目標。 如果您需要一個更明確的解決方案，您通常希望一次執行一個操作，請使用回調模式路線。 如果您需要在不同的地方發生多件事情，並且您特別不關心誰先處理事件的順序，請走觀察者模式路線。