RequireJS를 사용하고 있으며 각 페이지마다 고유 한 스크립트 파일을 만듭니다. 그러나 일부 페이지 (서버 쪽)에 포함 된 일부 구성 요소도 있습니다. 이 페이지는 또한 자신의 스크립트 파일을해야합니까, 또는 필요한 자바 스크립트가 포함 된 페이지에 있어야합니까? 포함 된 페이지의 일부 기능은 많은 페이지에 공통적입니다.다른 페이지에 포함 된 페이지에 자체 스크립트가 있어야합니까?
자바 스크립트를 페이지 별 기능이 아니라 재사용 가능한 모듈로 생각하는 것이 더 나을 것이라고 생각합니다. 따라서 페이지에 AJAX 요청을 시작하는 검색 창, 날짜 선택 도구 및 전체 탭이 있다고 가정 해보십시오. 이들 각각은 모듈이어야합니다 (또는 모듈이 제공하는 기능이 충분히 복잡하면 몇 개의 모듈이어야 함). 앱을 매우 집중된 작은 조각으로 분해하면 각 비트를 개별적으로 (자동화 된 단위 테스트) 테스트하고 다른 곳에서 기능을 재사용하는 것이 더 쉬워집니다.
이제 자바 스크립트 모듈을로드하는 방법에 대해 전략적으로 사용자 요구에 따라 물건을로드하는 것이 중요합니다 (예 : core.js가 기본적으로로드되지만 search.js는 사용자가로드 할 때까지로드되지 않습니다. "검색"탭에 액세스)하지만 모든 파일을 하나의 파일 (require's r.js tool)로 패키징하고 모든 페이지에서 동일한 스크립트 파일 (main.js)을 사용하면 훨씬 쉽게 얻을 수 있습니다.
단일 스크립트 파일을 사용하는 경우 js는 기능의 대상이 없을 때 작동해야한다는 점에 유의하십시오. jQuery를이 슈퍼 간단하게하고 당신은 거의 그것에 대해 생각하지 않습니다 - 예 :
$('#js-foo').on(...) // <-- this doesn't blow up if '#js-foo' isn't on the page.
나는 또한 사람들이 페이지의 body 태그에 데이터 ATTR을 설정 본 것 - 예를 들어, 그 오프 데이터 페이지 = "foo는"키 JS : 귀하의 경우
var page = $('body').data('page');
if (page === 'foo'){
component1.setup();
component2.setup();
}
, 나는/AMD-스타일의 모듈 RequireJS를 사용하여 하나의 파일에 모든 것을 구축하려고 할 것입니다. 각 구성 요소는 자체 모듈 파일 (mycomponent.js)을 가지게되고, main.js는 모든 모듈과 init 객체를 적절하게 요구할 것이고, 마지막으로 배치 할 때 모든 것을 단일 파일로 패키징하도록 r.js 빌드를 구성 할 것입니다. to/production에서 작동합니다.
당신이 더 많은이 주제를 탐구에 관심이 있다면,이 게시물 체크 아웃 :