간편한 관리를 위해 여러 파일로 코드 분할

Question

저는 현재 온라인 응용 프로그램을 작성하는 데 jQuery를 사용하고 있습니다.이 응용 프로그램은 두 줄의 코드로 시작되어 1000 줄이 넘었습니다.

내 코드 구조가 간단합니다. 내 JavaScript를 래핑하는 window.load가 있고 내부에 클릭 이벤트 처리기 및 내 응용 프로그램을 구성하는 다양한 함수를 추가하기 시작합니다.

$(window).load(function(){ 
    // Code goes here... 
}); 

내 코드 기능을 범주별로 명확하게 그룹화 할 수 있습니다. 예 : 5 개의 함수는 애니메이션을 수행하고, 12 개는 이벤트 핸들러 등입니다.

고유 한 js 파일에 함수를 그룹화하고 개별적으로 가져오고 싶습니다. 나중에 CMS 엔진을 사용하여 파일을 연결하고 압축 할 수 있습니다.

그렇게하는 가장 좋은 방법은 무엇입니까? 어쩌면 내가 더 명확하게하기 위해 자신의 네임 스페이스의 일부를 줄 수 있다고 생각하고있다. 예 : 모든 애니메이션 함수는 ANIMATION - ANIMATION.moveDiv1(), ANIMATION.moveDiv2, MYEVENT.div1Clicked 등이 접두사로 붙습니다.

Answer 1

일반적으로 모든 관련 항목은 가독성을 위해 파일과 일치하는 네임 스페이스가있는 고유 한 파일에 저장됩니다.

Example.js

var Animation = {}; // create the namespace-like object 
Animation.moveDiv1 = function() {...}; 
Animation.moveDiv2 = function() {...}; 

이 작업을 수행하는 방법은 여러가지가 정말있다 :

예제 파일처럼 보일 수 있습니다. 압축에 대해 말하자면, 압축하는 데 사용할 수있는 멋진 도구가 있습니다. 체크 아웃 YUI Compressor

모듈성은 자바에서 좋은 목표이지만, 다음 레벨은 실제로 자바 스크립트 OO 기술을 사용하는 것입니다. 귀하의 애플 리케이션이 충분히 간단하다면, 당신은 아마 그것을하지 않고도 할 수 있습니다.

Answer 2

로딩 시간의 관점에서 볼 때 응용 프로그램 관리의 관점에서 보면 좋은 아이디어입니다. 브라우저는 모든 작은 스크립트를 동 기적으로로드해야하므로로드하려는 각 추가 스크립트에 더 많은 시간이 걸립니다. 여기에는 주요 jQuery 라이브러리 스크립트, jQuery UI 및 문서에서 계획하고있는 다른 내용은 포함되지 않습니다. 두 가지 전제 조건을 모두 테스트하십시오. 기능을 개별 스크립트로 추상화 한 다음로드하는 데 하나의 호출 만 필요한 큰 스크립트 하나를로드하십시오. 한 단계 더 나아가 "하나의 큰 스크립트"를 한 단계 더 축소하고 압축 파일로 제공되는지 확인하십시오.

Answer 3

개발할 때 JavaScript 파일을 클래스로 분할 할 수 있지만 스크립트를 결합하여 프로덕션 환경에서 최소화해야합니다. 자세한 내용은 YUI Compressor을 참조하십시오.

Answer 4

1. 코드 파일은 클래스를 반영해야합니다.
2. 수업은 좋은 OO 디자인 원칙을 따라야합니다.

브라우저에서로드 시간 측면에서 kekoav와 knut은 올바른 생각을 가지고 있습니다. YUI 또는 다른 스크립트 압축기/미니 파이어 (및 선택적으로 obfuscator)를 사용하여 단일 파일로 결합하고 모두로드하십시오. 단일 스크립트 include 지시문에서.

클래스의 프로토 타입 속성 JS를 살펴볼 수도 있습니다. 클래스가 커지고 인스턴스가 여러 개 생성되는 경우 공용 클래스를 배치하여 상당한 성능 향상을 볼 수 있습니다. 선택적으로 private/privileged) 메소드를 클래스 프로토 타입에 추가합니다.

AJAX 솔루션을 사용하는 경우 Microsoft Type.registerNamespace를 사용하거나 kekoav의 게시물에 따라 고유 한 네임 스페이스 함수를 선언하거나 squillion 다른 유사한 접근법을 사용하여 클래스에 정규화 된 네임 스페이스를 사용해야합니다. Google이 제공 할 것입니다.