jquery 프로그래밍의 표준 쓰기 및 최적 실천 (jquery 코드 규범)

jquery의 코드 규범, 쓰기 기준과 최선의 실천은 제가 최근에 본 외국의 글입니다. 많은 이익을 얻었습니다!인터넷에 검색해 보니 역시 네티즌이 번역한 적이 있다. 그러나 번역 기간은 2014년 3월경이고 나는 이 글의 업데이트 기간은 2014년 10월 14일이다.틀림없이 이 문장은 아주 오래 전에 세상에 나왔을 것이다. 그러나 작가는 또 많은 문제를 바꾸었기 때문에 스스로 다시 번역하기로 결정했다!원문 주소, 문장 번역도 시간과 힘을 소모하는 일입니다. 네티즌이 전재할 때 출처를 밝혀 주십시오!링크 추가!jQuery의 로드 1. 우리는 자주 CDN으로 웹 페이지를 로드합니다. 제 이전 글에서도 여러 번 언급했습니다. 클릭해서 CDN을 사용하는 장점을 살펴보고

window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js" type="text/javascript"><\/script>')

CDN 로드와 관련하여 이전 기사의 CDN 공용 라이브러리도 볼 수 있습니다.http://www.haorooms.com/post/cdn_all2. 만약에 원격 서비스에 연결할 수 없기 때문에 로컬에서 같은 버전의 코드를 백업하는 것이 가장 좋다. 자세한 내용은 여기에 있다.3. 누드 프로토콜의 URL(http:또는https:을 제외)을 사용합니다. 위 코드에서 보여준 바와 같이 제가 앞서 언급한 바와 같이 CDN을 불러오면 http를 절약할 수 있습니다. 글 참조:http://www.haorooms.com/post/web_qd_html_leng4. 가능하면 자바스크립트와 jQuery 코드를 페이지 밑에 놓으세요.내가 전에 쓴 js 불러오는 순서에 관한 문제는 js 성능 최적화를 언급한 적이 있다. 구체적으로 보면 다음과 같다.http://www.haorooms.com/post/web_xnyh_jscss5. 어떤 버전을 사용해야 합니까?IE678과 호환하고 싶으면 2.x의 버전은 호환성을 고려하지 않는 극소수를 대상으로 최신 버전의 jQuery를 사용하는 것을 추천합니다. CDN 서버에서 jQuery를 불러올 때 버전 전체를 쓰는 것이 좋습니다. (예를 들어 1.11.0이 아니라 1.11, 또는 직접 1을 쓰는 것) 중복 불러오지 말고 여러 번 불러오지 마십시오. jquery CDN에서 jquery-latest를 불러오지 마십시오.구체적으로
6. 만약에 다른 JS 프레임워크, 예를 들어Prototype, MooTools, Zepto 등을 동시에 사용한다면 이 프레임워크 중 일부는 $기호를 사용했기 때문에 $로 jQuery 인코딩을 하지 말고'jQuery'로 대체하세요.$을(를) 호출합니다.noConflict()는 충돌이 발생하지 않도록 보장합니다.7. 브라우저가 일부 새로운 특성에 대해 지원하는지 확인하려면Modernizr를 사용하십시오.
변수 정보
1. jQuery 유형의 변수는 $접두사를 붙이는 것이 좋습니다.2、자주 jQuery 선택기에서 되돌아오는 내용을 다시 사용하기 위해 변수에 저장합니다

var $myDiv = $("#myDiv");$myDiv.click(function(){...});

3、camel case를 사용하여 이름 짓기
선택기 정보
1. 가능한 한 ID 선택기.실제적으로 운용하는 것은 js의document이다.getElementById() 를 사용하면 다른 선택기보다 속도가 빠릅니다.2. 클래스 선택기를 사용할 때 테이블에서 요소의 유형을 지정합니다.성능 비교

var $products = $("div.products"); //  
var $products = $(".products"); //  

3. ID 아버지 컨테이너 아래에서 하위 요소를 찾습니다.find () 방법입니다.이렇게 빨리 하는 이유는 id 선택 요소를 통해 Sizzle 엔진을 사용하지 않기 때문입니다.자세한 내용은 여기를 보세요.

// BAD, a nested query for Sizzle selector engine
var $productIds = $("#products div.id");

// GOOD, #products is already selected by document.getElementById() 
so only div.id needs to go through Sizzle selector engine
var $productIds = $("#products").find("div.id");

4. 다중 검색에서 오른쪽은 최대한 상세하게 지정하고 왼쪽은 최대한 간단하게 한다.자세히 보기'

//   
$("div.data .gonzalez");

//    
$(".data td.gonzalez");

5. 중복을 피한다.상세 정보 또는 성능 비교 보기

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

//     ：        
$(".data td.gonzalez");

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

//      ：        DOM   .class
$('.class');

//     ：                
$('.class', '#class-container');

7. 만능 선택기를 사용하지 않는다.세부 정보 보기

$('div.container > *'); //  
$('div.container').children(); //  

8. 은밀한 만능 선택기를 경계한다.생략된 경우 * 기호 와일드카드를 사용합니다.추가 정보

$('div.someclass :radio'); //  
$('div.someclass input:radio'); //  

9.ID는 이미 유일함을 표시하고 뒤에 사용된 것은 문서입니다.getElementById () 를 사용하므로 다른 선택기와 혼동하지 마십시오.

$('#outer #inner'); //  
$('div#inner'); //  
$('.outer-container #inner'); //  
$('#inner'); //     ，      document.getElementById()

DOM 작업
1. 요소를 작업하기 전에 문서에서 제거한 다음 붙여넣습니다.보다

var $myList = $("#list-container > ul").detach();
//...a lot of complicated things on $myList
$myList.appendTo("#list-container");

2. 연결 문자열이나 그룹join()을 사용하고 append()를 사용합니다.성능 비교:http://jsperf.com/jquery-append-vs-string-concat

//   
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("
"+i+"
");
}

// GOOD
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "
"+i+"
";
}
$myList.html(list);

// EVEN FASTER
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "
"+i+"
"; 
}
$myList.html(array.join(''));

3. 부족한 요소를 사용하지 말고 구체적으로 보십시오

// BAD: This runs three functions before it realizes there's nothing in the selection
$("#nosuchthing").slideUp();

// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

이벤트
1. 한 페이지에 문서ready 이벤트만 쓰는 처리 프로그램.이렇게 하면 코드가 뚜렷하고 디버깅하기 쉬울 뿐만 아니라 코드의 프로세스를 추적하기 쉽다.2. 익명 함수로 이벤트의 리셋을 하지 마세요.익명 함수는 디버깅과 유지보수 테스트, 복용이 쉽지 않습니다.어쩌면 네가 진지하게 생각하고 있을지도 모르니, 여기를 봐라

$("#myLink").on("click", function(){...}); //     

//   
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

3. 문서ready 이벤트를 처리하는 리셋도 익명 함수를 사용하고 익명 함수는 디버깅 유지보수 테스트와 복용이 쉽지 않습니다.

$(function(){ ... }); //      ：                 

//     
$(initPage); //    $(document).ready(initPage);
function initPage(){
    //               
}

4. 더 나아가ready 이벤트 처리 프로그램을 외부 파일에 넣고 페이지에 도입하는 것이 좋습니다. 페이지에 포함된 코드는 호출만 하면 됩니다.

    //             
    $(document).ready(initPage); //    $(initPage);

5. HTML에 연결된 JS 코드를 천만 표에 쓴다. 이것은 디버깅의 악몽이다!항상 jQuery로 이벤트 자체 프로그램을 연결해야 합니다. 그러면 언제든지 동적 연결을 취소할 수 있습니다.

my link 
$("#myLink").on("click", myEventHandler); // GOOD

6. 귀속 이벤트 처리 프로그램에서 가능한 한 이름 공간을 사용하면 다른 귀속에 영향을 주지 않고 쉽게 귀속을 취소할 수 있습니다.

$("#myLink").on("click.mySpecialClick", myEventHandler); //   
//   ，          $("#myLink").unbind("click.mySpecialClick");

7. 어떤 원소의 하위 원소를 선택할 때 가능한 한 뒤에서 선택하고 앞에서 선택하지 않는다.다음과 같습니다.

$("#list a").on("click", myClickHandler); // BAD, you are attaching an event to all the links under the list.
$("#list").on("click", "a", myClickHandler); // GOOD, only one event handler is attached to the parent.

Ajax 비동기 작업
1.쓰지 마세요.getJson() 또는.get(), 직접 $.ajax (), jQuery 내부에서 전자를 $로 바꿀 수 있기 때문입니다.ajax() 2.테이블은 HTTPS 사이트에서 HTTP를 사용하여 요청을 하는데, 아예 테이블에 지정하는 것이 좋다. (HTTP 또는 HTTPS를 URL에서 제거하는 것)표에 링크 안에 파라미터를 박아 넣으면 전문적인 파라미터 설정을 사용하여 전달하십시오

//        ...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});

//     ...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4. 어떤 데이터를 처리해야 하는지 스스로 알 수 있도록 데이터 형식을 최대한 가리키기 위해 (아래에 언급된 Ajax 템플릿 참조) 5.비동기적으로 동적 불러오는 내용에 대해서는 이벤트 처리 프로그램을 연결하기 위해 에이전트를 사용하는 것이 좋습니다.이러한 장점은 이후에 동적으로 불러오는 요소 이벤트에도 효과가 있다는 것이다.자세히 보기

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

6. Promise 모드를 사용합니다.더 많은 예

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

7. 표준 Ajax 템플릿은 다음과 같습니다. 공식 사례를 보십시오.

var jqxhr = $.ajax({
    url: url,
    type: "GET", //    GET,         
    cache: true, //    true,   script,jsonp   false,      
    data: {}, //         .
    dataType: "json", //          
    jsonp: "callback", //       JSONP     
    statusCode: { //               
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

애니메이션 및 효과
1. 한결같은 스타일의 통일된 애니메이션 실현을 유지한다.사용자 체험에 따라 애니메이션 효과를 남용하지 말고 간결한 디스플레이 숨김, 상태 전환, 슬라이딩 슬라이딩 등 효과로 요소를 보여주고 미리 설정한 값으로 애니메이션의 속도'fast','slow'또는 400(중속도)을 설정하지 마세요.
플러그인 관련
1. 좋은 지원이 있고 문서가 완벽하며 전면적으로 테스트되었고 지역사회가 활발한 플러그인을 선택한다.사용하는 플러그인이 현재 사용하는 jQuery 버전과 호환되는지 주의하십시오.일부 일반적인 기능들은 jQuery 플러그인으로 써야 한다.jQuery 플러그인 작성 템플릿
체인 구조
1. 변수로 jQuery 선택기를 되돌려준 결과를 저장하는 것 외에 체인 호출도 잘 할 수 있다.

$("#myDiv").addClass("error").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 {/*    */
    color: red;
    font-weight: bold;
}
$("#mydiv").addClass("error"); 

3. 항상 공식 Changelog에 주목하고 버리는 방법을 쓰지 마세요.이 단추를 누르면 모든 폐기된 방법을 볼 수 있습니다 4.기본 JavaScript를 적시에 사용합니다.기본 성능은 상당히 좋을 것입니다. 성능 비교를 보십시오.

$("#myId"); //         ...
document.getElementById("myId");

역자 소결
위의 좋은 글씨는 정말 잘 쓴 것 같아. 몇 번 더 보면 절대 좋을 거야!jquery의 새로운 버전에 대해 많은 사용법을 폐지했습니다. 지금까지 저는 라이브 () 방법을 자주 사용하고 있습니다. 때로는 클릭을 동적으로 호출할 때 사용하지만 폐기된 방법을 사용하지 마세요!새 jquery가 지원되지 않습니다!
jquery 프로그래밍의 표준 쓰기 및 최적 실천