파일에 OO js 코드를 구성하는 방법은 무엇입니까? 로컬 네트워크 응용 프로그램

Question

현재 로컬 네트워크에서 실행되는 응용 프로그램은 B2B 환경입니다. 그래서 나는 마이크로 (미니?) 최적화Hardware Is Cheap, Programmers Are Expensive 때문에 대역폭 절약의 관점에서 거의 잊을 수 있습니다.

우리는 프로젝트에서 잘 구조화 된 객체 지향 js 코드를 가지고 있으며 분명히 많은 js 클래스이 있습니다. 모든 클래스가 분리 된 파일에 저장되면이 코드를 탐색하여 유지 관리하는 것이 매우 쉽습니다.

그러나이 경우 브라우저에 몇 가지 개의 HTTP 요청을 생성하여 페이지에 필요한 모든 js 파일/클래스를 가져옵니다. 로컬 환경에서도 첫 번째로드에서는 빈 캐시를 사용하는 것이 빠르지 않으며 나중에 캐시를 수정할 때 캐시를 무효화해야합니다.

가능한 솔루션 :

• 규칙 을 위반 (개발 & 생산)
• 사용 YUI compressor 모든 시간 "하나 개의 파일 당 클래스"하나 개의 큰 JS 파일을 생성합니다.

그러나 우리가 이것을 위해 YUI 압축기를 선택하면 (dev 환경에서 축소 작업을하지 않고 생산을 위해 축소) - js 파일의 모든 수정시이 큰 js 파일을 다시로드하거나 다시 컴파일해야합니다.

이 문제를 해결하기 위해 무엇을 권하고 싶습니까?

Answer 1

모든 .js 파일을 분리하지 마십시오. "파일 당 하나의 클래스"규칙을 유지하십시오.

그런 다음 서버 측 기술을 사용하여 스크립트를 하나의 요청으로 집계하십시오.

옵션 :

1. 사용 ASPX 또는 PHP 또는 whatevver 서버 측 스크립트 것은 당신이이 하나 개의 요청으로 모든 JS를 집계합니다. .js에 대한 요청은 더 이상 정적 파일이 아니지만 서버에 캐시하면 상대적으로 저렴해야합니다.

2. 통합 .js 파일에 서버 측 포함을 사용하십시오.

   < ! - # 가상 = "/ class1.js"를 포함 - >
   <! - #은 = "/ class2.js"가상 포함 -의>

Answer 2

당신의 접근 방식 각 클래스에 대해 별도의 파일을 만드는 것이 좋습니다. 개발을 쉽게하는 방법은 언제나 좋습니다.

여기 로딩 빠르게 만들기위한 몇 가지 팁을의 :

• 이 코드를 압축합니다.예를 들어, YUICompressor 또는 새로 출시 된 Google Closure Compiler을 사용할 수 있습니다.
• 여러 파일을 하나의 파일로 연결할 때 필요한 시점과 생각 : 앱이 시작될 때 파일 A, B 및 C 만 필요하고 Z 및 X는 필요하지 않으면 A, B 및 C 만 단일 파일에 넣습니다. . A/B/C 다음에 Z와 X가 동시에있는 다른 파일을로드하십시오.
• 당신은 부하 성능을 테스트하기 위해 파이어 폭스 플러그인 YSlow 및 Page Speed을 사용할 수 있습니다 당신이 말할 때, 당신은 압축기 당신이 변화 할 때마다 다시 실행해야합니다

병목. 나는 이것이 큰 문제라고 생각하지 않습니다. -보기 흉한 컴퓨터의 경우, 많은 파일을 가지고도 꽤 빨리 실행해야합니다. 또는, 소스 컨트롤 (scm을 사용하고 있습니까?)에서 최신 버전을 빌드 할 수있는 도구를 사용하여 일일 빌드 프로세스를 사용할 수 있으며, 단위 테스트를 실행하고 모든 것이 정상적으로 실행되면 배포 할 수 있습니다.

Ant 또는 다른 자동화 도구를 사용하여 빌드 스크립트를 만드는 것이 좋습니다. 이렇게하면 압축 된 스크립트를 작성하는 명령 하나를 실행하는 것만 큼 간단 해지며 그렇지 않으면 반복해야 할 작업을 줄일 수 있습니다. Ant에 코드를 서버에 배포 할 수도 있습니다.

Answer 3

각 반복마다 컴파일/배포 할 필요없이 하나의 클래스 (js 파일 당 하나의 클래스)가있는 개발 환경과 프로덕션 환경에서 원하는 경우 축소 된 더 큰 js 파일 (하나 이상)을 연결할 수 있습니다.

빌드 환경에 따라 여러 가지 방법으로 설정 될 수 있지만 Ant를 사용하는 것이 가장 쉬운 방법 일 수 있습니다. 앤트를 사용하면 concatenation과 minification (YUICompressor를 Java task으로 실행)에 대한 작업을 모두 실행할 수 있습니다. 이렇게하면 연결 및 축소 된 큰 js 파일이 생성됩니다.

그러나 생산성을 유지하려면 모든 코드 반복마다이 작업을 수행하지 않아야합니다. 태그를 한 개에서 여러 개 (모든 클래스 파일에 대해) 변경하는 것은 의문의 여지가 있습니다. 예상대로

그래서, 당신은 당신의 큰 JS 파일을로드 :

<script src="application.js"></script> 

생산이 파일을 배포 모든 JS 파일의 연결된/축소 된 버전입니다.

그러나 개발 과정이 파일은 단순히 모든 개별 JS-파일 (jQuery를 사용하여 예시를)로드하는 부트 스트랩/로더 파일입니다.

$.getScript('/class1.js'); 
$.getScript('/class2.js'); 
$.getScript('/class3.js'); 
$.getScript('/class4.js'); 
$.getScript('/classn.js'); 
.... 

당신이 YUI 3 모듈 행동에 대한 모양과 방법 종속성을 지정하는 방법을 사용하는 경우.

다른 Ant 대상을 사용하면 이러한 파일의 생성 및 올바른 위치로의 복사가 쉽게 관리 될 수 있습니다.

이제 파일의 변경 사항을 테스트해야 할 때마다 브라우저를 다시로드 할 수 있지만 제작 중에는 성능상의 이점을 얻을 수 있습니다. 생산성이나 유지 보수성을 희생하지 않고도 모두 가능합니다.