더 좋 은 jQuery 코드 만 들 기
25099 단어 jquery
원문 주소: http://flippinawesome.org/2013/11/25/writing-better-jquery-code/
현재 jQuery 와 JavaScript 의 성능 문 제 를 토론 하 는 글 이 많 습 니 다. 그러나 이 글 에서 저 는 속 도 를 향상 시 키 는 기교 와 제 제안 을 정리 하여 jQuery 와 JavaScript 코드 를 개선 할 계획 입 니 다.더 좋 은 코드 는 더 빠 른 응용 프로그램 을 의미 하고 빠 른 렌 더 링 과 반응 성 은 더 좋 은 사용자 체험 을 의미한다.
우선, 우리 가 기억 해 야 할 가장 중요 한 것 은 jQuery 도 javascript 이다. 즉, 우 리 는 jQuery 와 javascript 에 대해 같은 인 코딩 규칙 과 스타일 가이드, 그리고 가장 좋 은 실천 을 사용 해 야 한 다 는 것 을 의미한다.
또한, 만약 당신 이 자바 script 의 초보 자라 면, 나 는 당신 이 jQuery 를 시작 하기 전에 한번 보 는 것 을 건의 합 니 다 JavaScript best practices for beginners. 화해시키다 writing high quality JavaScript 이 두 문장.
만약 당신 이 이미 jQuery 를 사용 하기 시작 했다 면, 나 는 아래 의 건 의 를 준수 할 것 을 강력 히 건의 합 니 다.
캐 시 변수
DOM 의 옮 겨 다 니 는 것 은 매우 비 싸 기 때문에 다시 사용 할 수 있 는 변 수 를 최대한 캐 시 합 니 다.
1 // bad
2
3 h = $('#element').height(); 4 $('#element').css('height',h-20); 5
6 // good
7
8 $element = $('#element'); 9 h = $element.height(); 10 $element.css('height',h-20);전역 변수 피하 기
jQuery 를 사용 하 는 것 은 자바 script 을 사용 하 는 것 과 마찬가지 로 함수 역할 영역 에 변 수 를 확보 하 는 것 이 좋 습 니 다.
1 // bad
2
3 $element = $('#element'); 4 h = $element.height(); 5 $element.css('height',h-20); 6
7 // good
8
9 var $element = $('#element'); 10 var h = $element.height(); 11 $element.css('height',h-20);헝가리 명명 법 사용
변수 앞 에 $기 호 를 추가 하면 jQuery 변수 임 을 쉽게 알 수 있 습 니 다.
1 // bad
2
3 var first = $('#first'); 4 var second = $('#second'); 5 var value = first.val(); 6
7 // better - we use to put $ symbol before jQuery-manipulated objects
8
9 var $first = $('#first'); 10 var $second = $('#second'), 11 var value = $first.val();Var 체인 사용 (단일 Var 모드)
여러 개의 var 성명 을 사용 하지 마 십시오. var 성명 으로 통합 할 수 있 습 니 다. 지정 한 값 이 없 는 변 수 를 마지막 에 두 는 것 을 권장 합 니 다.
1 var
2 $first = $('#first'), 3 $second = $('#second'), 4 value = $first.val(), 5 k = 3, 6 cookiestring = 'SOMECOOKIESPLEASE', 7 i, 8 j, 9 myArray = {};바 인 딩 이벤트 에 사용 하 는 것 이 좋 습 니 다.
최신 버 전의 jQuery 는 click () 을 함수 on (click) 의 약자 로 바 꾸 었 습 니 다.이전 버 전에 서 실 현 된 것 과 달리 click () 약자 bid ().jQuery 1.7 에서 on () 은 이벤트 처리 프로그램 을 추가 하 는 가장 좋 은 방법 입 니 다.그러나 일치 성에 대해 서 는 on () 을 간단하게 사용 할 수 있다.
1 // bad
2
3 $first.click(function(){ 4 $first.css('border','1px solid red'); 5 $first.css('color','blue'); 6 }); 7
8 $first.hover(function(){ 9 $first.css('border','1px solid red'); 10 }) 11
12 // better
13 $first.on('click',function(){ 14 $first.css('border','1px solid red'); 15 $first.css('color','blue'); 16 }) 17
18 $first.on('hover',function(){ 19 $first.css('border','1px solid red'); 20 })압축 간소화 javascript
일반적으로 우 리 는 가능 한 한 함 수 를 합병 해 야 한다.
1 // bad
2
3 $first.click(function(){ 4 $first.css('border','1px solid red'); 5 $first.css('color','blue'); 6 }); 7
8 // better
9
10 $first.on('click',function(){ 11 $first.css({ 12 'border':'1px solid red', 13 'color':'blue'
14 }); 15 });체인 조작 사용
위의 규칙 에 따라 jQuery 는 방법 을 연결 하기 쉬 우 므 로 우 리 는 이 장점 을 이용 해 야 한다.
1 // bad
2
3 $second.html(value); 4 $second.on('click',function(){ 5 alert('hello everybody'); 6 }); 7 $second.fadeIn('slow'); 8 $second.animate({height:'120px'},500); 9
10 // better
11
12 $second.html(value); 13 $second.on('click',function(){ 14 alert('hello everybody'); 15 }).fadeIn('slow').animate({height:'120px'},500);코드 의 가 독성 을 유지 하 다
javascript 코드 를 간소화 하고 체인 조작 을 사 용 했 을 때 코드 는 읽 을 수 없 을 때 가 있 습 니 다. 가능 한 한 들 여 쓰기 와 행사 코드 를 사용 하여 예 뻐 집 니 다.
1 // bad
2
3 $second.html(value); 4 $second.on('click',function(){ 5 alert('hello everybody'); 6 }).fadeIn('slow').animate({height:'120px'},500); 7
8 // better
9
10 $second.html(value); 11 $second 12 .on('click',function(){ alert('hello everybody');}) 13 .fadeIn('slow') 14 .animate({height:'120px'},500);단락 값 구하 기
단락 값 은 왼쪽 에서 오른쪽으로 값 을 구 하 는 표현 식 으로 & & (논리 와) 또는 | (논리 또는) 연산 자 를 사용 합 니 다.
1 // bad
2
3 function initVar($myVar) { 4 if(!$myVar) { 5 $myVar = $('#selector'); 6 } 7 } 8
9 // better
10
11 function initVar($myVar) { 12 $myVar = $myVar || $('#selector'); 13 }빠 른 방법 을 사용 하 다
코드 를 간소화 하 는 방식 중 하 나 는 인 코딩 의 지름길 을 이용 하 는 것 이다.
1 // bad
2
3 if(collection.length > 0){..} 4
5 // better
6
7 if(collection.length){..}복잡 한 조작 은 원 소 를 분리 해 야 한다.
DOM 요소 에 대해 대량의 작업 을 한다 면 (여러 속성 이나 css 스타일 을 연속 으로 설정) 먼저 요 소 를 분리 한 다음 추가 하 는 것 을 권장 합 니 다.
1 // bad
2
3 var
4 $container = $("#container"), 5 $containerLi = $("#container li"), 6 $element = null; 7
8 $element = $containerLi.first(); 9 //... a lot of complicated things
10
11 // better
12
13 var
14 $container = $("#container"), 15 $containerLi = $container.find("li"), 16 $element = null; 17
18 $element = $containerLi.first().detach(); 19 //...a lot of complicated things
20
21 $container.append($element);기 교 를 이해 하 다
jQuery 를 사용 하 는 방법 에 대한 경험 이 부족 할 수도 있 습 니 다. 꼭 봐 야 할 문 서 는 더 좋 거나 빠 른 방법 으로 사용 할 수 있 습 니 다.
1 // bad
2
3 $('#id').data(key,value); 4
5 // better (faster)
6
7 $.data('#id',key,value);하위 캐 시 를 사용 하여 부모 요 소 를 조회 합 니 다.
앞서 언급 한 바 와 같이 DOM 이 옮 겨 다 니 는 대가 가 매우 크다. 전형 적 인 방법 은 부모 요 소 를 캐 시 하고 하위 요 소 를 선택 할 때 이 캐 시 요 소 를 다시 사용 하 는 것 이다.
1 // bad
2
3 var
4 $container = $('#container'), 5 $containerLi = $('#container li'), 6 $containerLiSpan = $('#container li span'); 7
8 // better (faster)
9
10 var
11 $container = $('#container '), 12 $containerLi = $container.find('li'), 13 $containerLiSpan= $containerLi.find('span');일반적인 선택 문자 피하 기
다른 선택 부호 와 함께 사용 할 때 일반적인 선택 부 호 는 매우 느리다.
1 // bad
2
3 $('.container > *'); 4
5 // better
6
7 $('.container').children();암시 적 일반 선택 자 사용 피하 기
선택 자 를 빠 뜨 렸 을 때, 일반적인 선택 자 (*) 는 여전히 역할 을 합 니 다.
1 // bad
2
3 $('.someclass :radio'); 4
5 // better
6
7 $('.someclass input:radio');최적화 선택 부호
예 를 들 어 Id 선택 자 는 유일한 것 이 어야 하기 때문에 추가 선택 자 를 추가 할 필요 가 없습니다.
1 // bad
2
3 $('div#myid'); 4 $('div#footer a.myLink'); 5
6 // better
7 $('#myid'); 8 $('#footer .myLink');여러 ID 선택 문자 피하 기
ID 선택 부호 가 유일 해 야 한 다 는 것 을 다시 한 번 강조 합 니 다. 추가 선택 부 호 를 추가 할 필요 가 없고 여러 개의 후대 ID 선택 부호 가 필요 하지 않 습 니 다.
1 // bad
2
3 $('#outer #inner'); 4
5 // better
6
7 $('#inner');가능 한 한 최신 버 전 을 사용 하 세 요.
새로운 버 전 은 보통 더 좋다. 더 경량급, 더 효율 적 이다.지원 할 코드 의 호환성 을 고려 해 야 할 것 이 분명 하 다.예 를 들 어 2.0 버 전 은 ie 6 / 7 / 8 을 지원 하지 않 습 니 다.
버 려 진 방법 을 사용 하지 마라.
모든 새로운 버 전의 폐기 방법 에 주목 하 는 것 은 매우 중요 하 며, 가능 한 한 이런 방법 을 사용 하지 않도록 하 는 것 이다.
1 // bad - live is deprecated
2
3 $('#stuff').live('click', function() { 4 console.log('hooray'); 5 }); 6
7 // better
8 $('#stuff').on('click', function() { 9 console.log('hooray'); 10 }); CDN 으로 jQuery 불 러 오기
구 글 의 CND 는 사용자 와 가장 가 까 운 캐 시 를 선택 하고 신속하게 응답 할 수 있 습 니 다. 주 소 는 http://code.jQuery.com/jQuery-latest.min.js 입 니 다.
필요 시 jQuery 와 javascript 네 이 티 브 코드 조합
위 에서 말 한 바 와 같이 jQuery 는 javascript 입 니 다. 이것 은 jQuery 로 할 수 있 는 일 을 원생 코드 로 할 수 있다 는 것 을 의미 합 니 다.네 이 티 브 코드 의 가 독성 과 유지 가능성 은 jQuery 보다 못 할 수도 있 고 코드 가 더 길 수도 있 습 니 다.그러나 더욱 효율 적 이라는 것 을 의미한다.네 이 티 브 코드 보다 작고 가 볍 고 효율 적 인 프레임 워 크 는 없다 는 것 을 기억 하 라.
마지막 충고
마지막 으로 이 글 을 쓰 는 목적 은 jQuery 의 성능 을 향상 시 키 고 좋 은 조언 을 하 는 것 이다.이 화 제 를 깊이 연구 하고 싶다 면 많은 즐거움 을 발견 할 수 있 을 것 이다.jQuery 는 불가 하거나 부족 한 것 이 아니 라 선택 이라는 것 을 기억 하 세 요.그것 을 왜 사용 해 야 하 는 지 생각 하 다.DOM 조작?ajax？모판css 애니메이션?아니면 부적 엔진 을 선택 하 시 겠 습 니까?때로는 자 바스 크 립 트 마이크로 프레임 워 크 나 jQuery 의 수요 맞 춤 형 버 전도 고려 할 만하 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bootstrap DateTimepicker 예제이 기사에서는 예를 들어 부트스트랩 날짜 시간 선택기를 구현하는 방법을 살펴보겠습니다. 부트스트랩 4 날짜 시간 선택기는 html, php 또는 모든 laravel 파일에서 날짜와 시간을 표시하는 데 사용됩니다. 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
