효율적인 jquery 작성을 위한 19가지 지침

우선 jQuery는 자바스크립트라는 점을 명심하세요. 이는 동일한 코딩 규칙, 스타일 가이드 및 모범 사례를 채택해야 함을 의미합니다.
먼저 JavaScript 초보자라면 "JavaScript 초보자를 위한 24가지 모범 사례"를 읽어보시길 권합니다. 이 내용은 jQuery를 접하기 전에 읽어보는 것이 가장 좋습니다.
jQuery를 사용할 준비가 되면 다음 지침을 따르는 것이 좋습니다.
1. 변수 캐싱
DOM 탐색에는 비용이 많이 들므로 재사용된 요소를 캐시해 보세요.

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

// 앗

h = $('#element').height();
$('#element').css('height',h-20);

//제안

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

2 .전역 변수 피하기
일반적으로 jQuery와 JavaScript에서는 변수가 함수 범위 내에 있는지 확인하는 것이 가장 좋습니다.

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

// 앗

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

//제안

var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

3. jQuery 객체를 쉽게 식별하려면 헝가리어 명명법
을 사용하여 변수 앞에 $를 붙입니다.

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

// 앗

var first = $('#first');
var second = $('#second');
var value = $first.val();

// 제안 - jQuery 객체 앞에 $

를 붙입니다.

var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

4 .Var 체인(단일 Var 모드)
을 사용하여 여러 var 문을 하나의 문으로 결합하려면 끝에 할당되지 않은 변수를 넣는 것이 좋습니다.

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

var
$first = $( '#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};

5. 'On'을 사용하세요
새 버전의 jQuery에서는 더 짧은 on("click")을 사용합니다. 유사한 click()을 대체하는 기능입니다. 이전 버전에서는 on()이 바인딩()이었습니다. jQuery 버전 1.7부터 on()은 이벤트 핸들러를 연결하는 데 선호되는 방법입니다. 그러나 일관성을 위해 on() 메서드를 모두 함께 사용할 수도 있습니다.

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

// 앗

$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('border','1px solid red');
})

// 추천
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css(' 색상','파란색');
})

$first.on('hover',function(){
$first.css('border','1px solid red');
})

6. 자바스크립트를 단순화합니다.
일반적으로 가능하면 기능을 결합하는 것이 가장 좋습니다.

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

// 앗

$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});

//제안

$first.on('click',function(){
$first.css({
'테두리':'1px 단색 빨간색',
'color':'파란색'
});
});

7. 체인 연산
jQuery에서는 메소드의 체인 연산을 구현하는 것이 매우 쉽습니다. 아래를 활용해 보세요.

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

// 이런

$second.html(값);
$second.on('click',function(){
Alert('안녕하세요 여러분');
});
$second. fadeIn('slow');
$second.animate({height:'120px'},500);

//제안

$second.html(값);
$second.on('click',function(){
Alert('안녕하세요 여러분');
}).fadeIn('slow') .animate({height:'120px'},500);

8. 코드의 가독성을 유지하세요
코드를 간소화하고 체인을 사용하면 코드를 읽기 어렵게 만들 수 있습니다. 핀치와 줄 바꿈을 추가하면 놀라운 효과를 얻을 수 있습니다.

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

// 앗

$second.html(값);
$second.on('click',function(){
Alert('안녕하세요 여러분');
}).fadeIn('slow') .animate({높이:'120px'},500);

//제안

$second.html(값);
$second
.on('click',function(){ Alert('안녕하세요 여러분');})
.fadeIn('slow')
.animate({height:'120px'},500);

9. 단락 평가 선택
단락 평가는 &&를 사용하여 왼쪽에서 오른쪽으로 평가하는 표현식입니다. (논리적 AND) 또는 ||(논리적 OR) 연산자입니다.

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

// 앗

function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}

//제안

function initVar($myVar) {
$myVar = $myVar || $('#selector');
}

10 단순화하려면
단축키 중 하나를 선택하세요. 코드 한 가지 방법은 코딩 단축키를 활용하는 것입니다.

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

// 앗

if(collection.length > 0){..}

//제안

if(collection.length){..}

11. 과도한 작업 시 요소를 분리합니다.
DOM 요소에 대해 많은 작업을 수행할 계획인 경우(여러 속성 또는 CSS 스타일을 연속적으로 설정) ), 요소를 먼저 분리한 다음 추가하는 것이 좋습니다.

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

// 앗

var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;

$element = $containerLi.first()
//... 많은 복잡한 작업

//더 좋습니다

var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;

$element = $containerLi.first().detach()
//... 많은 복잡한 작업

$container.append($element);

12. 기술 암기
jQuery에서 메소드 사용 경험이 부족할 수 있습니다. 문서를 확인하세요. 더 낫거나 더 빠른 방법이 있을 수 있습니다. 그것을 사용하기 위해.

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

// 앗

$('#id').data(키,값);

// 제안(효율적)

$.data('#id',key,value);

13. 하위 쿼리를 사용하여 상위 요소 캐시
앞서 언급했듯이 DOM 탐색은 비용이 많이 드는 작업입니다. 일반적인 접근 방식은 상위 요소를 캐시하고 하위 요소를 선택할 때 이러한 캐시된 요소를 재사용하는 것입니다.

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

// 앗

var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container lispan');

// 제안(효율적)

var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');

14. 범용 선택자를 피하세요
후손 선택자에 범용 선택자를 넣으면 성능이 매우 저하됩니다.

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

// 이런

$('.container > *')

//제안

$('.container').children();
암시적 범용 선택자를 피하세요
범용 선택자는 때때로 암시적이어서 찾기 어렵습니다.

// 이런

$('.someclass :radio')

//제안

$('.someclass input:radio');
선택기 최적화
예를 들어 Id 선택기는 고유해야 하므로 추가 선택기를 추가할 필요가 없습니다.

// 이런

$('div#myid')
$('div#footer a.myLink');

// 권장 사항
$('#myid');
$('#footer .myLink');

15. 여러 ID 선택기를 사용하지 마세요.
여기서 강조하는 것은 ID입니다. 선택기는 고유해야 하며 추가 선택기를 추가할 필요가 없으며 여러 하위 ID 선택기가 필요하지 않습니다.

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

// 앗

$('#외부 #내부')

//제안

$('#inner');

16. 최신 버전 유지
일반적으로 최신 버전이 더 좋습니다. 더 가볍고 효율적입니다. 당연히 지원하려는 코드의 호환성을 고려해야 합니다. 예를 들어 버전 2.0은 IE 6/7/8을 지원하지 않습니다.

더 이상 사용되지 않는 메서드 포기
새 버전이 나올 때마다 더 이상 사용되지 않는 메서드에 주의를 기울이고 이러한 메서드를 사용하지 않도록 노력하는 것이 매우 중요합니다.

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

// 앗 라이브가 포기되었습니다

$('#stuff').live('click', function() {
console.log('만세');
});

// 제안
$('#stuff').on('click', function() {
console.log('hooray');
});

// 참고: 이는 부적절할 수 있습니다. Live는 실시간 바인딩을 달성할 수 있으며 위임이 더 적합할 수 있습니다
17. CDN 사용
Google의 CND는 사용자에게 가장 가까운 캐시가 선택되고 빠르게 응답하는지 확인할 수 있습니다. . (구글 CND 이용시 직접 주소를 검색해 주세요. 이곳의 주소는 사용할 수 없습니다. jquery 공식 홈페이지에서 제공하는 CDN을 추천드립니다.)

18. 필요한 경우 jQuery와 자바스크립트 네이티브 코드를 결합합니다.
위에서 언급했듯이 jQuery는 자바스크립트이므로 jQuery로 할 수 있는 모든 작업은 네이티브 코드로도 수행할 수 있습니다. 네이티브 코드(또는 바닐라)는 jQuery만큼 읽기 쉽고 유지 관리가 어려울 수 있으며 코드가 더 깁니다. 그러나 이는 또한 더 효율적이라는 것을 의미합니다. 일반적으로 기본 코드에 가까울수록 가독성이 낮을수록 성능이 높아집니다. 예를 들어 조립에는 물론 더 강력한 인력이 필요합니다. 어떤 프레임워크도 네이티브 코드보다 더 작고, 가벼우며, 더 효율적일 수 없다는 점을 기억하세요

바닐라와 jQuery의 성능 차이를 고려하여 두 가지 장점을 최대한 활용하고 (가능한 경우) jQuery와 동등한 네이티브 코드를 사용하는 것이 좋습니다.

19. 최종 조언
마지막으로 이 글을 기록하는 목적은 jQuery의 성능 향상과 기타 좋은 제안입니다. 이 주제를 더 깊이 탐구하고 싶다면 많은 재미를 발견할 것입니다. jQuery는 필수가 아니라 옵션일 뿐이라는 점을 기억하세요. 왜 그것을 사용하고 싶은지 생각해보십시오. DOM 조작? 아약스? 원판? CSS 애니메이션? 아니면 선택기 엔진인가요? 아마도 자바스크립트 마이크로프레임워크나 사용자 정의된 jQuery 버전이 더 나은 선택일 것입니다.