콧수염으로 HTML 템플릿 생성

웹 응용 프로그램은 일반적으로 MVC 아키텍처를 사용하여 비즈니스 로직을 프레젠테이션보기에서 분리합니다. 복잡한 프로젝트에는 JavaScript 작업을 사용하는 많은 클라이언트 HTML이 포함되어 유지하기가 어려울 수 있습니다. 이 경우 템플릿 시스템을 사용하여 재사용 성을 향상시키고보기 관리 작업을 단순화 할 수 있습니다. Mustache.js는 템플릿을 관리하는 데 사용할 수있는 잘 문서화 된 템플릿 시스템을 제공합니다. 또한 콧수염은 여러 언어를 지원하므로 서버 측에서 별도의 템플릿 시스템을 사용할 필요가 없습니다. 이 기사에서는 콧수염 사용의 기본 사항에 대해 설명합니다.

키 포인트

mustache.js는 복잡한 웹 애플리케이션에서 HTML 템플릿을 관리하고 재사용 성을 향상 시키며보기 관리 작업을 단순화하는 데 사용할 수있는 잘 문서화 된 템플릿 시스템입니다. mustache.js는 비논리적이며 템플릿에는 IF 엘스 조건이나 루프가 포함되어 있지 않음을 의미합니다. 이중 버팀대로 표시된 레이블을 사용하여 템플릿에 데이터를 추가합니다. 콧수염 템플릿은 인라인 방법, 인라인 스크립트 및 외부 HTML 스 니펫을 포함한 여러 가지 방법으로 정의 할 수 있습니다. 선택할 방법은 프로젝트의 특정 요구에 따라 다릅니다.

mustache.js는 클라이언트와 서버 측 모두에서 사용할 수있는 다기능 도구이며 여러 언어를 지원합니다. 또한 변수, 섹션, 기능 및 부분 템플릿과 같은 복잡한 템플릿을 관리하기위한 태그도 제공됩니다.

왜 템플릿 시스템이 필요합니까?
• 템플릿 시스템에 대해 모르는 대부분의 개발자는 새로운 HTML 코드 블록을 생성하고 JavaScript를 사용하여 DOM에 동적으로 삽입합니다. 일반적인 메소드는 HTML 요소를 문자열로 지정한 다음 InnerHTML 속성을 설정하거나 jQuery html () 메소드를 호출하는 것입니다. 예는 다음과 같습니다.
DOM을 구축하는 또 다른 방법은 다음과 같이 요소를 만들고 개별적으로 추가하는 것입니다.
• 위의 두 가지 방법은 모두 문서에 동적으로 요소를 효과적으로 추가 할 수 있습니다. 웹 사이트의 세 가지 유형의 페이지에서 잘 설계된 총알 목록이있는 상황을 고려하십시오. 이러한 기술을 사용하여 세 가지 위치에서 HTML 코드 목록을 반복해야합니다. 이것은 종종 나쁜 코딩 습관으로 간주됩니다. 이 경우 코드를 복제하지 않고 다른 위치에서 사전 정의 된 템플릿을 사용할 수 있습니다. Mustache.js는 매우 인기있는 JavaScript 템플릿 엔진입니다. 콧수염은 여러 언어로 서버 측 및 클라이언트 측 템플릿을 제공하므로 별도의 템플릿 엔진을 선택하는 것에 대해 걱정할 필요가 없습니다.
• 콧수염 초보자 JS
콧수염은 JavaScript, Ruby, Python, PHP 및 Java와 같은 언어에 적합한 오픈 소스 논리 템플릿 시스템입니다. GitHub의 공식 페이지에 액세스하여 라이브러리 사본을 얻을 수 있습니다. 콧수염은 동적 템플릿을 생성하기위한 템플릿과 뷰를 사용합니다. 보기에는 템플릿에 포함 할 JSON 데이터가 포함되어 있습니다. 템플릿에는 프리젠 테이션 HTML 또는 뷰 데이터가 포함 된 템플릿 태그가있는 데이터가 포함되어 있습니다. 우리는 앞에서 콧수염이 비논리적이라고 언급했습니다. 이는 템플릿에 IF 엘스 조건 또는 루프가 포함되어 있지 않음을 의미합니다. 이제 간단한 예제와 함께 콧수염 템플릿을 시작하겠습니다.
먼저 문서에 Mustache.js 파일을 포함시켜야합니다. 그런 다음 콧수염 템플릿을 만들 수 있습니다. 위의 예에서는 사람의 이름과 직업이 포함 된 견해가 있습니다. 그런 다음 Render () 함수 내에서 코드 및 이름 및 경력 데이터를 나타내는 태그를 사용합니다. 레이블은 이중 브레이스 또는 주변의 수염으로 표시됩니다. 이제 Render () 메소드가 어떻게 작동하는지 살펴 보겠습니다.

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;

<🎜 🎜> <<> 렌더링 콧수염 템플릿
다음 코드는 Mustache.js 파일에서 Render () 함수의 구현을 보여줍니다. 3 개의 매개 변수를 Render ()로 전달할 수 있습니다. 처음 두 매개 변수 템플릿과보기가 필요합니다. 부분은 기본 템플릿에 주입 할 수있는 동적 템플릿으로 간주 될 수 있습니다. 이전 예제에서는 템플릿을 인라인 매개 변수로, 두 번째 매개 변수로보기를 전달하고 결과를 출력 변수에 할당했습니다.

이것은 콧수염을 사용하여 가장 기본적인 템플릿 형태입니다. 더 많은 표준 코드를 만드는 데 사용할 수있는 다른 방법을 살펴 보겠습니다. <🎜 🎜> <<> 정의 콧수염 템플릿

응용 프로그램에서 콧수염 템플릿을 정의하는 방법에는 여러 가지가 있습니다. 이 방법은 인라인 스타일, 인라인 스타일 시트 및 외부 스타일 시트를 사용하여 CSS를 포함하는 것과 유사합니다. 앞에서 논의한 예제는 템플릿을 함수로 직접 전달하기 때문에 인라인 방법으로 간주 될 수 있습니다. 이 방법은 재사용 가능한 템플릿의 가능성을 방지합니다. 템플릿을 함수로 직접 전달하는 대신 인라인 스크립트 템플릿으로 템플릿을 정의하는 방법을 살펴 보겠습니다.

인라인 스크립트로 템플릿

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);

<🎜
우리는

로 갈 수 있습니다 당신은 당신이 원하는만큼 문서에 다른 ID를 가진 많은 템플릿을 포함시킬 수 있습니다. 템플릿을 사용하려면 InnerHTML을 사용하여 스크립트 태그 내부의 HTML을 가져 와서 템플릿으로 전달하십시오. 첫 번째 예제는 다음 코드로 변경됩니다. 보시다시피, 템플릿은 별도로 저장되고 필요할 때 동적으로 사용됩니다. 이 방법은 템플릿을 재사용 할 가능성을 증가시킵니다. 그러나 인라인 스크립트를 사용하면 템플릿의 범위가 한 페이지로 제한됩니다. 여러 페이지가있는 경우 템플릿을 다시 정의해야합니다. 따라서 외부 파일에 템플릿을 포함시키는 것은 CSS와 마찬가지로 이상적인 솔루션이 될 것입니다.

외부 HTML 스 니펫으로서의 템플릿

<<

이 기술에서는 jQuery를 사용하여 템플릿을 구현합니다. JQuery는 외부 문서의 일부를 얻는 데 사용할 수있는 load ()라는 함수를 제공합니다. 이 메소드를 사용하여 템플릿을 외부 템플릿 파일에서 동적으로로드합니다. 로드 () 함수는 스크립트를 반환하는 대신 스크립트를 실행하므로 이전 방법에서와 같이 스크립트 태그 내부에서 템플릿을 만들 수 없습니다. 다음 예제는 우리가 사용할 외부 템플릿 파일을 보여줍니다.

우리는 템플릿에 대한 스크립트 대신

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;

요소를 사용하여 jQuery의 load () 함수와 호환되도록했습니다. 여기에는 세 가지 다른 ID가있는 세 가지 템플릿이 있습니다. 이제 페이지 에서이 템플릿을 계속 사용하겠습니다.

<div> jQuery는 반환 된 문서를 변수에 할당하는 대신 HTML 요소에 삽입합니다. 따라서 템플릿을 고정하려면 가상 컨테이너가 필요합니다. 기본적으로 숨겨진 템플릿 컨테이너를 사용했습니다. 위의 예는 Template1을 검색하여로드합니다. 그런 다음 가상 컨테이너에서 템플릿을 가져 와서 렌더링을 위해 콧수염으로 전달할 수 있습니다. 이것이 외부 방법의 작동 방식입니다. AJAX 요청을 사용하여 서버에서 데이터를 얻을 수도 있습니다.

<🎜 🎜> <<> 결론

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);

템플릿 엔진 및 프레임 워크는 동적으로 변화하는 프리젠 테이션 뷰를 가진 복잡한 시스템을 관리하는 데 매우 중요합니다. Mustache.js는 클라이언트 측의 관리자 템플릿을위한 최고의 선택 중 하나입니다. 이 튜토리얼의 시작 부분에서 템플릿이 중요한 이유를 설명합니다. 그런 다음 콧수염 템플릿을 사용하여 다양한 기술을 계속 소개합니다. 이제 프로젝트에서 콧수염 템플릿을 구현하는 방법을 선택할 수 있습니다. 콧수염 템플릿을 사용하기위한 다양한 기술을 탐색했지만 콧수염에는 복잡한 템플릿을 관리하는 데 사용되는 변수, 섹션, 기능 및 부분 템플릿과 같은 태그도 함께 제공됩니다. 각 태그에 대한 구문을 논의하는 것은이 튜토리얼의 범위를 벗어납니다. 콧수염 Github 페이지에서 콧수염 태그에 대한 포괄적 인 안내서를 찾을 수 있습니다. 이전 경험을 Mustache.js와 자유롭게 공유하십시오!

mustache.js faq (faq)

chustache.js와 다른 JavaScript 템플릿 라이브러리의 주요 차이점은 무엇입니까?
mustache.js는 논리 템플릿 구문입니다. 이는 HTML, 구성 파일, 소스 코드 - 모든 데 사용할 수 있음을 의미합니다. 객체에 제공된 해시 또는 값을 사용하여 템플릿에서 레이블을 확장하여 작동합니다. 다른 JavaScript 템플릿 라이브러리와 달리 Mustache.js에는 IF 문, 그렇지 않으면 조항 또는 루프가 포함되어 있지 않습니다. 대신 라벨 만 있습니다. 일부 태그는 값으로 대체되고 일부는 아무것도없고 다른 태그는 일련의 값입니다.

HTML 템플릿에 콧수염을 사용하는 방법은 무엇입니까?

html 템플릿에 mustache.js를 사용하려면 먼저 html 파일에 mustache.js 스크립트를 포함시켜야합니다. 그런 다음 태그 내에서 템플릿을 정의합니다. 이 템플릿에는 데이터를 삽입하기 위해 자리 표시자가 포함될 수 있습니다. 이 자리 표시자는 {{name}}과 같은 이중 버팀대로 표시됩니다. 그런 다음 Mustache.render () 함수를 사용하여 제공 한 데이터로 템플릿을 렌더링합니다.
• • node.js와 함께 mustache.js를 사용할 수 있습니까? 예, node.js와 함께 mustache.js를 사용할 수 있습니다. 이렇게하려면 NPM을 사용하여 콧수염 패키지를 설치해야합니다. 설치가 완료되면 Node.js 파일에 필요하고 템플릿을 렌더링하는 데 사용합니다.
  chustache.js를 트래버스 어레이에 사용하는 방법은 무엇입니까?
  <..> mustache.js에서 {{#array}}… {{/array}} 구문을 사용하여 배열을 가로 질러 가질 수 있습니다. 이 블록 내에서 {{.}}를 사용하여 배열의 현재 항목을 참조 할 수 있습니다. 이를 통해 템플릿의 배열에 각 항목을 표시 할 수 있습니다.
  • custache.js에서 조건부 진술을 사용하는 방법은 무엇입니까? <.> mustache.js는 전통적인 IF 문을 지원하지 않는 논리적으로 미등성 템플릿 라이브러리이지만 섹션을 사용하여 유사한 결과를 얻을 수 있습니다. 섹션은 데이터 객체의 키 값에 따라 텍스트 블록을 한 번 이상 렌더링합니다.

  콧수염에 일부 템플릿을 포함시키는 방법은 무엇입니까?

  mustache.js의 일부 템플릿을 사용하면 더 큰 템플릿에 작은 템플릿을 포함시킬 수 있습니다. 이것은 헤더 및 바닥 글과 같은 일반적인 요소를 재사용하는 데 매우 유용합니다. 부분 템플릿을 포함하려면 {{& gt; partial}} 구문을 사용할 수 있습니다.
  • 콧수염에서 html을 탈출하는 방법?
  기본적으로 Mustache.js는 XSS 공격을 방지하기 위해 데이터에서 html을 탈출합니다. 데이터에서 HTML을 렌더링하려면 {{{html}}}과 같은 Triple Brace 구문을 사용할 수 있습니다.
  서버쪽에 mustache.js를 사용할 수 있습니까?
  • 예, 서버 측에는 mustache.js를 사용할 수 있습니다. 이는 템플릿을 클라이언트로 보내기 전에 렌더링하여 클라이언트에서 실행 해야하는 JavaScript의 양을 줄이는 데 유용합니다.
  mustache.js에서 템플릿을 사전 컴파일하는 방법은 무엇입니까?

  chustache.js의 템플릿 사전 컴파일 템플릿은 런타임에 수행 해야하는 작업을 줄임으로써 성능을 향상시킬 수 있습니다. 템플릿을 사전 컴파일하려면 custache.parse () 함수를 사용할 수 있습니다.

  • chustache.js 템플릿을 디버그하는 방법? 라이브러리가 많은 오류 메시지를 제공하지 않기 때문에 콧수염 템플릿을 디버깅하는 것은 까다로울 수 있습니다. 그러나 mustache.parse () 함수를 사용하여 템플릿이 유효한지 확인할 수 있습니다. 이 함수는 템플릿 구조가 올바른지 확인할 수있는 태그 배열을 반환합니다.

위 내용은 콧수염으로 HTML 템플릿 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!