자바 스크립트 모듈 시작 코드

Question

제가 주로 사용하는 javascript는 내 HTML 프레임 워크에 추가 기능을 추가하고 다양한 HTML 요소와 상호 작용하는 UI 코드입니다.

전반적으로, 나는 UI 코드를 모듈로 분해하는 편이 낫다.

예를 들어, 회전식 동작을 구현하는 뒤로/다음 버튼에 핸들러를 부착하는 코드가있는 경우 '회전식 슬라이드'모듈에 해당 코드를 삽입하는 것이 좋습니다.

질문은 페이지로드시 실행되는 부트 스트랩 코드를 어디에 두어야하며 실제로로드 할 모듈과 요소를 결정해야합니다.

JS 파일에 있어야하며 JS 파일이 포함되는 즉시 실행해야합니까?

또는 HTML 파일의 맨 위 (또는 맨 아래)에있는 스크립트 태그에 있어야합니까?

또는 특정 코드가 없어야하지만 JS 파일은 부모 요소의 ID/클래스를 기반으로 처리기 등을 첨부 할 요소를 결정해야합니다.

어떤 방법이 가장 효과적입니까?

Answer 1

보통 각 모듈을 다른 .js 파일로 구분합니다. 각 파일/모듈에는 올바르게로드하기 위해 자체 $(document).ready() (jQuery 부트 스트랩 함수)이 있습니다. 그런 다음 <script>을 적절하게 추가하여 특정 파일/모듈을로드하십시오.

이것은 널리 사용되는 JavaScript 라이브러리/프레임 워크에서 플러그인이 작동하는 방식과 유사합니다.이 플러그인은 포함하고 동작을 적용하기 만하면됩니다.

편집

예를 들어, 회전 목마 (carousel.js) 모델은 다음과 같이 보일 것이다 :

(function(){ 

    function bindNext(){...} 
    function bindPrev(){...} 

    // jQuery bootstrap 
    $(document).ready(function(){ 
     bindNext(); 
     bindPrev(); 
    }); 

})(); 

그리고 어쩌면 다른 모듈 (foo.js) :

(function(){ 

    function foo(){...} 
    function bar(){...} 

    // jQuery bootstrap 
    $(document).ready(function(){ 
     foo(); 
     bar(); 
    }); 

})(); 

을

이 방법은 내가 할 일은 그 파일을 추가하는 것 뿐이며 모듈은 제대로 작동합니다. 각 모듈은 동작을 정의하기 때문에 다른 모듈의 모든 동작을 방해 할 중앙 위치가 필요 없습니다.

Answer 2

js 모듈에 Init() 또는 Start() 함수를 제공하고 싶습니다. 그런 다음 JS와 상호 작용하는 마크 업을 생성하는 코드가 Init/Start 함수를 호출하는 라인 스크립트를 작성할 수 있습니다. 이 방법을 사용하면 해당 인스턴스와 관련된 시작시 모듈에 매개 변수를 전달할 수도 있으며 여러 인스턴스를 가질 수도 있습니다.

Answer 3

js 파일을 라이브러리 가져 오기로 추가하고 내 html 파일을 주 응용 프로그램으로 추가한다고 생각합니다. 나는 파일이로드 된 후 스크립트 태그 안에 초기화를하고 싶다. 나는 페이지의 특정 요소 (뒤로/다음 버튼)를 참조하는 js 파일 내부에 물건을 넣는 것을 조심해야합니다. 스크립트를 설정하기 전에 스크립트를 원하는대로 구성 할 수 있도록 설정하는 것이 좋습니다.