순수한 jquery와 HTML 마크 업을 구축 VS 템플릿 패턴을 밑줄

Question

나는 두 가지 방법을 통해 특정 마크 업을 구축하는 장단점을 비교 중입니다.

<li><img data-id="a" src="/src"></li> 
<li><img data-id="b" src="/src"></li> 
<li><img data-id="c" src="/src"></li> 
<li><img data-id="d" src="/src"></li> 
<li><img data-id="e" src="/src"></li> 

는 오히려과 같이 순수 jQuery를 함께 그 일을 할 것인가 :

$.each(obj, function(key, value) { 
    $("<li/>") 
    .attr({"data-id":key}) 
    .append(
     $("<img/>", { 
      src: value.pic 
     }) 
    ).addClass("selected") 
    .appendTo("document"); 
}) 

또는 예를 들어 템플릿을 선호 내가 자바 스크립트이 간단한 HTML 마크 업을 생성하고 싶은 말은하자 underscore.js 템플릿 방법은 다음과 같습니다.

var listObj = '<% $.each(obj, \ 
    function(key, value) { %> \ 
     <li class="selected" data-id= <%= key %> ><img src= <%= value.pic %> ></li> \ 
    <% }); %>'; 

$("document")append(_.template(listObj, {obj: obj})); 

또한 마크 업과 코드가 더 많은 경우 어떤 아이디어가 더 빠릅니까? 내가 jQuery를보다 빠를 것이라고 생각

Answer 1

나는 템플릿을 사용하는 것을 강력히 주장합니다.

성능 측면에서 - 제공되는 코드 샘플을 고려해 보면 템플릿 접근 방식이 루프에서 여러 개의 작은 DOM 관리보다 빠르다는 것을 쉽게 알 수 있습니다. 템플릿 접근 방식처럼 한 번에 큰 텍스트 블록을 할당하는 것이 훨씬 더 효율적입니다. jquery 문서를 참조하십시오.

는 또한 일부 템플릿 엔진은 일반 자바 스크립트로 템플릿을 컴파일 할 수 있습니다, 그래서 파싱 오버 헤드 당신은 별도의 파일에 템플릿을 코딩 할 수 있습니다

(밑줄 확실이 작업을 수행 할 수 있습니다 jqote이 아닌)이 없습니다 - 구문 강조 기능으로 문제를 해결하고 템플릿이 단일 목록 상자보다 복잡 해지면 완전히 정당화됩니다. 또한 각 페이지마다로드해야하는 JS의 양을 줄일 수도 있습니다.

JQuery 접근 방식은 사소한 페이지에 비해 유지 관리가 훨씬 쉽지 않습니다. 페이지 레이아웃의 일부 변경이 필요한 경우 html이 생성되는 방식을 파악하기가 어려울 수 있습니다.

Answer 2

을 는 (그것의 문자열을 생각하기 때문에 또한 내 코드 편집기 TextMate를 구문을 강조 나던 있기 때문에, 나에게 조금 귀찮게 템플릿 문자열 listObj에서 강조 누락 된 구문을 통지) 모든 것이 제대로 최적화되면 템플릿 스크립트. jQuery에는 DOM 객체를 추가/추가하는 데 드는 오버 헤드가 없습니다. 그러나 템플릿을 사용하면 템플릿을 완전히 파싱해야합니다.

그러나 서식 파일이 $.each() 건이 많고 .append()이 많이 걸리는 것보다 코드가 더 빠르고 읽기 쉽습니다. 그것은 처음부터 템플릿의 핵심입니다. JQuery를 사용하는 수천 명의 개발자가있는 반면, 언더 코어 .js에 익숙하지 않은 사람은 많지 않습니다. 이러한 의미에서 jQuery는보다 쉽게 ​​액세스 할 수 있습니다.