http://codepen.io/clintcparker/details/KAvaG
CodePen Basic jQuery Exercise 내용을 실습하고 정리합니다.
Common conventions and best practices
Unobtrusive JavaScript
자바스크립트를 막는것에 몇가지 아이디어가 있습니다.
자바 스크립트가 비활성화되어 있는 경우 당신의 페이지는 여전히 사용 가능한 상태로 유지되어야 합니다.
Javascript를 사용하지 않는 사용자의 정확한 비율을 불확실합니다.
야후 방문자의 1.3%가 2010년에 JS를 사용중지 한 것으로 추정했습니다.
관례 : 제품 환경에서는 서버에 대한 http 요청 최소화를 위해 모든 js 파일을 하나로 결합하거나 최소화 하는것이 이상적입니다.
인라인 이벤트 처리기는 유지보수가 어렵고 디버그하기가 힘들고 성능 저하에 영향이 없습니다.
1 2 | <body onload="myOnLoadFunction()"></body> <a href="#" onClick="myClickFunction();">Click!</a> | cs |
속성을 통해서 이벤트 핸들러를 연결하는 것이 유지보수하기가 좋습니다.
1 2 3 4 5 | <a href="/my-back-up-link" class="my-class">Click!</a> $('.my-class').on('click', this, function(e)) { // Do something amazing! }; | cs |
Detaching elements
무거운 DOM 노드의 element를 조작하는것은 많은 비용이 들 수 있습니다.
element를 분리하고 조작하여 다시 DOM에 추가하는 것으로 성능 문제를 해결하는데 도움이 될 수 있습니다.
DOM에서 element를 가져와서 DOM을 조작합니다.
1 2 3 4 5 6 | var $table = $('#some-table'); var $parent = table.parent(); $table.detach(); $table.addLotsAndLotsOfRows(); $parent.append(table); | cs |
Caching Selectors
jQuery를 사용하면 매번 Sizzle selector 엔진은 처음부터 DOM 쿼리를 시작합니다.
무거운 DOM 노드의 경우에도 이 작업은 많은 비용이 듭니다.
selector를 처음부터 캐시하면 전체 쿼리가 다시 발생하지 않습니다.
캐싱 selectors, antipattern vs. prefered
1 2 3 4 5 6 7 8 9 10 11 | // antipattern $('.list-item').click(function () { $('.photo').hide(); }); // preferred var photo; $('.list-item').click(function () { photo = photo || $('.photo'); photo.hide(); }); | cs |
Appending
jQuery의 일반적인 작업을 요소 집합을 만들어 DOM에 추가하는 것입니다.
사용자와 인터랙션을 통해 다시 작성할 필요도 있습니다.
이런 경우 일반적으로 루프를 통해 새 마크업을 구성합니다.
루프 반복하는 동안이 아닌 루프가 완료된 다음에 요소를 추가해야 합니다.
innerHTML 연결 및 설정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // antipattern // appending inside $.each(reallyLongArray, function (count, item) { var newLI = '<li>' + item + '</li>'; $('#ballers').append(newLI); }); // string concatenate and set innerHTML var myhtml = ''; $.each(reallyLongArray, function (count, item) { myhtml += '<li>' + item + '</li<'; }); $('#ballers').html(myhtml); | cs |
Data
Data 메서드를 사용하면 전달된 요소에 임의의 데이터를 설정할 수 있으며 키,값 쌍을 사용하여 데이터를 설정하고 검색 할 수 있습니다.
Data는 DOM의 특정 요소를 참조할 필요없이 상태를 추적하는데 매우 유용합니다.
Data 사용의 antipattern and Pattern
1 2 3 4 5 6 7 8 9 10 | // antipattern $(elem).data(key, value); // preferred $.data(elem, key, value); // Markup data attribute relationship <div class="my-class" data-my-data-key="my-data-value"></div> var myData = $(".my-selector").data("my-data-key"); | cs |
Left and Right
가독성과 성능면에서 왼쪽은 가볍게 오른쪽을 특정하는것이 좋습니다.
1 2 3 4 5 | // antipattern $('div.data .brad') // preferred $('.data td.brad') | cs |
Requery (avoid by chaining)
무거운 DOM 노드의 연산에서 재쿼리는 많은 비용이 듭니다.
이것을 피하는 기술로 jQuery의 체이닝 연결 기능을 사용하는 것입니다.
jQuery 체이닝을 사용해 재쿼리를 사용을 피하세요.
1 2 3 4 5 6 7 8 9 10 11 | // antipattern // create and append your element $(document.body).append("<div class='baaron' />"); // requery to bind stuff $("div.baaron").click(function () {}); // preferred // swap to appendTo to hold your element $("<div class='baaron' />") .appendTo(document.body) .click(function () {}); | cs |
Specific When Needed
selector를 과도하게 사용하면 읽을 수 없는 selector가 생길 수 있습니다.
또한 추가적인 성능 향상도 없습니다.
예제처럼 지나치게 구체적일 필요가 없습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // antipattern var arms = $('.data table.attendees td.brad'); // preferred var arms = $('.data td.brad'); Universal Selector universal selector에 비해 jQuery selector를 사용하면 더 읽기가 쉽습니다. // antipattern 1 $('.buttons > *') // preferred 1 $('.buttons').children() // antipattern 2 $('.gender :radio') $('.gender *:radio') // preferred 2 $('.gender input:radio') | cs |
Universal Selector
universal selector에 비해 jQuery selector를 사용하면 더 읽기가 쉽습니다.
1 2 3 4 5 6 7 8 9 10 11 12 | // antipattern 1 $('.buttons > *') // preferred 1 $('.buttons').children() // antipattern 2 $('.gender :radio') $('.gender *:radio') // preferred 2 $('.gender input:radio') | cs |
'프로그래밍 > JavaScript : jQuery' 카테고리의 다른 글
| Attribute와 Property의 차이 (0) | 2017.02.16 |
|---|---|
| CodePen Basic jQuery Exercise 1 (0) | 2017.02.16 |
