문맥 화 jQuery

Question

많은 페이지를위한 jQuery 코드가 많은 상당히 큰 사이트가 있습니다. 우리는 꽤 잘 최적화 된 코드 (플러그인 제외)의 약 1000 라인을 말하고 있습니다.

jQuery는 존재하지 않는 페이지 요소에 대한 청취자를 무시하는 것이 상당히 좋지만 페이지가로드 될 때 여전히 존재 여부를 테스트해야한다는 것을 알고 있습니다. 또한 vars (괜찮은 크기의 배열과 객체 포함)의로드를 작성하지만 각 페이지에는 그 중 일부만 사용됩니다.

내 질문 : 각 페이지의 작업량을 줄이는 가장 좋은 방법은 무엇입니까?

그러나 나는 이 아닙니다. 코드를 별도의 파일로 분리하려고합니다. 나는 한 곳에서 모든 내 코드를 유지하려면 및 효율성을 위해 난 단지 (그것은 대부분의 이미지보다 작은 경우에만 30킬로바이트을,이다)를 한 번 JS을 다운로드하기 위해 서버를 호출합니다. 이름이 지정된 함수에 내 모든 코드 덩어리를

1. 을 넣고, 각 페이지는 인라인 < 스크립트 > 태그에서 필요로하는 함수를 호출 있습니다

   지금까지 여러 가지 방법을 생각했습니다.

2. 는 각 페이지 출력 페이지 id 등의 변수를 가지고, 그리고 각 청크에 대한 if 문이 있습니다 if (pageID = 'about' || pageID = 'contact') {code...}
3. 각 페이지를 부여 (어쩌면 body 태그)가 필요합니다 청크를 식별하는 데 사용할 수있는 클래스 또는 ID를 실행 : if ($('.about').length || $('.contact').length) {code...}
4. 1 및 2 결합 (또는 1, 3), 각 페이지의 변수를 출력하고, if 문 기능 모두 함께 있고 호출되도록 : if (pageID = 'about') {function calls...}

다른 아이디어? 아니면 가장 효과적입니까?

Answer 1

첫 번째 옵션은 가장 빠릅니다 (분당).
올바른 페이지에서 함수를 호출해야합니다.

그러나, 는을 귀찮게하지 않습니다.
프로파일 러에서 성능에 미치는 영향을 측정하지 않은 한이를 최적화 할 필요가 없습니다.

Answer 2

난 당신이 당신이 이제까지 코드 실행에서 보게 될 낙찰을 다운로드 성능 저하의 이상을 복용하고 있다고 주장 할 것이다. 즉, 페이지를 결정하고로드 할 때 바인딩/바인딩 할 이벤트를 결정하는 부트 로더를 통해 모든 설정 방법을 실행할 수있는 URL을 항상 테스트 할 수 있습니다. 등 뭔가 어쩌면 다음

이

$(function(){ 
    var page_methods = { 
     home : [meth_1, meth_2], 
     about : [meth_3, meth_2] 
     }, 
     page = location.pathname.match(/\/(\w)$/)[1], 
     i = 0, 
     meth; 

    for (; meth = page_methods[ page ][ i++ ] ;){ 
    meth(); 
    } 
});