jQuery를 두 번 선언하는 이유는 무엇입니까?

jQuery를 두 번 선언하는 이유는 무엇입니까?

---

이 질문에 이미 답변이 있습니다.

• 두 개의 다른 호출로 스크립트를 포함하는 이유는 무엇입니까? 6 답변

다음 코드의 목적은 무엇입니까?

아래의 두 번째 스크립트 코드 앞에는 jquery.min.js이미 googleapis.

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

---

CDN 이 다운되거나 도달 할 수 없을 jquery.min.js때 동일한 서버에 저장된 파일 로 대체하는 것 입니다.

본질적으로 다음과 같습니다.

// 1. Try to download and run https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

// 2. Was jQuery successfully loaded from the CDN? If so, it will be defined:
if (window.jQuery) {
    // Yes, it's defined. Good. Nothing more needed.
}
else {
    // No, it's not defined. Use my copy:
    document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')
}

여기에서 자세한 내용을 읽고 여기 에서 원본 코드를 찾을 수 있습니다 .

window.jQuery || document.write(...)그것에 관해서 는 본질적으로 위의 코드에 대한 속기입니다. 정의 된 window.jQuery경우 진실성이 있으므로의 오른쪽에있는 명령문 이 실행 || 되지 않습니다 . 이 정의되어 있지 않은 경우 그러나, 그것은 것입니다 falsy 와의 오른쪽에있는 문 || 합니다 실행.

---

먼저 Google의 CDN에 호스팅 된 버전을 사용하려고합니다. 사이트를 보는 사람이 다른 사이트를 방문하여 캐시 된 정확한 스크립트를 이미 가지고있을 가능성이 있으므로 먼저 시도해 보는 것이 좋습니다.

CDN에 버전을로드하는 경우, window.jQuery는 설정되어 또는 단락되고, 코드 이동합니다.

어떤 이유로 CDN 버전을로드 할 수없는 경우 로컬에서 호스팅되는 스크립트 버전을 가리키는 페이지에 다른 스크립트 태그를 추가합니다.

편집 : MTCoster가 위의 주석 에서 지적했듯이이 트릭은 JavaScript가 정상적으로로드되는 방식에 의존합니다. 브라우저는 태그가로드되거나 시간이 초과 될 때까지 실행을 일시 중지합니다. async 속성을 사용하여 jQuery가 비동기 적으로로드 된 경우이 트릭은 작동하지 않습니다.

---

첫 번째 스크립트는 외부 웹 사이트 (이 경우 Google CDN)에서 jQuery를로드하려고 시도합니다.

두 번째는에서 jQuery 객체를 찾으려고 시도하고 찾을 수 window없는 경우에만 내부 링크에서 라이브러리를로드합니다. CDN이 실패하는 경우에만 대체됩니다.

window.jQuery || document.write(...)
// the code above means the same as the code below
if (window.jQuery === undefined) document.write(...)

자바 스크립트에는 부울 (true / false) 외에 진실과 거짓 값이 있습니다. 서로 다른의 건 0, false, undefined및 nulltruthy 값입니다.

이 경우 jQuery속성이 창에 존재하면 객체가되고 진리 값이 될 것이므로 두 번째 문은 실행되지 않습니다 (첫 번째 문이 이미 참이기 때문에-그리고 OR연산자에 있으면 의 문장이 참이면 나머지는 건너 뜁니다 (왼쪽에서 오른쪽으로).

경우, 비록 jQuery속성이 존재하지 않는 첫 번째 스크립트가 제대로로드되지 않았고, 재산이 될 것입니다 때문입니다 undefined하는 falsy 값입니다. 따라서 두 번째 문이 실행되고 로컬 jQuery가 폴백으로로드됩니다.

---

방화벽에 의해 차단, CDN 다운 등과 같은 어떤 이유로 CDN의 jquery에 도달하지 못하면 대체 메커니즘입니다.

작년에 직면했던 실용적인 시나리오를 하나 더 추가하겠습니다. 내 클라이언트 중 한 명이 인터넷 가용성없이 LAN에서 내가 만든 웹 애플리케이션을 호스팅하고 사용하기로 결정했습니다. 로컬 IIS를 사용하면 응용 프로그램이 제대로 배포되었지만 CDN 비 가용성으로 인해 실패했습니다. 문제에서 언급 한 코드를 사용했다면 웹 앱이 변경없이 처음으로 작동했을 것입니다.

나는 그것이 지금 의미가 있기를 바랍니다. :) 저에게 그것은 배운 교훈이었습니다.

참고 URL : https://stackoverflow.com/questions/36879025/why-declare-jquery-twice