사용 범위 :
OA, MIS, ERP 등과 같은 정보 관리 프로젝트의 경우 웹 사이트는 당분간 고려되지 않습니다.
발생하는 문제 :
프로젝트를 완료하려면 종종 jQuery.js, EasyUI 등과 같은 많은 JS 파일을 참조해야합니다. 제가 작성한 JS 파일의 일부 열이 있으므로 어떻게 이러한 파일을 편리하게로드 할 수 있습니까? 파일이 변경되면 클라이언트가 어떻게 캐시를 제 시간에 업데이트 할 수 있습니까? 포인트 작동 효율이 향상 될 수 있다면 더 나을 것입니다.
목표:
1. JS 파일을 쉽게 참조 할 수 있습니다.
2. 서버에서 파일을 자주 읽지 않도록 다양한 캐시를 사용하십시오.
3. JS 파일이 업데이트되거나 추가되거나 축소되면 클라이언트는 자동으로 즉시 업데이트 할 수 있어야합니다.
4. JS 파일 재사용.
페이지 구조 :
일반적으로 OA 및 MIS와 같은 프로젝트는 주로 프레임 세트 또는 iframe을 사용하여 구현되며, 이는 상위 페이지 및 자식 페이지의 개념을 제공합니다. 우리는 이것을 사용하여 소란을 만들 수 있습니다.
웹 페이지는 쉘, 홈페이지, 레이블, 데이터 목록, 양식 (추가, 수정)의 세 부분으로 나눌 수 있습니다. 여기에 JS를로드하는 방법은이 페이지 구조를 사용해야하기 때문에 웹 사이트가 당분간 지원되지 않는 이유는 정확히 있습니다.
이 사진을 보는 것은 친숙해 보입니다. 예, 그게 구조입니다.
텍스트
오늘날 웹 버전 응용 프로그램과 관련하여 타사 jQuery, EasyUi, My97 등과 같은 다양한 JS 및 직접 작성된 다양한 JS에 점점 더 의존하고 있습니다. 점점 더 많은 기능을 구현하고 점점 더 많은 JS를 사용해야하며 더 많은 JS 파일이 자주 수정됩니다. 각 페이지마다 <script src = "">를 많이 쓰는 것과 같은 많은 문제가 발생합니다. 이것은 너무 번거 롭습니다. 새 JS 파일을 추가하려면 몇 페이지를 변경해야합니까? JS 파일을 즉시 업데이트하는 방법은 무엇입니까? 클라이언트로드 J를 더 빨리 만드는 방법. 일부 JS 파일도 종속성이 있습니다. 로딩 순서를 보장하는 방법? 이 기사는 내 솔루션을 공유하는 것입니다.
동적 하중
페이지에 js를로드하기 위해 <cript>를 사용하는 것이 분명히 번거 롭습니다. 어떻게해야합니까? 그것에 대해 생각 한 후에도 여전히 동적 하중을 사용하여 해결합니다. 또한 온라인으로 검색했고 스스로 작성된 방법과 프레임 워크 (Seejs)로 구성된 방법을 포함하여 많은 방법이 있음을 발견했습니다. 때때로 나는 여전히 내가 하나를 만드는 데 더 능숙하다고 느끼기 때문에 혼자서 쓸 계획입니다.
동적으로로드하는 방법? jQuery가 제공 한 방법을 사용하십니까? 이것은 괜찮지 만 페이지는 jQuery와 JS 파일을로드하기 위해 작성한 JS를 참조해야합니다. 다시 말해, 페이지에 두 개의 <cript>를 써야한다면 문제가됩니다. 하나를 쓸 수 있다면 둘을 쓰지 않아야합니다. 하나만더라도 하나 더 있어야합니다. 그래서 나는 혼자서 작은 역동적 인 하중을 직접 작성하기로 결정했습니다.
글을 쓸 수 없다면 어떻게해야합니까? 바이두 이모가 와서 도와줍니다. 모든 종류의 것을 검색 한 후 마침내 비교적 이상적인 방법을 찾았으므로 이것을 사용하겠습니다.
코드 사본은 다음과 같습니다.
/* JS의 동적로드를 구현하는 기능은 인터넷에서 나옵니다. 약간의 수정 후 IE10 */와 호환 될 수 있습니다.
var loadscript =
{
$$ : function (id) {return document.getElementById (id); },
태그 : 함수 (요소) {return document.getElementsByTagName (요소); },
CE : 함수 (요소) {return document.createElement (요소); },
JS : 함수 (URL, 콜백) {
var s = loadScript.ce ( '스크립트');
s.type = "Text/JavaScript";
s.src = URL;
if (document.documentMode == 10 || document.DocumentMode == 9) {
s.onerror = s.onload =로드;
} 또 다른 {
S.OnreadyStateChange = 준비;
s.onerror = s.onload =로드;
}
loadscript.tag ( 'head') [0]. AppendChild (s);
function ready () {/*ie7.0/ie10.0*/
if (s.readystate == '로드'|| s.readystate == 'complete') {
콜백 ();
}
}
함수로드 () {/* chrome/ie10.0*/
콜백 ();
}
}
};
로딩 순서
새 코드가 완료되었습니다. 다음은 다른 JS 파일을로드하는 방법입니다. 파일이 많고 특정 종속성이 있기 때문에 이에 대해 생각하고 JS 파일 사전을 만들고로드 순서를 작성 하여이 순서로로드 할 것입니다.
더 안정적이되기 위해, 나는 하나씩로드하는 방법, 즉 하나의 J를로드 한 다음 다른 J를로드하는 방법을 사용하기로 결정했습니다. 이것은 종속성을 보장합니다. 물론 단점은 로딩 속도가 느려질 것입니다. 일반적으로 웹 페이지에는 여러 JS 파일이로드 될 수 있으며 이는 더 빠릅니다.
캐시를 사용하십시오
일반적으로 브라우저에는 다양한 리소스 (예 : 웹 페이지, 사진, JS, CSS 등)에 대한 캐시가 있으며 이미 가지고있는 경우 더 이상 서버에 다운로드하지 않습니다. 좋아 보이지만 두 가지 문제가 있습니다.
A. 브라우저는 캐시 된 JS 파일이 최신인지 여부를 어떻게 결정합니까?
B. JS 파일이 업데이트되었습니다. 브라우저가 업데이트하도록 강제하는 방법?
브라우저는 어떻게 판단합니까? 특정 단계에 대해 많이 알지 못하지만 JS 파일 I 캐시가 최신인지 묻기 위해 서버로 이동하는 단계가 있다는 것을 알고 있습니다. 그런 다음 로컬 캐시가 최신인지 여부를 결정할 수 있습니다. 그것이 최신 인 경우, 나는 귀찮게하지 않을 것입니다. 그렇지 않은 경우 최신 제품을 다운로드하겠습니다. 즉, 클라이언트에 이미 JS 파일의 캐시가 있더라도 브라우저는 최신인지 여부를 확인해야하며 여전히 서버로 이동하여 요청합니다. 이것은 투쟁입니다. 물론 일반적 으로이 과정은 매우 빠르지 만 때로는이 과정이 매우 느립니다.
따라서 JS로드를 피하려고 시도하는 것이 좋습니다. 따라서 "JS 파일의 재사용"이 소개됩니다.
JS 파일을 업데이트합니다
JS 파일이 업데이트되었지만 브라우저는 캐시가 있었기 때문에 이전 JS 파일을 사용하고 있으며 캐시 된 JS 파일이 최신임을 고집합니다. 어떻게해야하나요?
가장 쉬운 방법은 버전 번호로 JS를로드하는 것입니다. 업데이트가 있으면 버전 번호는 +1입니다. 예를 들어, xxx.js? v = 1입니다. JS 파일이 업데이트 된 후 xxx.js? v = 2입니다. 이런 식으로 JS는 확실히 업데이트됩니다.
간단 해 보이지만이 버전 번호를 추가하는 방법은 무엇입니까? 버전 번호 자체를 업데이트하는 방법은 무엇입니까?
재사용
상위 페이지 (또는 홈페이지)가있는 페이지 구조 인 위의 그림을 먼저 살펴 봐야합니다. iframes에 의해로드 된 몇 개의 페이지가 있으며, 우리는 하위 페이지에 추가합니다.
일반적인 접근법은 상위 페이지에 jquery.js를로드 한 다음 Child 페이지에서 jQuery.js를로드하는 것입니다. 물론, 하위 페이지가 jquery.js를로드 할 때, 캐시에서 직접 추출되며 일반적으로 더 이상 서버를 방해하지 않습니다.
그러나 부모 페이지가로드되었으므로 왜 자식 페이지를 다시로드해야합니까? 부모 페이지에 직접로드해도 괜찮습니까? 나는 온라인으로 검색했고 아무도 그렇게하는 것 같지 않았습니다. 어쩌면 나는 너무 대안이었고,이 방법을 구현하고 싶습니다. 장점은 모든 JS 파일이 상위 페이지에로드되고 Child 페이지는 부모 페이지에로드 된 JS를 직접 사용하여 Child 페이지가 JS 파일을 엉망으로 만들 필요가 없다는 것입니다. 이것은 또한 더 효율적 일 수 있습니다. 결국, 캐시를 사용하여로드하더라도 판단해야합니다. 그런 다음 로딩 작업을 수행 할 때 여전히 약간의 손실이 발생합니다. JS 파일이 많을수록 더 분명합니다.
그래서 구현하는 방법은 그것에 대해 생각하는 것이 간단 해 보입니다.
부모 페이지에서 jQuery를 사용하십시오
var aa = $ ( 'div'); // 부모 페이지에서 모든 div를 찾으십시오
하위 페이지에서 가능합니까?
var bb = top. $ ( 'div'); // div를 찾을 수 있지만, 자식 페이지의 div가 아니라 부모 페이지의 div입니다.
무슨 일이야? 그 이유는 검색 범위입니다. jQuery에는 세 가지 매개 변수가 있습니다. 우리는 보통 첫 번째를 사용하고 후자는 무시됩니다. 그렇다면 두 번째 매개 변수는 무엇입니까? 그것이 검색 범위입니다. 지정되지 않은 경우 jQuery는 어디에서 검색합니까? 페이지에서 $를 호출하는 페이지에서 검색하는 대신 jQuery를로드하는 페이지에서 검색하십시오.
솔루션도 매우 간단합니다. 매개 변수를 추가하십시오.
var bb = top. $ ( 'div', document); // 검색 범위를 지정하십시오 : 서브 페이지의 문서
잠깐, 이것은 매우 성가신 것 같습니다. 스크립트를 작성할 때도이 스크립트가 부모 페이지 또는 자식 페이지에서 실행되는지 여부를 고려해야합니까?
좋아,이 문제를 피하기 위해 간단한 패키지를 만드십시오. 하위 페이지에 함수를 작성하십시오
코드 사본은 다음과 같습니다.
함수 $ (p1) {
반환 상단. $ (P1, Document);
}
좋아, 일이 끝났나요? 물론! 다음에 어떤 일이 일어나는지 예측하려면 다음 분석을 들어보십시오.
추신 : 다음 에피소드 미리보기. 특정 구현 코드이며 아이디어와 아이디어가 있습니다. 당신이 알아야 할 다른 것이 있는지 모르겠습니다. 그렇다면 아래에 회신하십시오. 먼저 감사합니다.