2010-04-23 1 views
7

, 나는 <script> 태그복수를 쓰고 페이지에 <script >을 분리하는 것이 옳은가요? javaacript 코드를 작성하는 동안

내가 알고 싶은
<script type="text/javascript"> 
//---- code block 1--------- 
</script> 

<script type="text/javascript"> 
    ----code block 2----- 
</script> 

<script type="text/javascript"> 
$(document).ready.(function(){ 
// code block3 
}); 
</script> 

각 코드 블록이 좋은 연습 같은 페이지

또는 -

에 별도의 <script type="text/javascript"></script>을 작성하는 것입니다 분리

모든 Java 스크립트 코드를 하나의 코드로 작성해야합니다.

각 방법의 기술적 인 차이점은 무엇입니까?

답변

5

글쎄, 코드 구성 체계가 그 설정으로 이어지는 이유와 그것이 유지 보수 또는 이해 가능성 문제를 야기하는지에 대해 자문하고 싶을 수도 있습니다. 그러나 나는 엄격하게 "나쁘다"고 생각하지 않습니다. 이제 <script> 태그가 실제로 서버에서 개별 파일을 가져 오는 경우, 다시 잘라내는 것이 좋습니다.

브라우저는 다른 작업이 중지되는 방식으로 스크립트 태그를 구문 분석하고 해석하므로 페이지 상단의 자바 스크립트 블록이 많은 작업을하는 경우 작업 속도가 느려질 수 있습니다. 그러나 큰 블록의 코드가 있든 작은 블록이든 상관없이 사실입니다.

스크립트 파일을 별도로 이동하면 여러 페이지에서 코드를 재사용 할 수 있다는 장점이 있습니다. 그렇게하면 YUICompressor 또는 다른 유사한 도구로 스크립트를 압축하는 것이 빌드시에 더 쉬울 수도 있습니다.

1

여러 개의 <script> 태그를 사용하면 성능에는 차이가 없지만 읽기 쉽지 않습니다.

+1

나는 그것이 조금 느릴 것으로 생각합니다. – SLaks

0

코드 블록을 명확히 구분하고 싶지 않다면 분명하지만 그렇게 깨끗하게 할 필요는 없습니다.

0

모든 자바 스크립트 코딩을 별도로두고 파일 이름을 호출하십시오. 왜냐하면 그것은 좋은 것입니다. 코딩 실행은 단계별로 진행되므로 js가 코딩 사이에 있으면 시간이 걸립니다.

0

좋지 않지만 문제는 아닙니다.

3

가장 좋은 이유는 각 스크립트가 모든 페이지에서 사용되지 않을 수도있는 (따라서 따라서 판매되지 않을 수도있는) 기능의 개별 청크를 나타내는 경우입니다. 이 경우 스마트 전략이됩니다.

0

헌터가 맞습니다. 성능면에서 전혀 차이가 없습니다.

그러나 자바 스크립트가 더 복잡해지면 자신의 API 정렬을 시작하고 모든 태그를 개별 파일로 분할 할 수 있습니다. 그런 다음 앱을 배포 할 때 모든 파일을 하나의 패키지에 결합하고 YUI 압축기 또는 Google Closure를 사용하여 압축하고 모든 코드에 대해이 파일을 참조하는 하나의 단일 태그가있는 일종의 패키징 솔루션을 찾으십시오.

이 파일에 대해 별도의 HTTP 요청을 강제하는 '약간'의 단점이 있지만 제대로 패키지화되어 있으면 파일 크기가 해당 파일에 포함 된 압축되지 않은 코드보다 작습니다.

이 (즉, 구글 분석보고)

당신은 DRY 원칙을 (자신을 반복하지 마십시오) 위반 때마다
0

, 당신이 필요 더 아래 추가 기능을 제공하는 페이지에 스크립트 태그를하는 것이 정상입니다 이유를 묻는다. 좋은 이유가 없다면 아마 그런 식으로해서는 안됩니다.

1

여러 스크립트 블록이 차이를 만들 수있는 한 가지 엣지 케이스가 있습니다 (방금 배웠습니다). 코드 한 줄이 references a value before it has been declared이면 코드가 동일한 스크립트 블록에 속하지만 분리 된 코드가 아닌 경우이 코드가 작동합니다. 그러나 이것은 여러분이 준 대답을 바꾸지는 못합니다. 아마 매일 코딩에서 중요하지 않을 것입니다.

+0

예, 실제로이 바로 페이지의 Google 분석 코드는이 원칙에 의존합니다. 편집 : 아, 잠깐, 실제로는 반대 * 원리 : 첫 번째 블록의 document.write는 두 번째 블록 이전에 구문 분석되고 실행됩니다. * 두 번째 블록에서 참조되는 일부 변수는 허용되지 않습니다. – tloflin

관련 문제