다른 Javascript SDK 콜백을 결합하는 모범 사례

Question

전 몇 번이 상황을 경험했으며 항상 힘든 방법으로 작동하도록했지만 가장 좋은 방법이 있는지 알고 싶습니다. 가끔 페이지 예제에서 여러 개의 자바 스크립트 SDK (Google jsapi 및 jQuery)를 사용해야합니다. SDK가 사용할 준비가되면

구글은이 함수를 호출

google.setOnLoadCallback(MyFunction); 

jQuery를이 수행이 콜백의 모든 :

document.ready(); 

내가 구글의 후에 jQuery를 사용하여 DOM을 조작하려는 경우 콜백. 브라우저에 알려주는 가장 좋은 방법은 다음과 같습니다. "jQuery와 Google이 준비되고 물건을 준비 할 때까지 기다리십시오." jQuery 콜백을 Google 콜백 안에 중첩시키는 것이 가장 좋습니다. 또는 다른 방법 라운드? 나는 약간 혼란 스럽다. 감사!

Answer 1

여러 가지 방법으로이 작업을 수행 할 수 있습니다. 그 중 하나는 전역 변수를 사용하는 것입니다.

var jsLibsToLoad = 5; 

jsLib1.onLoad(mainCallback); 
jsLib2.onLoad(mainCallback); 
jsLib3.onLoad(mainCallback); 
jsLib4.onLoad(mainCallback); 
jsLib5.onLoad(mainCallback); 

function mainCallback(){ 
    if(!(--jsLibsToLoad)){ 
    ... 
    ... 
    } 
} 

Answer 2

아래에 주어진 내가 RequireJS 같은 일부 AMD 도구를 사용하도록 권장하는 것처럼

var googleLoaded = false; 

google.setOnLoadCallback(function(){ 
    googleLoaded = true; 
    mainCallback(); 
}); 

document.ready(mainCallback); 

function mainCallback(){ 
    if(googleLoaded){ 
    ... 
    ... 
    } 
} 

는 일반적인 솔루션으로, 당신은 할 수 있습니다. RequireJS는 자바 스크립트 파일 및 모듈 로더이며 의존성 관리에 정말 좋습니다. 특별한 경우 (전통적인/기존 "브라우저 전역"스크립트 사용)에는 Shim Config을 추가로 사용해야합니다.

처음에는 AMD를 사용하는 것이 조금 까다 롭지 만 익숙해지면 큰 이점이있었습니다. 그것은 당신의 코드의 속도와 품질을 향상시킬 것입니다.