2011-11-07 2 views
1

jQuery에서 콜백의 느슨한 결합을 허용하는 디자인 패턴/프레임 워크가 있는지 궁금합니다.jQuery에서 사용자 정의 콜백의 느슨한 결합

기본적으로 콜백 함수에 필요한 설정을 검색하는 ajax 호출이 있습니다. 내가 느슨하게 결합 될 싶습니다

$.getJSON('/webservice/config', function(data) { 
    functionA(); 
    functionB(); 
} 

: AJAX 호출이 완료하지만, 같은 일을 방지하고자하는 후 내가 해고하고자하는 기능의 번호를 가지고있다. 누구나 이것이 팝 어스 (popssible)에 대한 아이디어가 있습니까?

감사합니다. Gearoid.

솔루션은 여기

내가 마지막에 사용 된 내용은 다음과 같습니다

나는 원래 함수에 콜백 함수의 수를 전달할 수 있습니다 그들이 실행으로
function initConfig(callbacks) { 

    $.getJSON('/webservices/config', function(data) {  

     $.each(data.config, function(key, value) { 
      config[data.config[key].paramName] = data.config[key].paramValue; 
     }); 

    }).done(function() { 
     //callbacks 
     callbacks.forEach(function(callback) { 
      if (eval('typeof ' + callback) == 'function') { 
      window[callback](); 
     }); 
    }); 
} 

내 코드는 매우 느슨하게 결합되어 순차적으로, 예 :

initConfig('setLocationData', 'setUserData'); 

답변

1

모든 AJAX 쿼리의 반환 값인 jqXHR 개체는 요청 완료시 실행되는 임의 함수를 바인딩 할 수있는 done 메서드를 지원합니다.

jQuery.getJSON('/foo.json').done(function() { 
// One success handler 
}).done(function() { 
// Another success handler 
}); 

이것은 AJAX 모듈이 jQuery 1에서 다시 작성 되었기 때문입니다.5를 사용하여 Deferred interface을 사용하면 콜백이 발생하기 전이나 후에 바인드 된 핸들러의 실행이 보장됩니다.

편집 : 내 댓글 나는 기능의 배열이 전달되는 코드 예제를 찾을 수 없습니다

function initConfig() { 
    return $.getJSON('/webservices/config', function(data) {  
     $.each(data.config, function(key, value) { 
      config[data.config[key].paramName] = data.config[key].paramValue; 
     }); 
    }); 
} 

initConfig().done(setLocationData, setUserData); 
+0

감사합니다. 내가 무엇을했는지입니다. 내가 사용한 실제 솔루션에 대한 내 질문을 참조하십시오. – Ger

+1

@ Gearóid : 좋아 보인다. 나는 함수에서'jqXHR'를 반환하고 피 호출자에게 필요에 따라 추가하도록 고려했을 것입니다. 내 대답은 내 편집을 참조하십시오. – Matt

+0

흠, 내가 시도 할 때 'initConfig()가 정의되지 않았습니다'오류가 발생하는 것 같습니다. 접근 ... – Ger

1

$ .ajax 함수는 여러 차례 성공 콜백을 허용 할 수 있습니다. http://api.jquery.com/jQuery.ajax/에서

jQuery 1.5부터 성공 설정은 여러 함수를 수용 할 수 있습니다. 각 함수가 순서대로 호출됩니다.

짧은 예 : (http://jsfiddle.net/JhTDW/ 참조)

$.ajax({ 
    url: '/echo/json/', 
    success: [ 
    function(data) { 
     document.write('First callback: ' + data + '<br/>'); 
    }, 
    function(data) { 
     document.write('Second callback: ' + data + '<br/>'); 
    } 
    ] 
}); 
+0

을 설명한다. jsfiddle을 만들 수 있습니까? – Ger

+0

이 작품은 나를 위해 : http://jsfiddle.net/JhTDW/ – wutz

+0

예를 들어, 데이터가 올바른 ajax 호출에 의해 반환 된 매개 변수가 무엇입니까? 콜백은 반환 된 데이터와는 별개입니다. 메소드를 반환하지 않고 Ajax 성공 메소드에 전달하려고합니다. – Ger

0

하지가 결합 될 필요가 있지만, 성공 콜백에서 당신은 항상 다른 함수에 data 객체를 보낼 수있는 방법을 느슨하게해야합니다. 그러나 이것이 어떻게 분리되는지는 잘 모르겠습니다. 어떤 경우에는 성공 콜백에서 functionA()functionB()을 호출합니다. 다른 경우에는 functionA()functionB()을 실행하는 utilityFunction()에 데이터를 보내고 있습니다. 어느 경우

, 당신은 functionA() 또는 functionB() (또는 어떤 다른 기능)을 실행하는 대신에 하나 개 이상의 조건문을 가질 수있다. 그러나 이것은 성공 콜백이나 유틸리티 함수에서 수행 될 수 있으므로 디커플링이 어디에서 발생할지 아직 확실하지 않습니다.

질문의 핵심은 다음과 같습니다. data이 나오고 응답에 따라 해당 데이터를 처리하거나 적어도 로직을 실행하려고 할 것입니다. 얻을 수있는만큼 분리되어 있으며, 거기에서부터 어떻게 구조화하고 싶은지에 달려 있습니다.

+0

반환 된 데이터를 처리하고 싶습니다. 그러나, 많은 함수를 전달할 수있는 방식으로 ajax 호출을 사용하여 내 함수를 구조화하고 싶습니다. 즉. 이 함수는 콜백을 모르고있다. – Ger

관련 문제