browserify 및 문서 준비가 되었습니까?

Question

Browserify 및 document ready 이벤트를 사용하는 데 어려움을 겪고 있습니다. 문서 준비 이벤트가 발생한 후에 만 ​​컨텐트를 내보낼 수있는 모듈을 만드는 방법은 무엇입니까? 그런 모듈에 어떻게 의존합니까?

내 첫 번째 찌르기는 module.exports를 비동기 적으로 설정하려고 시도한 것입니다. 이것에 대한 나의 nextx stab은 콜백 함수를 리턴하는 모듈을위한 것이고, 문서 준비가 시작되면 콜백 함수를 호출했다. 세 번째 시도는 약속을 되 돌렸다. 이것은 종속 모듈을 매우 모듈화하지 않는 것처럼 보입니다. 종속 모듈과 의존성 (그리고 이들의 거북이는 항상 아래로 내려갑니다)은이 패턴을 활용해야합니다.

Browserify 및 문서 준비 이벤트를 사용할 때 좋은 패턴은 무엇입니까?

Answer 1

이 시도 :

var domready = require("domready"); 

domready(function() { 
    exports.something = /* whatever you want */ 
}); 

당신은 domready 패키지를 다운로드해야합니다 :

npm install domready 

가 그럼 그냥 browserify 사용

browserify input.js -o output.js 

예를. 그것은 간단합니다. library.js 및 main.js :

---

우리가 두 개의 파일이 있는지 생각해 보자.

// library.js 

var domready = require("domready"); 

domready(function() { 
    exports.test = "Hello World!"; 
}); 

// main.js 

var library = require("./library"); 
var domready = require("domready"); 

domready(function() { 
    alert(library.test); 
}); 

메인 domready 기능을 등록하기 전에 라이브러리가 필요한 경우 라이브러리를 원활하게 사용할 수 있어야합니다.

---

경우에 따라 module.exports을 기능으로 설정할 수 있습니다. _call 속성은 특별한 어떤 식 으로든 아니라고

// library.js 

var domready = require("domready"); 

module.exports = function() { 
    return exports._call.apply(this, arguments); 
}; 

domready(function() { 
    exports._call = function() { 
     alert("Hello World!"); 
    }; 
}); 

// main.js 

var library = require("./library"); 
var domready = require("domready"); 

domready(function() { 
    library(); 
}); 

참고 :이 경우 다음과 같은 해킹을 사용할 수 있습니다.

Answer 2

일반적으로 전체 응용 프로그램을 실행하는 하나의 마스터 파일이 있으므로 준비 콜백으로 간단히 감쌀 수 있습니다. 문서가 준비되기 전에는 아무 것도하지 않는 것이 좋습니다. 물론 DOM 조작을하는 모든 단일 파일에서 함수를 반환 할 수는 있지만 그렇게하면 혼란에 빠지게됩니다.

document.addEventListener('DOMContentLoaded', function() { 
    var app = require('./app'); 
    // ... 
}); 

Answer 3

대신 준비 이벤트를 수신, 당신은 이연 스크립트 태그에 browserify 번들을 넣을 수 있습니다 : 번들이 실행되지 않습니다 때문에

이

<script src="bundle.js" defer></script> 

이 완전히 준비 래퍼를 제거 할 수 있습니다 DOM이로드 될 때까지.

불행히도 defer의 지원은 patchy이며, IE <을 지원할 필요가 없다면 권장하지 않습니다. 향후 브라우저 지원이 늘어남에 따라이 답변을 고려하십시오.

Answer 4

이 기능은 하나의 프로젝트에서 작동하며, 항상 작동하는지 확신 할 수 없습니다.

예 : <script src="/path/to/main.js"></script></body> 앞에 스크립트를 넣으십시오.

파일에 browserify the-file.js -o main.js이 될 것입니다.

// the-file.js: 

var $ = require("jquery"); 

//...... 

window.$ = $; // window is the global object in browsers 
$(document).ready(function(){ 
    // all the old things here .... 
}); 

또 다른 방법은 더 좋을 수도 : 질문에 대한 답변을 한 경우

이

// the-file.js: 

var $ = require("jquery"); 

//...... 

(function($){ 

    $(document).ready(function(){ 
     // all the old things here .... 
    }); 

})($); // Anonymous function get called with $.