jQuery의 최소 요구 버전은

Question

입니다. jQuery의 document.ready()과 기본 javascript onload() 메소드의 차이점을 알고 있기 때문에 document.ready()을 사용하여 DOM을 준비하는 동안 일부 초기화 작업을 수행하고 싶습니다.

그러나 jQuery 라이브러리에서 제공하는 추가 기능은 필요하지 않습니다. jQuery-1.7.2.min.js의 크기가 94.8kb 인 경우 모바일 장치에서 특히 로딩 시간이 지연 될 수 있으므로 document.ready() 메서드 만 제공하는 jQuery의 균일 한 압축 버전을 얻는 방법이 있습니까?

다른 lib가 비슷한 기능을 제공 할 수 있습니까?

또한 모바일 버전의 jQuery가 있지만이 페이지는 PC 및 모바일 장치 용으로 제공되므로 모바일 버전이 PC에서 잘 작동하는지 확신 할 수 없습니다. 아마 그것이 호환되는 경우 아마 이것이 갈 길입니까?

감사합니다.

Answer 1

스크립트 라이브러리가 캐시되도록 스크립트에 CDN을 사용하십시오. CDN을 사용할 수 없을 때 대체 스크립트 인 CDN + 스크립트는 다음과 같습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script> 

CDN을 사용의 이점의 일부를

스크립트

에도 작은 스크립트 파일을 캐시

낮은 대역폭 다운로드

• 수천 배는 대역폭에 띄는 타격을 시작합니다 미터.
• 없는 연결/제공하여 웹 서버에 명중 더 지연

Answer 2

당신은 단지 8.4k입니다, Zepto.js를 살펴 할 수 있습니다 ...

http://zeptojs.com/

에서 Zepto는 대부분 jQuery 호환 API를 사용하는 최신 브라우저를위한 최소한의 JavaScript 라이브러리입니다 .jQuery를 사용하면 Zepto를 사용하는 방법을 이미 알고있을 것입니다. " 지금까지 IE의 지원과 같은

, 다시 jQuery를에 되돌릴 IE에서 사용할 수있는 대체 ... + 대체

<script> 
document.write('<script src=' + 
('__proto__' in {} ? 'zepto' : 'jquery') + 
'.js><\/script>') 
</script> 

Answer 3

CDN은 꽤 좋은이된다 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script> 

또는 소규모 라이브러리에서 필요한 것을 고르고 선택할 수 있습니다.

Answer 4

필요한 기능은 jQuery의 jQuery.ready.promise 기능으로 수행됩니다.

코드의 해당 부분 만 추출하여 사용할 수 있습니다.당신은 질문이 아닙니까 꽤 무엇 https://github.com/jquery/jquery/blob/master/src/core.js

Answer 5

를하지만, 대체 솔루션은 닫는 </body> 태그 앞에, ​​몸의 끝에서 스크립트를 단지를 포함하는 것입니다 :

jQuery.ready.promise = function(object) { 
if (!readyList) { 

readyList = jQuery.Deferred(); 

// Catch cases where $(document).ready() is called after the 
// browser event has already occurred. 
if (document.readyState !== "loading") { 
// Handle it asynchronously to allow scripts the opportunity to delay ready 
setTimeout(jQuery.ready, 1); 

// Mozilla, Opera and webkit nightlies currently support this event 
} else if (document.addEventListener) { 
// Use the handy event callback 
document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 

// A fallback to window.onload, that will always work 
window.addEventListener("load", jQuery.ready, false); 

// If IE event model is used 
} else { 
// ensure firing before onload, 
// maybe late but safe also for iframes 
document.attachEvent("onreadystatechange", DOMContentLoaded); 

// A fallback to window.onload, that will always work 
window.attachEvent("onload", jQuery.ready); 

// If IE and not a frame 
// continually check to see if the document is ready 
var toplevel = false; 

try { 
toplevel = window.frameElement == null; 
} catch(e) {} 

if (document.documentElement.doScroll && toplevel) { 
doScrollCheck(); 
} 
} 
} 
return readyList.promise(object); 
}; 

현재 위치를 볼 수 있습니다. 이렇게하면 jQuery의 축소 버전을 포함하지 않고도 동일한 결과를 얻을 수 있습니다.

document.ready 함수의 포인트는 DOM 준비가 완료된 후, 즉 브라우저가 모든 HTML을 파싱하고 자바 스크립트에서 조작 할 준비가 된 후에 호출된다는 것입니다. 본문 끝 부분에 JS 코드를 넣으면 브라우저가 문서를 파싱하는 동안 JavaScript를 실행하고 JS가 실행될 때 이미 구문 분석 된 DOM 요소에 액세스 할 수 있기 때문에 동일한 효과가 발생합니다. 위의 스크립트 블록 내에서 (인라인 포함 된 경우

// CHANGE THE FOLLOWING: 

$(document).ready(function() { 
    var myField = document.getElementById("someId"); 
    alert(myField.value); 
}); 

// TO BE 

var myField = document.getElementById("someId"); 
alert(myField.value); 

그것은 중요하지 않습니다 : 당신은 당신의 코드가 실행 될 방법을 묻는 의견에이 아이디어를 언급

, 그래서 여기에 간단한 예제), 또는 본문 끝에있는 한 스크립트 태그에 포함 된 외부 JS 파일에 저장됩니다.

유일한 문제는 코드가 함수 내에 포함되어 있지 않기 때문에 전역 변수를 생성한다는 것입니다. 일반적으로 피하기를 원하지 않는 것은 미래에 다른 외부 라이브러리를 포함하려고 시도 할 수 있기 때문입니다 동일한 이름의 변수를 정의 할 수 있습니다. - 익명 함수 주위에 사람이 함수 표현보다는이 아무튼 의미 함수 선언 (수 있도록 여분의 괄호가

(function() { 
    var x = "these variables are not global", 
     myField = document.getElementById("someId"); 
    alert(myField.value); 

    function test() { 
     alert("this function isn't global either"); 
    } 
    test(); 
})(); 

참고 : 당신은 즉시 호출 익명 함수 표현식에서 코드를 래핑하여이 문제를 방지 할 수 있습니다 이름이 필요 없다), 결국에는 함수가 즉시 호출된다.

지금 읽고있는 스택 오버플로 페이지에서 페이지 소스를 보면 몸의 끝에 JS를 배치 한 실제 사례를 볼 수 있습니다.