2013-07-14 3 views
0

저는 소수의 사람들과 함께 작은 웹 앱을 만들고 있습니다. 다른 개발자가 문서가 준비 될 때 항상 호출되는 몇 가지 기능을 정의 할 수있게하려고합니다.자바 스크립트 글로벌 콜백 함수가 호출되지 않았습니까?

Utils.funcs['start'] = function(){ 
    alert('Starting...'); 
}; 

Utils.funcs['finish'] = function(){ 
    alert('Finishing...'); 
}; 
: 별도의 .js 파일에서 개발자가 다음을 수행 할 수 있어야

<script type="text/javascript"> 
    (function(){ 
    window.Utils = { 
     funcs: {} 
    }; 

    $(document).ready(function(){ 
     alert('Calling funcs...'); 

     var startFunc = Utils.funcs['start']; 
     if (startFunc != undefined){ 
     startFunc(); 
     } 

     var finishFunc = Utils.funcs['finish']; 
     if (finishFunc != undefined){ 
     finishFunc(); 
     } 
    }); 
    })(); 
</script> 

다음 :

우리의 응용 프로그램은 모든 페이지의 HTML 본문에 다음 스크립트를 삽입

하지만 이것은 작동하지 않습니다. 함수는 호출되지 않습니다?

jsFiddle 링크 : http://jsfiddle.net/XvQtF/

답변

3

jsFiddle의 (매우 놀라운) 기본값은 windowload 처리기에 코드를 삽입하는 것입니다. 두 번째 드롭 다운 상자에 "onload"라고 표시됩니다. 매우이 늦어졌습니다. ready이 발생한 후 오래되었습니다. 따라서 함수를 실행하려고 시도 할 때까지 함수가 추가되지 않습니다. 다른 개발자가 Utils을 정의하여 요소 후 script 요소에 있지만 load 이벤트를 기다리지 않고 Utils.funcs에서 그 기능을 넣을 경우

는 괜찮아 : Updated Fiddle는하지만, 가치가 무엇인지에 대한


, 내가 의지 할 것 하나의 함수가 아닌 pub/sub 솔루션 사용 예를 들어 하나 이상의 start 기능을 사용하려면 현재 구조에서 허용하지 않습니다.

jQuery에는 DeferredPromise이 있습니다. 다음은 그 간단한 예입니다. Live Copy | 별도의 스크립트 Live Source

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Pub/Sub with Deferred and Promise</title> 
</head> 
<body> 
    <script> 
    (function($) { 
     // Deferred objects for our app states 
     var start = new $.Deferred(), 
      finish = new $.Deferred(); 

     window.Utils = { 
     start: start.promise(), // Only expose the Promise of each 
     finish: finish.promise() // " " " " " " 
     }; 

     $(function() { 
     alert("Calling funcs..."); 

     // Start the app 
     start.resolve(); 

     // Finish the app (or whatever) 
     finish.resolve(); 
     }); 

    })(jQuery); 
    </script> 
    <script> 
    // Module 1 
    Utils.start.then(function() { 
     alert("Module 1 Started!"); 
    }); 
    Utils.finish.then(function() { 
     alert("Module 1 Finished!"); 
    }); 
    </script> 
    <script> 
    // Module 2 
    Utils.start.then(function() { 
     alert("Module 2 Started!"); 
    }); 
    Utils.finish.then(function() { 
     alert("Module 2 Finished!"); 
    }); 
    </script> 
</body> 
</html> 
0

설정의 Utils는 매우 첫 번째로로드합니다. 또한, (어떤 콜백 등에없는) 조건없이이 작업을 수행 : 전역에서 전역 변수를 정의하는 괜찮

/* load as first script, sets up a global container-object for later use */ 
var Utils = { 
    funcs: {} 
} 

하는 것으로. 타 답변에서 언급 한 바와 같이

/* other script */ 
(function(){ 
    function myFunc() { /*...*/ }; 

    // now store a reference in Utils 
    Utils.funcs.start = myFunc; 
})(); 

는 :

$ (문서) .ready는 기본적으로 대부분의 브라우저와 "DOMContentLoaded"-event이다 로딩을 인식하고 다양한 스크립트/코드의 순서를 호출해야합니다 (그러나 이전 버전의 IE). "DOMContentLoaded"는 head 섹션에있는 모든 인라인 리소스가로드되고 본문의 DOM 구조가있을 때 발생합니다. 주입 된 내용이 포함되어 있지 않기 때문에 스크립트 태그를 삽입하여 모듈을로드하는 모듈 라이브러리가 완전히로드되고 표시되기 전에 이벤트가 시작된다는 사실을 인정할 수 있습니다. (이 스크립트는 브라우저에서 제공하는 네트워크 슬롯/소켓을 사용하여 이미지 및 기타 인라인 요소와 동시에로드되므로 전체로드 프로세스에서 준비해야 할 마지막 작업 중 하나 일 수 있습니다.)

0

대신 단지

startFunc() and 
finishFunc() 

이이

startFunc.apply(this, null) and 
finishFunc.apply(this, null) 

이 함수를 호출합니다 사용하려고 사용하여.

는 또한이 호출되기 전에

Utils.funcs['start'] 
Utils.funcs['finish'] 

초기화지고 있는지 확인하십시오.

관련 문제