효율적인 jQuery code_jquery 작성을 위한 4가지 원칙과 5가지 팁-JS 튜토리얼-php.cn

효율적인 jQuery code_jquery 작성을 위한 4가지 원칙과 5가지 팁

WBOY

풀어 주다： 2016-05-16 16:51:19

원래의

950명이 탐색했습니다.

jQuery 작성 원칙:

1. jQuery를 과도하게 사용하지 마세요

1. jQuery는 아무리 빠르더라도 네이티브 자바스크립트 방식과 비교할 수 없으며, 생성된 jQuery 객체에는 엄청난 양의 정보가 담겨 있습니다. 따라서 사용할 수 있는 네이티브 메소드가 있는 경우에는 jQuery를 사용하지 않는 것이 좋습니다.

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

$("a").click( function() {
Alert($(this).attr("id"));
});
//개선됨↓
$("a").click(function() {
경고(this.id);
});

2. 많은 jQuery 메소드에는 jQuery 객체용 버전과 jQuery 함수용 버전이 있습니다. 후자는 jQuery 객체를 통해 작동하지 않기 때문에 상대적으로 오버헤드가 적고 속도가 빠릅니다.

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

var $text = $("#text "); 
var $ts = $text.text();
//개선됨↓
var $text = $("#text");
var $ts = $.text( $text );

여기에는 "$.text()"의 내장 함수가 있으며, 다른 유사한 함수로는 "$.data()" 등이 있습니다.

2. jQuery 객체 캐싱

DOM 요소를 찾는 것은 실제로 많은 메모리 오버헤드를 수반합니다. 선택기를 가능한 한 적게 사용해야 하며, 나중에 반복적으로 사용할 수 있도록 선택한 결과를 최대한 많이 캐시해야 합니다. 동일한 선택기가 두 번 이상 표시되지 않도록 하세요.

예:

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

$(" #top") .find("p.classA");
$("#top").find("p.classB");
개선됨↓
var 캐시됨 = $("#top "); 
cached.find("p.classA");
cached.find("p.classB");

3. DOM 구조 변경을 줄입니다.

DOM 구조를 여러 번 변경하려면 변경할 부분을 먼저 꺼냈다가 변경이 완료된 후 다시 넣어주세요. 여기서의 기본 아이디어는 메모리에 실제로 원하는 것을 구축한 다음 마지막에 가장 효율적인 업데이트 DOM 작업을 수행하는 것입니다.

예:

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

var top_100_list = [... ], // 여기에 100개의 문자열 배열이 있습니다. 
$mylist = $("#mylist") 
for (var i=0, l=top_100_list.length; i $mylist.append("" top_100_list[i] "
") // DOM 작업 100개 
}
개선 후↓
var top_100_list = [. ..],
$mylist = $("#mylist"),
top_100_li = ""; // 이 변수는 변경된 문자열을 저장하는 데 사용됩니다
for (var i=0, l =top_100_list .length; i top_100_li = "" top_100_list[i] "
";
} 
$mylist.html(top_100_li); // DOM 작업은 하나만 있습니다 

4. 명명 규칙

jQuery 코드는 필연적으로 JS 코드와 혼합됩니다. jQuery 코드를 엄격하고 질서있게 만들고 고유한 명명 규칙을 표준화하는 방법은 코드를 더 잘 향상시킬 수 있습니다. 가독성.

1. 함수 이름: function getResultByUserId(){..}, 카멜식 이름 지정 방법을 따르며, 첫 글자는 소문자로, 단어의 첫 글자는 대문자로 사용하세요. 방법의 목적.

은 다음과 같이 정의할 수도 있습니다.

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

$.flushCartItemList = function() {
 isAjaxDate = true;
}

2. 매개변수 이름: function method(recordIdx, RecordVal){..}, 함수 이름과 동일하게 매개변수에 약어를 사용해 보세요.
이름은 의미가 있어야 하며, index: idx; value: val; name: nm;

3. 변수 이름: var user_id; var user_list_tab; var user_list_tr_1;, 일반적으로 "naming_element_index" 규칙에 따라 단어로 구분됩니다.

JQuery 객체의 변수 이름 앞에는 "$"가 붙어야 자바스크립트 객체와 구별됩니다.

jQuery 글쓰기 능력:

1. 셀렉터 선택

선택기는 jQuery의 기본입니다. 가장 효율적인 선택기를 선택하려면 먼저 다양한 선택기의 성능 차이를 이해해야 합니다.

①ID 선택기 및 태그 요소 선택기: $("#ID") $("Tag");

jQuery는 내부적으로 브라우저의 기본 메소드(getElementById();, getElementByTagName();)를 자동으로 호출하므로 실행 속도가 빠릅니다.

②클래스 선택기: $(".Class");

jQuery는 클래스=클래스인 DOM 개체를 찾기 위해 모든 DOM 노드를 순회하므로 실행 속도가 느립니다.

③유사 클래스 선택자 및 속성 선택자: $(":Type") $("[Attribute='Value']");

브라우저에는 이에 대한 기본 메소드가 없기 때문에 이 두 선택기는 실행 속도가 가장 느립니다. 그러나 일부 타사 브라우저에 querySelector() 및 querySelectorAll() 메서드가 추가되어 이러한 유형의 선택기 성능이 크게 향상될 수도 있습니다.

2. 연쇄 글쓰기

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

$("div").find("h3" ).eq (2).html("안녕하세요");

체인 쓰기 방법을 사용하면 jQuery는 각 단계의 결과를 자동으로 캐시하므로 비체인 쓰기 방법(수동 캐싱)보다 빠릅니다.

3. 효율적인 순환

루프는 항상 시간이 많이 걸리는 작업입니다. for 및 while JavaScript의 기본 루프 메서드는 jQuery의 ".each()"보다 빠릅니다. 그리고 for 루프에 관해서는 다음과 같은 작성 방법이 가장 효율적입니다.

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

for (var i = 0, len = array.length ; i < len i ) {
 // 경고(i);
}

변수를 먼저 선언한 다음 루프 작업을 수행합니다. "for (var i in arr)" 배열을 순회하는 것보다 효율성이 훨씬 높으며, 배열 길이 "for(var)"를 얻기 위해 루프하는 것보다 더 효율적입니다. i = 0; i < arr.length i )"는 매우 효율적입니다!

4. 문자열 접합

문자열 접합은 개발 중에 자주 발생합니다. "=" 메서드를 사용하여 문자열을 접합하는 것은 매우 비효율적입니다. 배열의 ".join()" 메서드를 사용할 수 있습니다.

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

var array = [];

for(var i = 0; i < 10000; i ){

array[i] = "";
}
document.getElementById("one").innerHTML = array.join("");

저는 원래 배열 방식인 ".push()"를 즐겨 사용했습니다. 사실 arr[i]나 arr[arr.length]를 직접 사용하는 것이 더 빠르지만 차이는 크지 않습니다.

5. 페이지 로드

$(function(){})는 실제로 유용하지만 모든 DOM 요소가 로드된 후에 완료됩니다. 페이지가 항상 로드되는 경우 이 기능으로 인해 발생한 것일 가능성이 높습니다. $(window).load 이벤트에 jQuery 함수를 바인딩하여 페이지가 로드될 때 CPU 사용량을 줄일 수 있습니다.

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

$(window).load(function( ){
 // 페이지가 완전히 로드된 후 초기화되는 jQuery 함수(모든 DOM 요소 및 JS 코드 포함) 
});

드래그 앤 드롭, 시각 효과 및 애니메이션, 숨겨진 이미지 미리 로드 등과 같은 일부 특수 효과 기능이 이 기술에 적합합니다.