복잡한 웹 응용 프로그램을 구성하는 방법

Question

광산 관련 질문 (예 : this interesting one)을 보았지만 올바르게 작성하는 방법이 궁금하고 다른 질문이나 답변을 통해 찾을 수 없습니다. RequireJS 문서.

나는 하나의 HTML 페이지에서만 실행되는 매우 무거운 웹 응용 프로그램을 만들고 있습니다.

이 RequireJS 전에, 나는 공공 방법과 JS 모듈을 많이 할이 같은 돔 준비 방법에 on 이벤트를 통해 그들을 연결하는 데 사용 : RequireJS와

var DataList = function() { 
    this.base = arguments[0]; 
    this.onUpdate = function (event) { ... } 
} 

$(function() { 
    var dataList = {}; DataList.apply(dataList, [$('#content')]); 
    $('table.main', dataList.base).on ('update', dataList.onUpdate); 
}); 

, 난 쉽게 볼 수 있습니다 DataList와 다른 모든 클래스를 개별 파일에서 분리 할 수 ​​있지만 $(function() {}); 부분은 무엇입니까?

jQuery의 DOM 준비 함수 대신 기본 라이브러리가로드 될 때 RequireJS의 주요 함수()에 이벤트를 넣을 수 있습니까?

require(['Datalist'], function(dataList) { 
    dataList.init($('#content')); 
}); 

나를 가장 귀찮게하는 것 :

또는 예를 들어 내가 할 때 호출 될 어쩌면 초기화 기능을 포함하도록, 내가 JS "클래스"를 생성하는 방법을 변경해야합니까 내가 하나의 html 파일을 가지고 있기 때문에, 나는 require()이 거대한 파일 목록을로드해야 할 것이고, libs를로드하는 것이 더 좋을 것이라고 생각한다./

당신은 어떻게 할 것 :

모르겠어요

은 RequireJS와 생각의 방법은 저에게 조금을 잃었?

Answer 1

"나는 여전히 대신 jQuery를의 DOM 준비 기능, 이런 식으로 계속 할 수는, 내 차 libs와로드 된 RequireJS,의()의 주요 기능에 대한 이벤트를 넣어?"

이 모듈에 함수 나 '클래스'를 분리하는 경우

다음은 RequireJS domReady 기능을 사용할 수 있습니다 :

require(['module1'], function(module1) { 
    domReady(function(){ 
     // Some code here ftw 
    }) 
}); 

여기 장점은 domReady 기능이 즉시 모듈의 다운로드를 허용하지만 때까지 실행하지 것이다 DOM을 사용할 준비가되었습니다.

"예를 들어, 내가 할 때 호출 될 어쩌면 init 함수를 포함하는"클래스 "또는 내가 JS를 생성하는 방법을 변경해야합니까"당신은 필요가 없습니다 이 방법으로 코드와 상호 작용하는 방식을 변경하지만, 아마도 향상시킬 수 있습니다. 의 거대한 목록을로드해야합니다)

define(function(require) { 
    var $ = require('jquery'); 

    var DataList = function() { 
     this.base = arguments[0]; 
    }; 

    DataList.prototype.onUpdate = function() { 

    }; 

    return DataList; 
}); 

require(['data-list'], function(DataList) { 

    var data = {}; 

    // Call DataList with new and you won't need to set the context with apply 
    // otherwise it can be used exactly as your example 
    new DataList(data); 

}); 

"무엇 가장 날 귀찮게하는 것은 내가 하나 개의 HTML 파일이 있기 때문에, 나는이 (필요 두려워한다는 것입니다 : 귀하의 예제에서 나는 모듈을 DataList에 만들 것 파일, 나는 그것을 lib 디렉토리에로드하는 것이 좋을 것 "이라고 말했다.

원하는대로 모듈을 모듈로 만들고 then use the optimiser을 하나의 JS 파일로 패키지화하십시오.