Mustache.js와 Handlebars.js의 차이점은 무엇입니까?

Mustache.js와 Handlebars.js의 차이점은 무엇입니까?

---

내가 본 주요 차이점은 다음과 같습니다.

• 핸들 추가 #if, #unless, #with, 및#each
• 핸들 바로 헬퍼 추가
• 핸들 바 템플릿이 컴파일 됨 (콧수염도 가능)
• 핸들은 경로를 지원 합니다
• {{this}}블록 내 사용 가능 (현재 항목의 문자열 값을 출력 함)
• Handlebars.SafeString() (그리고 아마도 다른 방법들)
• 핸들 바가 2-7 배 빠릅니다
• 콧수염 지원 반전 섹션 (예 if !x ...)

(위의 내용이 틀리면 수정 해주세요.)

내가 놓친 다른 주요 차이점이 있습니까?

---

당신은 거의 그것을 못 박았지만 콧수염 템플릿도 컴파일 할 수 있습니다.

콧수염에는 논리가 없기 위해 노력하는 도우미와 고급 블록이 없습니다. 핸들 바의 커스텀 헬퍼는 매우 유용하지만 종종 템플릿에 로직을 도입하게됩니다.

콧수염에는 많은 다른 컴파일러 (JavaScript, Ruby, Python, C 등)가 있습니다. 핸들 바는 JavaScript로 시작되었으므로 이제 django-handlebars , handlebars.java , handlebars-ruby , lightncandy (PHP) 및 handlebars-objc 와 같은 프로젝트가 있습니다 .

---

콧수염 전문가 :

• 대규모의 활발한 커뮤니티에서 매우 인기있는 선택입니다.
• Java를 포함한 여러 언어로 서버 측 지원
• 논리가없는 템플릿은 프리젠 테이션을 논리와 분리하는 데 큰 도움이됩니다.
• 깔끔한 구문은 작성, 읽기 및 유지 관리가 쉬운 템플릿으로 이어집니다.

콧수염 단점 :

• 약간 논리가 적습니다. 기본 작업 (예 : 다른 CSS 클래스를 가진 대체 행 레이블 지정)은 어렵습니다.
• 뷰 로직은 종종 서버로 푸시되거나 "lambda"(호출 가능한 함수)로 구현됩니다.
• 람다는 클라이언트와 서버에서 작동하려면 JavaScript로 작성해야합니다.

핸들 바 전문가 :

• 논리가없는 템플릿은 프리젠 테이션을 논리와 분리하는 데 큰 도움이됩니다.
• 깔끔한 구문은 작성, 읽기 및 유지 관리가 쉬운 템플릿으로 이어집니다.
• 해석 된 템플릿이 아니라 컴파일되었습니다.
• 콧수염보다 경로를 더 잘 지원합니다 (즉, 컨텍스트 객체에 깊숙이 도달).
• 콧수염보다 글로벌 도우미에 대한 지원이 향상되었습니다.

핸들 단점 :

• 서버에서 렌더링하려면 서버 측 JavaScript가 필요합니다.

출처 : 클라이언트 측 템플릿 분류 : 콧수염, 핸들 바, dust.js 등

---

하나의 미묘하지만 중요한 차이점은 두 라이브러리가 범위에 접근하는 방식에 있습니다. 콧수염은 현재 컨텍스트 내에서 변수를 찾을 수 없으면 부모 범위로 돌아갑니다. 핸들 바는 빈 문자열을 반환합니다.

이것은 GitHub README에 거의 언급되어 있지 않습니다.

핸들 바는 기본적으로 재귀 조회를 수행하지 않는다는 점에서 콧수염과 약간 다릅니다.

그러나 거기에서 언급했듯이 핸들 바를 콧수염과 같은 방식으로 작동하게하는 플래그가 있지만 성능에 영향을 미칩니다.

이는 #변수를 조건으로 사용하는 방법에 영향을줍니다 .

예를 들어 Mustache에서 다음을 수행 할 수 있습니다.

{{#variable}}<span class="text">{{variable}}</span>{{/variable}}

기본적으로 "변수가 존재하고 사실이라면 변수가있는 범위를 인쇄합니다"를 의미합니다. 그러나 핸들 바에서 다음 중 하나를 수행해야합니다.

• 사용하는 {{this}}대신
• 상위 경로를 사용 {{../variable}}하여 관련 범위로 돌아갑니다.
• variable부모 variable객체 내에 자식 값을 정의

원하는 경우 여기 에 대한 자세한 내용을 참조 하십시오 .

---

참고 : 이 답변은 구식입니다. 게시 당시에는 사실이지만 더 이상 유효하지 않습니다.

콧수염은 많은 언어로 통역을 제공하는 반면, 핸들 바는 자바 스크립트 전용입니다.

---

그들 사이의 또 다른 차이점은 파일의 크기입니다.

• Mustache.js에는 9kb가 있습니다.
• Handlebars.js에는 86kb 또는 사전 컴파일 된 템플릿을 사용하는 경우 18kb가 있습니다.

Handlebars.js의 성능 이점을 보려면 미리 컴파일 된 템플릿을 사용해야합니다.

출처 : JavaScript 템플릿 엔진 개요

---

또 하나의 미묘한 차이점은 잘못된 값을 {{#property}}...{{/property}}블록으로 처리하는 것입니다 . 대부분 콧수염 구현은 복종 JS가 있다면 블록을 표현하지 여기 falsiness 것 property인 ''또는 '0'.

핸들 은'' 및에 대한 블록을 렌더링 0하지만 다른 잘못된 값 은 렌더링 하지 않습니다. 템플릿을 마이그레이션 할 때 문제가 발생할 수 있습니다.

---

"핸들 바"에 대해 언급 된 단점 중 하나가 더 이상 유효하지 않다고 생각합니다.

Handlebars.java를 사용하면 클라이언트와 서버 모두에 대해 동일한 템플릿 언어를 공유 할 수 있습니다. 이는 SEO를 위해 서버 측 렌더링이 필요한 1000 개 이상의 구성 요소로 큰 프로젝트에서 큰 승리입니다

https://github.com/jknack/handlebars.java를 살펴보십시오.

---

— 핸들 바에 "this"를 사용하고 콧수염에 변수 블록 내에 중첩 된 변수를 추가 할뿐만 아니라 콧수염에 블록에 중첩 된 점을 사용할 수도 있습니다.

    {{#variable}}<span class="text">{{.}}</span>{{/variable}}

참고 URL : https://stackoverflow.com/questions/10555820/what-are-the-differences-between-mustache-js-and-handlebars-js