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>'); 
} 

와 event-oriented piece of code을 (관찰자 패턴 다음)은 다음과 같습니다 :

$(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

이벤트 지향은 장점이 있습니다, 그래서 더 느슨한 결합을 제공하며, 다음과 같이

은 내가 callback-oriented piece of code이 동시에 시스템의 어느 부분이 통신하는지 추적하기가 더 어려워 져서 프로젝트의 어떤 구성 요소가 이벤트를 발생시키고 이벤트에 반응 하는지를 기록하고 검사하는 프로젝트를위한 도구를 개발하지 않을 수도 있습니다.

이벤트 처리기를 연결할 수있는 구성 요소에 대해 자세히 알고 싶을 수 있습니다. 나는 리프 구성 요소에 이벤트를 첨부하지 말고 이벤트에 응답하여 적절한 어린이 메소드를 호출하는 부모의 이벤트를 수행하는 것이 좋습니다.

약속을 살펴 보지 못할 수도 있습니다. 콜백보다 느슨하지만 동시에 코드를 명시 적으로 전달하므로 소스 코드를보고 어떤 일이 발생하는지 쉽게 추적 할 수 있습니다. 약속과

예 :

$(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>'); 
} 

jsFiddle

Answer 2

콜백 패턴의 다소 절차 적 성격은 좀 더 엄격하게 프로그램의 흐름을 정의 할 수 있습니다. 논리는 다음과 같습니다 그가 (이 그렇지 아약스하거나 적용 할 수 있습니다) 다음의 정의 일을 완료 때

• 뭔가를
• 을한다.

등등. 이는 실행 경로가 유지하기가 쉽기 때문에 Ajax 호출에 대해 훌륭하게 작동합니다.

관찰자 패턴을 사용하면 여러 청취자가 이벤트를 수행 할 수 있습니다 (변경 사항을 관찰하고 있음). 당신은 그것을

관찰자가 반응하여 관찰자의 예에 따라서

거기에서 걸릴 것에 대해

• 이 완료 때, 뭔가를
• 을 이벤트를 발생 잊지 : 그래서 같은 것이 보인다 상대적으로 많은 다른 것들을 쉽게 수행 할 수 있습니다. 관측자가 완전히 임의의 시간에 살아서 죽어 가기에 좋습니다.

  모범 사례의 관점에서 보면 달성하려는 대상에 따라 다릅니다. 일반적으로 한 번에 하나의 작업을 수행하려는보다 명확한 솔루션이 필요한 경우 콜백 패턴 경로로 이동하십시오. 서로 다른 장소에서 여러 가지 일이 일어나야하고 특히 이벤트를 누가 누가 처리하는지에 대해 특별히 신경 쓰지 않는다면 관찰자 패턴 경로로 이동하십시오.