Jquery 로드 방법의 결함은 무엇입니까?
- 青灯夜游원래의
- 2023-01-28 15:17:352739검색
jquery 로드 방법의 결함: 1. 로드 방법은 헤드, 본문 및 스크립트 태그를 자동으로 무시합니다. 2. 동적 로드 후에 스크롤 막대 오프셋 문제가 발생합니다. 0);"는 해결 가능합니다. 3. 네트워크 지연 및 기타 문제로 인해 어떤 코드를 먼저 실행해야 할지 확실하지 않습니다. 4. 캐싱 문제가 있습니다. 5. 구조적 손상 문제가 있습니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.
jquery load() 메서드는 제목 표시줄 및 하단 정보 부분과 같은 페이지의 문서 부분을 복제하는 데 도움이 될 수 있습니다. 템플릿 html을 추출한 다음 load 메소드를 통해 각 페이지에 동적으로 로드할 수 있습니다. 사용 중에 여러 문제가 발생했습니다
결함 1: 로드 방법은 헤드, 본문 및 스크립트 태그를 자동으로 무시합니다
1. div에 콘텐츠를 래핑한 다음 로드할 수 있습니다.
2. 로드 메소드의 콜백 함수를 통해 스크립트 부분을 동적으로 생성하고 로드할 수 있습니다.
3. 스타일 시트를 동적으로 로드하는 것은 권장되지 않습니다. 즉, 페이지가 새로고침되면 렌더링 스타일이 없는 그림이 1초 동안 나타났다가 일반 그림으로 돌아옵니다(아래와 같은 이유)
페이지 새로 고침 후에 오프셋이 발생합니다. 스크롤 막대 오프셋.
일반적인 상황에서는 js가 브라우저 렌더링을 차단하는 것을 방지하기 위해 문서 본문 끝에 스크립트 파일을 배치합니다. 이로 인해 페이지가 렌더링된 후 로드 메서드가 실행됩니다. , 헤더 부분을 동적으로 로드한 후 스크롤 막대가 처음부터 상단에 고정되어 스크롤 막대가 아래로 내려가고 상단으로 돌아오지 않습니다
의 콜백 함수에 $(를 추가하세요. load method document).scrollTop(0);
또는 스크립트 태그의 async 속성을 사용하여 js 스크립트를 비동기적으로 로드한 다음 헤드에 스크립트를 넣습니다
결함 3: 비동기 로딩 문제
로드가 비동기적으로 트리거되므로 다음 메서드의 두 줄의 코드가 모두 동시에 실행됩니다. 네트워크 지연 및 기타 문제로 인해 어떤 문장이 먼저 실행될지 확실하지 않습니다.
그리고 8f66823999c2a7ee0388a3b871b519ceinit< with the id of templateId 로드를 통해 ;/div> 요소가 로드됩니다.
뒤 세 번째 줄의 $("#templateId").html("hellow");가 먼저 실행되면 $ ("#templateId")를 찾을 수 없습니다. Less than(div가 현재 로드되지 않았습니다), html("hellow") 작업이 실제로 수행되지 않습니다.
function load(targetId,templateName) {
$("#"+targetId).load(contextPath+templateName);
$("#templateId").html("hello");
}결함 4: 캐싱 문제
많은 브라우저가 요청 서버의 부하를 줄이려고 하기 때문에 동일한 요청 주소를 만들고 로컬 캐시의 기록 데이터를 최적화하므로 주소 뒤에 몇 가지 동적 접미사를 추가해야 합니다.
function load(targetId,templateName) {
var nowDate = new Date();
var randomId = nowDate.getTime();//防缓存
$("#"+targetId).load(contextPath+templateName+"?"+randomId);
}결함 5: 구조적 손상 문제
트랩 1(캐시(문제))에서는 더 깊은 문제, 즉 로드로 얻은 데이터가 100db36a723c770d327fc0aef2ce13b1 사양을 따르지 않는 경우, 그러면 원래 DOM 구조가 파괴되어 후속 DOM 및 기타 노드 예외가 발생합니다.
예를 들어, 로드로 얻은 데이터가
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>인 경우, 그러면 결국 불규칙한 HTML 클로저가 생성됩니다. 다음 번에 DOM을 검색할 때 가져오지 못할 수 있습니다. 여기서는 원래 구조가 파괴되기 때문에
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext"><textarea><</textarea>
</body>
</html>
이때 생성된 구조를
function load(targetId,templateName) {
var nowDate = new Date();
var randomId = nowDate.getTime();//防缓存
$("#"+targetId).load(contextPath+templateName+"?"+randomId,{},function (responseTxt){
$("#"+targetId).val(responseTxt);
});
}로 변경할 수 있습니다. 이때 html 요소는 dom 노드로 사용되지 않고 텍스트 필드의 원본 텍스트로 삽입되므로 원본 dom이 파괴되지 않으므로 다음번에는 값이 정상이 됩니다
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext">"\<textarea\>\<"</textarea>
</body>
</html>[ 추천 학습:
jQuery 동영상 튜토리얼위 내용은 Jquery 로드 방법의 결함은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!