JQuery_jquery를 모방하는 효율적인 JSLite 코드 작성을 위한 몇 가지 팁

jQuery와 자바스크립트 성능에 대해 논의하는 기사가 흔합니다. 그러나 나는 다른 사람들이 jQuery에 대해 정리한 몇 가지 속도 팁과 제안을 기반으로 JSLite 및 JavaScript 코드를 개선하는 방법을 가르쳐 줄 계획입니다. 좋은 코드는 속도 향상을 가져옵니다. 빠른 렌더링과 응답성은 더 나은 사용자 경험을 의미합니다.

먼저 JSLite는 자바스크립트라는 점을 명심하세요. 이는 동일한 코딩 규칙, 스타일 가이드 및 모범 사례를 채택해야 함을 의미합니다.

먼저 javascript 초보자이고 jQuery를 사용해 본 적이 없다면 먼저 공식 문서의 구문 소개를 읽어 보시기 바랍니다. 이는 고품질의 javascript 튜토리얼이므로 jQuery를 사용해 왔다는 의미입니다. 잠시.

JSLite를 사용할 준비가 되면 다음 지침을 따르는 것이 좋습니다.

캐시 변수

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

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

// 이런
h = $('#element').height();
$('#element').css('height',h-20);
//제안
$요소 = $('#요소');
h = $element.height();
$element.css('높이',h-20);

전역 변수를 피하세요

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

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

// 이런
$요소 = $('#요소');
h = $element.height();
$element.css('높이',h-20);
//제안
var $element = $('#element');
var h = $element.height();
$element.css('높이',h-20);

헝가리 명칭 사용

JSLite 객체를 쉽게 식별하려면 변수 앞에 $ 접두사를 추가하세요.

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

// 이런
var first = $('#first');
var 초 = $('#초');
var 값 = $first.val();
// 제안 - JSLite 객체에 $
접두사를 붙입니다. var $first = $('#first');
var $초 = $('#초'),
var 값 = $first.val();

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

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

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

var $first = $('#first'),
$초 = $('#초'),
값 = $first.val(),
k = 3,
쿠키스트링 = 'SOMECOOKIESPLEASE',
나
제이,
MyArray = {};

사용해주세요

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

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

// 이런
$first.click(함수(){
$first.css('테두리','1px 단색 빨간색');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('테두리','1px 단색 빨간색');
})
//제안
$first.on('클릭',함수(){
$first.css('테두리','1px 단색 빨간색');
$first.css('color','blue');
})

$first.on('hover',function(){
$first.css('테두리','1px 단색 빨간색');
})

간소화된 자바스크립트

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

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

// 이런
$first.click(함수(){
$first.css('테두리','1px 단색 빨간색');
$first.css('color','blue');
});
//제안
$first.on('클릭',함수(){
$first.css({
         '테두리':'1px 단색 빨간색',
         '색상':'파란색'
});
});

체인운영

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

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

// 이런
$second.html(값);
$second.on('클릭',함수(){
Alert('안녕하세요 여러분');
});
$second.fadeIn('느린');
$second.animate({높이:'120px'},500);
//제안
$second.html(값);
$second.on('클릭',함수(){
Alert('안녕하세요 여러분');
}).fadeIn('slow').animate({height:'120px'},500);

코드 가독성 유지

코드를 간소화하고 연결을 사용하면 코드를 읽기 어려워질 수 있습니다. 핀치와 줄 바꿈을 추가하면 놀라운 효과를 얻을 수 있습니다.

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

// 이런
$second.html(값);
$second.on('클릭',함수(){
Alert('안녕하세요 여러분');
}).fadeIn('slow').animate({height:'120px'},500);
//제안
$second.html(값);
$초
.on('click',function(){ Alert('안녕하세요 여러분');})
.fadeIn('느리게')
.animate({높이:'120px'},500);

단락 평가 선택

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

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

// 이런
함수 initVar($myVar) {
If(!$myVar) {
          $myVar = $('#selector');
}
}
//제안
함수 initVar($myVar) {
$myVar = $myVar || $('#selector');
}

바로가기 선택

코드를 간소화하는 한 가지 방법은 코딩 단축키를 활용하는 것입니다.

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

// 이런
if(collection.length > 0){..}
//제안
if(컬렉션.길이){..}

과중한 작업 중 요소 분리

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

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

// 이런
변수
$컨테이너 = $("#컨테이너"),
$containerLi = $("#컨테이너 li"),
$요소 = null;

$element = $containerLi.first()
//... 많은 복잡한 작업
//더 좋습니다
변수
$컨테이너 = $("#컨테이너"),
$containerLi = $container.find("li"),
$요소 = null;

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

기억력

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

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

// 이런
$('#id').data(키,값);
// 제안(효율적)
$.data('#id',키,값);

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

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

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

// 이런
변수
$컨테이너 = $('#컨테이너'),
$containerLi = $('#컨테이너 li'),
$containerLiSpan = $('#컨테이너 리 스팬');
// 제안(효율적)
변수
$컨테이너 = $('#컨테이너 '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');

범용 선택자를 피하세요

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

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

// 이런
$('.container > *'); //제안
$('.container').children();

암시적인 범용 선택자를 피하세요 범용 선택자는 때때로 암시적이어서 찾기가 어렵습니다.

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

// 이런
$('.someclass :라디오'); //제안
$('.someclass 입력:라디오');

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

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

// 이런

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

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

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

// 이런

$('#외부 #내부')
//제안
$('#내부');

최신 버전을 유지하세요
일반적으로 새 버전이 더 좋습니다. 더 가볍고, 더 효율적이며, 더 많은 메서드가 포함되고, jQuery 메서드가 더 포괄적으로 적용됩니다. 당연히 지원하려는 코드의 호환성을 고려해야 합니다. 예를 들어 프로젝트가 HTML5/CSS3을 잘 지원하여 실행되나요

필요한 경우 JSLite와 javascript 네이티브 코드 결합

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

최종 조언

마지막으로 JSLite의 성능 향상과 기타 좋은 제안을 목적으로 이 글을 기록합니다. 이 주제를 더 깊이 탐구하고 싶다면 많은 재미를 발견할 것입니다. JSLite는 필수가 아니라 옵션일 뿐이라는 점을 기억하세요. 왜 그것을 사용하고 싶은지 생각해보십시오. DOM 조작? 아약스? 원판? CSS 애니메이션? 아니면 선택자? 무거운 jQuery 개발자?