jQuery 코드 효율성을 향상시키는 작성 기술 요약

캐시 변수

DOM 순회는 비용이 많이 들므로 재사용된 요소를 캐시해 보세요.

// 糟糕h = $('#element').height();
$('#element').css('height',h-20);// 建议$element = $('#element');
h = $element.height();
$element.css('height',h-20);

전역 변수 피하기

jQuery는 일반적으로 JavaScript와 동일하므로 변수가 함수 범위 내에 있는지 확인하는 것이 가장 좋습니다.

// 糟糕$element = $('#element');
h = $element.height();
$element.css('height',h-20);// 建议var $element = $('#element');var h = $element.height();
$element.css('height',h-20);

헝가리 명명법을 사용하세요

변수 앞에 $ 접두사를 추가하면 jQuery 개체를 쉽게 식별할 수 있습니다.

// 糟糕var first = $('#first');var second = $('#second');var value = $first.val();// 建议 - 在jQuery对象前加$前缀var $first = $('#first');var $second = $('#second'),var value = $first.val();

Var 체인 사용(단일 Var 모드)

여러 var 문을 하나의 문으로 결합합니다. 할당되지 않은 변수는 끝에 넣는 것이 좋습니다.

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

'On'을 사용해 주세요

jQuery의 새 버전에서는 click()과 같은 기능을 대체하기 위해 더 짧은 on("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('color','blue');
})

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

Javascript 간소화

일반적으로 가능하면 기능을 결합하는 것이 가장 좋습니다.

// 糟糕$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});// 建议$first.on('click',function(){
    $first.css({'border':'1px solid red','color':'blue'});
});

체인 연산

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

// 糟糕$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);// 建议$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

코드의 가독성을 유지하세요

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

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);// 建议$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

단락 평가 선택

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

// 糟糕function initVar($myVar) {if(!$myVar) {
        $myVar = $('#selector');
    }
}// 建议function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

바로가기 선택

코드를 간소화하는 방법 중 하나는 코딩 바로가기를 활용하는 것입니다.

// 糟糕if(collection.length > 0){..}// 建议if(collection.length){..}

과중한 작업 중 요소 분리

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

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

$element = $containerLi.first();//... 许多复杂的操作// bettervar$container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;

$element = $containerLi.first().detach();//... 许多复杂的操作$container.append($element);

팁을 알아두세요

jQuery에서 메서드를 사용하는 데 경험이 없을 수도 있습니다. 문서를 확인하세요. 더 좋고 더 빠른 사용 방법이 있을 수 있습니다.

// 糟糕$('#id').data(key,value);// 建议 (高效)$.data('#id',key,value);

하위 쿼리를 사용하여 상위 요소 캐시

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

// 糟糕var$container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');// 建议 (高效)var$container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

범용 선택자를 피하세요.

범용 선택자를 하위 선택자에 넣으면 성능이 형편없습니다.

// 糟糕$('.container > *');// 建议$('.container').children();

암시적 범용 선택자를 피하세요.

범용 선택자는 때때로 암시적이어서 찾기가 쉽지 않습니다.

// 糟糕$('.someclass :radio');// 建议$('.someclass input:radio');

선택기 최적화

예를 들어 ID 선택기는 고유해야 하므로 선택기를 추가할 필요가 없습니다.

// 糟糕$('div#myid');
$('div#footer a.myLink');// 建议$('#myid');
$('#footer .myLink');

다중 ID 선택자를 피하세요

ID 선택자는 고유해야 하며 추가 선택자를 추가할 필요가 없으며 여러 하위 ID 선택자가 필요하지 않다는 점을 강조하고 싶습니다.

// 糟糕$('#outer #inner');// 建议$('#inner');

최신 버전을 유지하세요.

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

사용되지 않는 메서드 포기

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

// 糟糕 - live 已经废弃$('#stuff').live('click', function() {
  console.log('hooray');
});// 建议$('#stuff').on('click', function() {
  console.log('hooray');
});// 注：此处可能不当，应为live能实现实时绑定，delegate或许更合适

CDN을 사용하면

Google의 CND를 통해 사용자에게 가장 가까운 캐시를 선택하고 빠르게 응답할 수 있습니다. (구글 CND 이용시 직접 주소를 검색해 주세요. 이곳의 주소는 사용할 수 없습니다. jquery 공식 홈페이지에서 제공하는 CDN을 추천드립니다.)

필요한 경우 jQuery와 자바스크립트 네이티브 코드를 결합하세요

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

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

jQuery 작성 원칙:

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

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

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

위 내용은 jQuery 코드 효율성을 향상시키는 작성 기술 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!