jquery_jquery의 고급 프로그래밍 모범 사례에 대한 자세한 설명

jQuery 로딩

1. jQuery를 로드하기 위해 CDN을 고집하세요. 다른 사람의 서버를 활용하여 무료로 파일을 호스팅하는 것은 어떨까요? CDN 사용의 이점을 보려면 클릭하고, 일부 주요 jQuery CDN 주소를 보려면 여기를 클릭하십시오.

코드 복사 코드는 다음과 같습니다.

<script>window.jQuery || document.write ('&lt ;script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>')

2. 보안상의 이유로 위 코드와 같이 원격 CDN 서버에서 jQuery를 가져올 수 없는 경우에도 웹사이트가 작동할 수 있도록 로컬 백업을 제공하는 것이 가장 좋습니다. 자세한 내용은 여기를 참조하세요.

3. 위 코드와 같이 기본 프로토콜 URL을 사용합니다(즉, http: 또는 https: 제거).

4. 가능하다면 JavaScript 및 jQuery 코드를 페이지 하단에 넣으세요. 자세한 내용을 보려면 여기를 클릭하거나 표준 HTML5 페이지 템플릿을 확인하세요.

5. 어떤 버전을 사용해야 하나요?

IE678과 호환되기를 원한다면 버전 2.x를 사용하세요
호환성을 고려할 필요가 없는 소수의 경우 최신 버전의 jQuery를 사용하는 것이 좋습니다
로딩 시 CDN 서버에서 jQuery를 사용하는 것이 가장 좋습니다(예: 1.11 대신 1.11.0 또는 1을 직접 작성)
반복적으로 로드하지 마세요
6. Prototype 등 다른 JS 프레임워크도 사용하는 경우 MooTools, Zepto Yunyun 등은 $ 기호도 사용하므로 더 이상 jQuery 인코딩에 달러 기호를 사용하지 않고 대신 'jQuery'를 사용합니다. 그리고 $.noConstrict()를 호출하면 충돌이 발생하지 않습니다.

7. 브라우저가 몇 가지 새로운 기능을 지원하는지 확인하려면 Modernizr을 사용하세요. 전면 광고: 브라우저가 감지되지 않는 문제

변수에 대하여

1. jQuery 유형 변수에는 $ 접두사를 추가하는 것이 가장 좋습니다.

2. jQuery 선택기에서 반환된 내용을 재사용을 위해 항상 변수에 저장하세요.

코드 복사 코드는 다음과 같습니다. 다음:

var $products = $("div.products") // 느림
var $products = $(".products") // 빠름

3. 카멜케이스 명명을 사용하세요

선택자 정보

1. ID 선택기를 사용해 보세요. 그 뒤에 있는 메커니즘은 실제로 기본 document.getElementById()를 호출하는 것이므로 다른 선택기보다 빠릅니다.

2. 클래스 선택기를 사용할 때 요소 유형을 지정합니다. 믿을 수 없다면 이 성능 비교를 보세요

코드 복사 코드는 다음과 같습니다

var $products = $( "div.products"); // 느림
var $products = $(".products") // 빠름

3. ID 상위 컨테이너에서 하위 요소를 찾으려면 .find() 메소드를 사용하세요. 이것이 빠른 이유는 ID로 요소를 선택할 때 Sizzle 엔진을 사용하지 않기 때문입니다. 자세한 내용은 여기를 참조하세요

4. 다단계 검색에서는 오른쪽은 최대한 상세하고 왼쪽은 최대한 단순해야 합니다. 자세히보기

코드 복사 코드는 다음과 같습니다.

// 못생긴
$ (" div.data .gonzalez");
// 최적화 후
$(".data td.gonzalez");

5. 중복을 피하세요. 자세한 내용 또는 성능 비교 보기

코드 복사 코드는 다음과 같습니다.

$(". data table.attendees td.gonzalez");

// 좋은 방법: 중간에 중복을 제거하세요
$(".data td.gonzalez");

6. 선택 컨텍스트를 지정합니다.

코드 복사 코드는 다음과 같습니다.

// 잘못된 코드: 필요하기 때문에 전체 DOM을 탐색하여 .class
$('.class');
// Gaopin 코드: 지정된 컨테이너 범위 내에서만 검색하면 되기 때문입니다
$('.class', '# 클래스-컨테이너') ;

7. 테이블은 범용 선택기를 사용합니다. 자세한 설명 보기

코드 복사 코드는 다음과 같습니다.

$('div .container > * '); // 차이점
$('div.container').children() // 스틱

8. 암시적 범용 선택자를 주의하세요. 생략하면 * 와일드카드 문자가 실제로 사용됩니다. 자세한 내용

코드 복사 코드는 다음과 같습니다.

$('div.someclass : radio' ); // 나쁨
$('div.someclass input:radio') // 훌륭함

9.ID는 이미 고유성을 나타내며 그 뒤에 document.getElementById()가 사용되므로 테이블이 다른 선택기와 혼합됩니다.

코드 복사 코드는 다음과 같습니다.

$('#outer #inner') ; // 지저분함
$('div#inner'); // 지저분함
$('.outer-container #inner') // 불량함
$('#inner'); 깨끗하고 깔끔합니다. 백그라운드에서 document.getElementById()

를 호출하면 됩니다.

DOM 운영 관련

1. 문서를 실행하기 전에 모든 요소를 ​​제거한 다음 다시 붙여넣으세요. 이 문제는 더 자세히 설명할 수 있습니다

코드 복사 코드는 다음과 같습니다.

var $myList = $ ("#list-container > ul").detach();
//...$myList
$myList.appendTo("#list-container");
2. 코드에서 HTML을 정리한 후 DOM에 한번에 붙여넣으세요. 구체적으로 성능 비교

// 좋지 않습니다
var $myList = $("#list");
for(var i = 0; i < 10000; i ){
$myList.append( "

" i "

");
}

// 좋습니다
var $myList = $("#list");
var list = "";
for(var i = 0; i list = "

" i "

";
}
$ myList .html(list);

// 하지만 이것이 더 좋습니다
var array = []
for(var i = 0; i < 10000; i ){
array [ i] = "

" i "

"
}
$myList.html(array.join(''));

3. 존재하지 않는 요소를 다루지 마세요. 자세히

코드 복사 코드는 다음과 같습니다.

// 부주의한 관행: jQuery 배경은 running 세 가지 기능을 완료하고 나면 이 요소가 실제로 전혀 존재하지 않는다는 것을 알 수 있습니다
$("#nosuchthing").slideUp();
// 이렇게 되어야 합니다
var $mySelection = $("#nosuchthing") ;
if ($mySelection.length) {
$mySelection.slideUp();
}

이벤트 관련

1. 한 페이지에 문서 준비 이벤트 핸들러를 하나만 작성하세요. 이런 방식으로 코드가 명확하고 디버그하기 쉬우며 코드 진행 상황을 추적하기도 쉽습니다.

2. 테이블은 익명 함수를 이벤트 콜백으로 사용합니다. 익명 함수는 디버깅, 유지 관리, 테스트 및 재사용이 어렵습니다. 좀 더 진지하게 보고 싶다면 여기를 살펴보세요

코드 복사 코드는 다음과 같습니다.

$(" #myLink").on("click", function(){...}) // 이렇게
// 이렇게
function myLinkClickHandler(){... }
$("# myLink").on("클릭", myLinkClickHandler);

3. 문서 준비 이벤트 처리를 위한 콜백도 익명 함수를 사용합니다. 익명 함수는 디버깅, 유지 관리, 테스트 및 재사용이 어렵습니다. (

코드 복사 코드는 다음과 같습니다.

$(function(){ ... }) // 나쁜 습관: 이 함수는 사용할 수 없으며 테스트 케이스도 사용할 수 없습니다. 이를 위해 작성되었습니다

// 좋은 습관
$(initPage); // 또는 $(document).ready(initPage);
function initPage(){
// 여기서 할 수 있습니다. 프로그램 초기화
}

4. 또한, 준비된 이벤트 핸들러를 외부 파일에 넣고 페이지에 도입하는 것이 가장 좋습니다
. 페이지에 포함된 코드만 호출하면 됩니다.

코드 복사 코드는 다음과 같습니다.

<script><br> // 필요한 전역 변수 초기화<br> $(document).ready(initPage); // 또는 $(initPage); <br></script>

5. HTML에 인라인으로 작성된 JS 코드가 수천만 개 있는데, 이는 디버깅의 악몽입니다! 이벤트 자체를 바인딩하려면 항상 jQuery를 사용해야 합니다. 그러면 언제든지 동적으로 바인딩을 해제할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

내 링크
$ ("#myLink").on("click", myEventHandler) // 좋음

6. 가능하다면 이벤트 핸들러를 바인딩할 때 네임스페이스를 사용하여 다른 바인딩에 영향을 주지 않고 쉽게 바인딩을 해제하세요.

코드 복사 코드는 다음과 같습니다.

$("#myLink").on ("click .mySpecialClick", myEventHandler); // 나쁘지 않습니다
// 그 후 정상적으로 바인딩을 해제해 보겠습니다
$("#myLink").unbind("click.mySpecialClick");

비동기 작업

1. .getJson() 또는 .get() 대신 $.ajax()를 직접 사용하세요. 왜냐하면 jQuery는 여전히 내부적으로 이를 전자로 변환하기 때문입니다.

2. HTTP를 사용하여 HTTPS 사이트에 대한 요청을 시작하는 것이 가장 좋습니다(URL에서 HTTP 또는 HTTPS를 제거).

3. 테이블에는 링크에 매개변수가 포함되어 있습니다.

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

// 읽기 쉽지 않은 코드...
$.ajax({
url: "something.php?param1=test1¶m2=test2",
....
});

// 읽기 쉬워졌습니다...
$.ajax({
url: "something.php",
data: { param1: 테스트1, param2: 테스트2 }
});

4. 어떤 종류의 데이터를 처리할지 알 수 있도록 데이터 유형을 지정해 보세요(아래 언급된 Ajax 템플릿 참조)

5. 비동기적으로 동적으로 로드되는 콘텐츠의 경우 프록시를 사용하여 이벤트 핸들러를 바인딩하는 것이 가장 좋습니다. 이것의 장점은 나중에 동적으로 로드되는 요소 이벤트에도 유효하다는 것입니다. 더 알고 싶으실 수도 있습니다

코드 복사 코드는 다음과 같습니다.

$(" #parent- 컨테이너").on("click", "a", DelegatedClickHandlerForAjax);

6. 약속 모드를 사용하세요. 추가 예시

코드 복사 코드는 다음과 같습니다.

$.ajax({ .. . } ).then(successHandler, failureHandler);

// 또는
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

7. 표준 Ajax 템플릿의 경우 1점. 근본 원인 추적

코드 복사 코드는 다음과 같습니다.

var jqxhr = $. ajax({
url: url,
type: "GET", // 기본값은 GET이며 필요에 따라 변경할 수 있습니다.
캐시: true, // 기본값은 true이지만 스크립트의 경우, jsonp 유형이 false인 경우 직접 설정할 수 있습니다.
data: {}, // 요청 매개변수를 여기에 입력하세요.
dataType: "json", // 원하는 데이터 유형을 지정하세요.
jsonp: "callback ", // JSONP 유형 Request를 처리하기 위한 콜백 지정
statusCode: { // 각 상태별 오류를 처리하려는 경우
404: handler404,
500: handler500
}
});
jqxhr.done(successHandler) ;
jqxhr.fail(failureHandler);

애니메이션 및 특수효과

1. 일관되고 통합된 애니메이션 구현을 유지합니다

2. 사용자 경험을 면밀히 관찰하고 애니메이션 특수 효과를 남용하지 마세요

간단한 표시 숨기기, 상태 전환, 슬라이드인 및 슬라이드아웃 효과를 사용하여 요소 표시
미리 설정된 값을 사용하여 애니메이션 속도를 '빠름', '느림' 또는 400(중간 속도)으로 설정 )
플러그인 관련

1. 항상 좋은 지원, 좋은 문서, 철저한 테스트 및 활발한 커뮤니티를 갖춘 플러그인을 선택하세요

2. 사용하는 플러그인이 현재 사용하는 jQuery 버전과 호환되는지 주의하세요

3. 일부 일반적인 기능은 jQuery 플러그인으로 작성되어야 합니다. 1분 jQuery 플러그인 작성 템플릿

체인 구문

1. 변수를 사용하여 jQuery 선택기에서 반환된 결과를 저장하는 것 외에도 체인 호출을 효과적으로 활용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$("#myDiv").addClass ("오류").show();

2. 체인 호출이 3개 이상이거나 바운드 콜백으로 인해 코드가 약간 복잡해지는 경우 코드의 가독성을 높이기 위해 줄 바꿈 및 적절한 들여쓰기를 사용합니다.

코드 복사 코드는 다음과 같습니다.

$("#myLink")
.addClass ("bold")
.on("click", myClickHandler)
.on("mouseover", myMouseOverHandler)
.show();

3. 특히 긴 호출의 경우 변수를 사용하여 중간 결과를 저장하여 코드를 단순화하는 것이 가장 좋습니다.

기타

1. 객체 리터럴을 사용하여 매개변수 전달

코드 복사 코드는 다음과 같습니다.

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external") // 죄송합니다: attr이 세 번 호출되었습니다
// 예, attr
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});

2. CSS와 jQuery 혼합

코드 복사 코드는 다음과 같습니다.

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // 나쁨
.error {/* 좋음*/
색상: 빨간색 ;
글꼴 두께: 굵게;
}
$("#mydiv").addClass("error")

3. 항상 공식 Changelog에 주의하고 버려진 방법을 사용하세요.

4. 적절한 경우 기본 JavaScript를 사용합니다.

코드 복사 코드는 다음과 같습니다.

$("#myId") / / 아직 얼마만큼은 열등할텐데...