집 > 기사 > 웹 프론트엔드 > 제이쿼리를 효율적으로 사용하는 방법

제이쿼리를 효율적으로 사용하는 방법

小云云원래의: 2017-11-17 11:10:021442검색

프로그래머라면 반드시 jQuery와 javascript를 사용하게 될 것입니다. 그렇다면 좋은 프로그램을 개발하려면 어떻게 하면 jQuery와 javascript를 더 효율적으로 사용하여 jQuery와 javascript 코드를 개선할 수 있을까요? 좋은 코드는 속도를 향상시키고, 빠른 렌더링과 응답은 더 나은 사용자 경험을 의미합니다. 따라서 이 섹션의 내용은 jQuery와 javascript의 효율적인 사용을 제공하는 것입니다.

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

먼저 자바스크립트 초보자라면 "초보자를 위한 24가지 자바스크립트 모범 사례"를 읽어보시길 권합니다. 이 내용은 jQuery를 시작하기 전에 읽어보는 것이 가장 좋습니다.

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

1. 캐시 변수

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

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

2. 전역 변수를 피하세요

jQuery 자바스크립트와 마찬가지로 일반적으로 변수가 함수 범위 내에 있는지 확인하는 것이 가장 좋습니다.

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

3. jQuery 객체를 쉽게 식별하려면 헝가리어 명명법

을 사용하여 변수 앞에 $를 붙입니다.

//糟糕
var first=$(&#39;#first&#39;);
var second=$(&#39;#second&#39;);
var value=$first.val();

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

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

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

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

5. 'on'을 사용하세요

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

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

6. 자바스크립트를 단순화하세요

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

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

7. 연결 작업

jQuery는 메서드의 연결 작업을 구현하기가 매우 쉽습니다. 아래를 활용해 보세요.

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

8. 코드 가독성 유지

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

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

9. 단락 평가 선택

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

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

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에서 메서드를 사용하는 데 경험이 없을 수도 있습니다. 문서를 확인하세요. 더 좋고 더 빠른 사용 방법이 있을 수 있습니다.

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

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

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

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

14. 범용 선택자를 피하세요

범용 선택자를 하위 선택자에 넣으면 성능이 매우 저하됩니다.

//糟糕$(&#39;.container > *&#39;);
//建议$(&#39;.container&#39;).children();

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

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

//糟糕$(&#39;.someclass :radio&#39;);
//建议$(&#39;.someclass input:radio&#39;);

16. 최적화 선택기

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

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

17. 여러 개의 ID 선택자를 피하세요

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

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

18. 최신 버전을 고수하세요

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

19. 더 이상 사용되지 않는 메서드를 버리세요

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

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

20. CDN

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

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

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

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

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

위 내용은 jQuery와 javascript를 효율적으로 사용하는 방법입니다. 이 글을 읽으신 후 모든 분들의 개발에 도움이 되었으면 좋겠습니다.

제이쿼리를 효율적으로 사용하는 방법

관련 기사