핸들 바를위한 초보자 가이드

요즘 대부분의 웹은 데이터가 자주 변경되는 동적 응용 프로그램으로 구성됩니다. 결과적으로 브라우저에서 렌더링 된 데이터를 지속적으로 업데이트해야합니다. 이곳은 JavaScript 템플릿 엔진이 구출되어 매우 유용 해지는 곳입니다. 그들은 View를 수동으로 업데이트하는 프로세스를 단순화하고 동시에 개발자가 비즈니스 로직을 나머지 코드와 분리 할 수 ​​있도록하여 응용 프로그램의 구조를 개선합니다. 가장 잘 알려진 JavaScript 템플릿 엔진 중 일부는 콧수염, 밑줄, EJS 및 핸들 바입니다. 이 기사에서는 주요 기능을 논의하여 핸들 바에 관심을 집중시킬 것입니다.

키 테이크 아웃

핸들 바는 콧수염을 확장하는 논리가없는 템플릿 엔진으로, 도우미를 통해 최소한의 논리를 추가하여 HTML 구조를 비즈니스 로직에서 분리하고 응용 프로그램 유지 보수를 향상시키는 데 이상적입니다. 핸들 바의 템플릿 생성은 성능을 향상시키고 클라이언트 측 처리를 줄이기 위해 사전 컴파일 될 수있는 변수에`{{}}``{{}}``{{}}```{{}} '를 사용하는 것이 포함됩니다. 핸들 바는 사용자 정의 도우미를 지원하여 개발자가 템플릿 내에서 복잡한 논리를 구현하여 간단한 데이터 바인딩 이상의 유연성을 제공 할 수 있습니다. 핸들 바의 부분 템플릿은 응용 프로그램의 여러 부분에서 코드의 재사용 성을 촉진하여 개발 프로세스를 간소화하고 일관성을 유지합니다. 핸들 바 템플릿의 사전 컴파일은 클라이언트 측에서 런타임 컴파일 오버 헤드를 최소화하여 웹 응용 프로그램의 성능을 크게 향상시킬 수 있습니다.

<:> 핸들 바 : 그것이 무엇인지 그리고 그것을 사용해야하는 이유 핸들 바는 HTML 페이지를 동적으로 생성하는 논리없는 템플릿 엔진입니다. 몇 가지 추가 기능이있는 콧수염의 확장입니다. 콧수염은 완전히 논리가 없지만 핸들 바는이 기사에서 더 자세히 논의 할 일부 도우미 (예 : 각각이 아닌 경우)를 사용하여 최소한의 논리를 추가합니다. 사실, 우리는 핸들 바가 콧수염의 슈퍼 세트라고 말할 수 있습니다.

핸들 바를 다른 JavaScript 파일과 마찬가지로 브라우저에로드 할 수 있습니다.

왜이 템플릿 엔진이 아닌이 템플릿 엔진을 사용해야하는지 묻는 경우 전문가를 살펴 봐야합니다. 다음은 짧은 목록입니다
• 는 HTML 페이지를 깨끗하게 유지하고 JavaScript 파일의 비즈니스 로직에서 논리없는 템플릿을 분리하여 응용 프로그램의 구조 (및 유지 관리 및 확장 성) 를 개선합니다. view
• 에서 데이터를 수동으로 업데이트하는 작업을 단순화합니다. 는 ember.js, meteor.js, derby.js 및 ghost 와 같은 인기있는 프레임 워크 및 플랫폼에 사용됩니다.
• 이 짧은 요약이 핸들 바를 사용할 가치가 있는지 결정하는 데 도움이되기를 바랍니다. 어떻게 작동합니까?

  위의 다이어그램에서 볼 수 있듯이 핸들 바의 작동 방식은 다음과 같이 요약 될 수 있습니다. 핸들 바는 변수와 함께 템플릿을 가져 와서 함수로 컴파일합니다. 그런 다음이 기능은 JSON 객체를 인수로 전달하여 실행됩니다. 이 JSON 객체는 컨텍스트로 알려져 있으며 템플릿에 사용 된 변수의 값이 포함되어 있습니다. 실행시, 함수는 템플릿 변수를 해당 값으로 바꾸면 필요한 html을 반환합니다

  .

  위의 과정을 이해하려면 위에서 언급 한 모든 단계를 자세히 설명하는 데모로 시작하겠습니다. 템플릿

  템플릿은 HTML 파일 또는 별도로 모두 쓸 수 있습니다. 첫 번째 경우, <script> 태그 내부에 type = "text/x-handlebars-template"속성과 ID로 나타납니다. 변수는 이중 곱슬 브레이스 {{}}로 작성되며 표현식으로 알려져 있습니다. 예는 다음과 같습니다. <example> <ol> <<> <li> <up>이 마크 업을 제자리에두면 사용해야 할 사항을 볼 수 있습니다. JavaScript 파일에서 먼저 HTML 문서에서 템플릿을 검색해야합니다. 다음 예에서는이 목적으로 템플릿의 ID를 사용합니다. 템플릿을 검색 한 후에는 함수를 반환하는 handlebars.compile () 메소드를 사용하여 컴파일 할 수 있습니다. 그런 다음이 기능은 컨텍스트를 인수로 전달하여 실행됩니다. 실행이 완료되면 함수는 원하는 html을 해당 값으로 대체 한 모든 변수를 반환합니다. 이 시점에서 우리는 HTML을 웹 페이지에 주입 할 수 있습니다. </script>
이 설명을 코드로 전환하면 다음 스 니펫이 발생합니다.
이 코드의 라이브 데모는이 Codepen 데모에서 찾을 수 있습니다. 구문
• 이제 핸들 바에 조금 더 깊이 빠져 나올 시간입니다. 우리는 핸들 바의 핵심을 형성하는 몇 가지 중요한 용어와 구문을 살펴볼 것입니다.
표현식 우리는 이미 위 섹션에서 표현을 보았습니다. 템플릿 내부에서 사용되는 변수는 이중 곱슬 브레이스 {{}}로 둘러싸여 있으며 표현식으로 알려져 있습니다.

html 이스케이프 핸들 바는 표현식에 의해 반환 된 값을 피할 수 있습니다. 예를 들어 문자

는 아래에보고 된 컨텍스트 변수와 함께 사용됩니다
결과 HTML은 다음과 같습니다
이 기능을 보여주는 라이브 데모는이 Codepen 데모에서 찾을 수 있습니다.

주석

핸들 바 템플릿 내에 주석을 쓸 수도 있습니다. 핸들 바 주석의 구문은 {{! typeyourcommentHere}}입니다. 그러나}}에}}가있는 모든 주석 또는 핸들 바에 특별한 의미가있는 다른 기호는 {{!-typeyourcommentHere--}} 형식으로 작성되어야합니다. HTML에는 핸들 바 주석이 표시되지 않지만 표시하려면 표준 HTML 주석을 사용할 수 있습니다. 우리가 사용중인 템플릿에 이러한 모든 개념을 적용하면 아래에 표시된 코드를 제시 할 수 있습니다.
아래에보고 된 컨텍스트 변수와 함께 이전 템플릿을 사용하는 경우

HTML 출력은 다음과 같습니다

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

는 브라우저가 표준 HTML 주석 안에 내용을 표시하지 않습니다. 이 예제의 데모는 여기에서 찾을 수 있습니다.
블록 핸들 바에서 블록은 블록 개구부 ({{#}}) 및 닫는 ({{/}})가있는 표현식입니다. 우리는 나중에 도우미에 초점을 맞추면서이 주제를 심도있게 공부할 것입니다. 지금은 if 블록이 어떻게 작성되는지 살펴보십시오 :

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

경로 핸들 바는 정상 및 중첩 경로를 모두 지원하므로 현재 컨텍스트 아래 중첩 된 속성을 조회 할 수 있습니다. 핸들 바는 또한 ../ 경로 세그먼트를 지원합니다. 이 세그먼트는 상위 템플릿 범위를 참조하고 컨텍스트에서는 한 수준이 아닙니다. 이 주제를 더 잘 이해하려면 아래의 예제를 사용하여 각 도우미를 사용하는 예제를 사용합니다 (나중에 자세히 설명). 예상대로, 후자는 배열의 항목을 반복합니다.

이 예에서는 다음 템플릿을 사용합니다
이 컨텍스트 변수를 제공함으로써

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

우리는 아래에 나와있는 출력을 얻을 것입니다 :

우리가 지금까지 만든 다른 작은 스 니펫과 마찬가지로이 예제는 Codepen 에서 사용할 수 있습니다.

도우미 핸들 바는 논리없는 템플릿 엔진이지만 헬퍼를 사용하여 간단한 논리를 실행할 수 있습니다. 핸들 바 헬퍼는 아래와 같이 파라미터 (공간으로 분리)가 뒤 따르는 간단한 식별자입니다.

각 매개 변수는 핸들 바 표현식입니다. 이 도우미는 템플릿의 모든 컨텍스트에서 액세스 할 수 있습니다.

"블록", "도우미"및 "블록 헬퍼"라는 용어는 대부분의 내장 도우미가 블록이기 때문에 때때로 상호 교환 적으로 사용되지만 블록 도우미와 약간 다른 기능 도우미가 있습니다. 맞춤형 도우미를 다루면서 논의 할 것입니다 일부 내장 된 도우미는 각각, 각각, 그리고 그와 함께하는 경우입니다. 자세히 알아 보자. 각 도우미 각 도우미는 배열을 반복하는 데 사용됩니다. 도우미의 구문은 {{#Each arrayName}} yourContent {{/eargy}}입니다. 블록 내부의 키워드를 사용하여 개별 배열 항목을 참조 할 수 있습니다. 배열 요소의 인덱스는 {{@index}}를 사용하여 렌더링 할 수 있습니다. 아래의 예는 각 도우미의 사용을 보여줍니다. 다음 템플릿을 사용하는 경우
이 컨텍스트 변수와 함께 :
그러면 출력은 다음과 같습니다
이 예제의 라이브 데모는 Codepen에서 찾을 수 있습니다. <span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span> 도우미 인 경우 IF 도우미는 IF 문과 유사합니다. 조건이 A
relidy

값으로 평가되면 핸들 바가 블록을 렌더링합니다. {{else}}를 사용하여 "else 섹션"으로 알려진 템플릿 섹션을 지정할 수도 있습니다. 도우미가 IF 도우미의 역수가 아니라면. 조건이

거위

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

값으로 평가 될 때 블록을 렌더링합니다. if 도우미가 어떻게 작동하는지 보여 주려면 아래의 템플릿을 고려해 봅시다 :

다음 컨텍스트 변수를 제공하는 경우

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

우리는 아래에보고 된 결과를 얻을 것입니다 :
이것은 빈 배열이

falsy

값이기 때문에 발생합니다. 도우미와 함께 놀고 싶다면 코데 펜에서 만든 라이브 데모를 살펴볼 수 있습니다. 커스텀 도우미 핸들 바가 제공하는 표현 시스템을 사용하여 복잡한 논리를 수행하기 위해 자신만의 도우미를 만들 수 있습니다. 도우미는 두 가지 종류가 있습니다 : 기능 도우미와 블록 도우미. 첫 번째 정의는 단일 표현식을위한 반면 후자는 블록 표현식에 사용됩니다. 콜백 함수에 제공된 인수는 공간으로 분리 된 도우미 이름에 작성된 매개 변수입니다. 도우미는 handlebars.registerHelper () 메소드를 사용하여 생성됩니다

사용자 정의 기능 도우미 함수 도우미의 구문은 {{HelperName Parameter1 Parameter2 ...}}입니다. 구현을 진행하는 방법을 더 잘 이해하려면 PassyEar = 2015 인 경우 "전달되지 않음"을 반환하는 StudtStatus라는 기능 헬퍼를 작성해 봅시다. 이 예에서는 매개 변수가 하나 일뿐입니다. 그러나 더 많은 매개 변수를 헬퍼의 콜백 함수로 전달하려면 첫 번째 매개 변수를 공간으로 분리 한 후 템플릿에 쓸 수 있습니다. 이 템플릿으로 예제를 개발하겠습니다 :

및 다음 컨텍스트 변수 :

이 경우 출력은 다음과 같습니다

<span>My name is {{name}}</span>

이 예제의 라이브 데모는 여기에 있습니다 커스텀 블록 도우미 커스텀 블록 도우미는 기능 도우미와 같은 방식으로 사용되지만 구문은 약간 다릅니다. 블록 도우미의 구문은 다음과 같습니다

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

사용자 정의 블록 헬퍼를 등록하면 핸들 바는 콜백 함수에 마지막 매개 변수로 옵션 객체를 자동으로 추가합니다. 이 옵션 객체에는 FN () 메소드가있어 특정 속성에 액세스하기 위해 객체의 컨텍스트를 일시적으로 변경할 수 있습니다. StudyStatus라는 블록 헬퍼를 사용하지만 동일한 컨텍스트 변수를 사용하여 이전 섹션의 예를 변경하겠습니다.
이 코드가 아래 정의 된 템플릿과 함께 사용되는 경우

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

우리는 다음과 같은 결과를 얻을 것입니다
그리고 여기에 코디 펜 데모가 있습니다.

부분 템플릿

핸들 바 부분은 다른 템플릿간에 공유 할 수있는 템플릿입니다. {{> partialName}}로 작성됩니다. HTML에서 사용하기 전에 handlebars.registerpartial () 메소드를 사용하여 부분을 등록해야합니다. 다음 예는 PartialTemplate이라는 부분적 부분을 등록하는 방법을 이해하는 데 도움이됩니다.

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

아래 정의 된 템플릿과 함께 사용될 때

다음과 같은 결과를 제공합니다

<span>My name is {{name}}</span>

이 코드의 라이브 데모는이 Codepen 데모에서 찾을 수 있습니다. 사전 컴파일 우리가 본 바와 같이, 핸들 바가 가장 먼저하는 것은 템플릿을 함수로 컴파일하는 것입니다. 이것은 클라이언트에서 수행하는 데 가장 비싼 작업 중 하나입니다. Templatescript를 사전 컴파일 한 다음 컴파일 된 버전을 클라이언트에 보낼 경우 응용 프로그램의 성능을 향상시킬 수 있습니다. 이 경우 클라이언트에서 수행 해야하는 유일한 작업은 해당 기능을 실행하는 것입니다. 사전 컴파일 된 파일은 스크립트이므로 HTML의 스크립트를 일반 파일로로드 할 수 있습니다. 이 모든 일을 어떻게 할 수 있는지 봅시다.

첫째, NPM 설치 핸들 바 -g를 사용하여 전역으로 핸들 바를 설치해야합니다. 다른 템플릿이 파일 이름과 .handlebars 확장자 (예 : Demo.handlebars)가있는 별도의 파일로 작성되어 있는지 확인하십시오. 해당 파일 내부에 태그를 사용할 필요가 없습니다.

이제 모든 템플릿 파일을 템플릿이라는 단일 폴더에 저장하십시오. 원하는 폴더 이름을 사용할 수 있지만 그렇게하면 다음 명령을 변경하는 것을 잊지 마십시오. 따라서 터미널을 열고 명령을 실행하십시오

이 명령은 모든 컴파일 된 템플릿이 포함 된 TemplatesCompiled.js라는 파일을 생성합니다. 컴파일러는 핸들 바에 템플릿을 삽입합니다. 입력 파일이 demo.handlebars 인 경우 handlebars.templates.demo 에 삽입됩니다. 이제 HTML 파일에 TemplatesCompiled.js를 일반 스크립트로 포함해야합니다. 컴파일러 자체가 더 이상 필요하지 않으므로 전체 핸들 바 라이브러리를로드 할 필요가 없다는 점에 유의해야합니다. 대신 더 작은 "런타임"빌드를 사용할 수 있습니다 :

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

이제 우리는 다음 코드를 사용하여 원래 Demo.HandleBars에있는 템플릿을 사용할 수 있습니다.
최종 출력은 다음과 같습니다
이 방법은 애플리케이션의 성능을 크게 증가시키고 전체 라이브러리보다 가벼운 핸들 바의 런타임 빌드를 사용하면 페이지로드 시간이 줄어 듭니다. 이 전체 사전 컴파일 데모의 코드는 github에서 사용할 수 있습니다. 결론 이 기사에서는 핸들 바의 기본 개념에 대해 논의했습니다. 우리는 또한 자주 사용되는 기능과 구문을 조사했습니다. 이 튜토리얼을 즐겼기를 바랍니다. 포함 된 데모를 사용 하여이 주제를 잘 이해할 수 있습니다. 귀하의 의견을 읽기를 기대합니다.

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

도서관을 다운로드하지 않으려는 경우 여전히 시도하고 싶다면 http://tryhandlebarsjs.com/. 핸들 바에 대한 faqs honebars.js는 무엇입니까?

handlebars.js는 웹 개발에 사용되는 JavaScript 템플릿 라이브러리로 동적 웹 페이지를 작성하고 데이터를 기반으로 HTML 컨텐츠를 생성하는 데 사용됩니다. 데이터 삽입을 위해 자리 표시 자 (핸들 바)가있는 재사용 가능한 템플릿을 생성 할 수 있습니다. 이 라이브러리는 양방향 데이터 바인딩을 용이하게하여 데이터가 변경 될 때 템플릿이 자동으로 업데이트 될 수 있습니다. 개발자는 일반적으로 클라이언트 측 렌더링, 조건부 로직 및 데이터 반복에 handlebars.js를 사용합니다. HTML 구조와 데이터 간의 우려 사항을 촉진하여 코드 유지 관리 및 보안을 향상시키는 동시에 대화식 및 데이터 중심 웹 응용 프로그램을 구축하는 데 유용한 도구가됩니다.

HTML 대신 핸들 바를 사용하는 이유는 무엇입니까?

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

핸들 바는 일반적으로 교체가 아닌 HTML과 함께 사용됩니다. 동적 데이터 바인딩, 코드 재사용 성, 프레젠테이션과 데이터 간의 우려, 클라이언트 측 렌더링, 컨텐츠 생성의 일관성, 코드 분리를 통한 보안 향상 및 현지화 지원 등 HTML과 결합 될 때 몇 가지 장점을 제공합니다. 이러한 이점은 웹 페이지의 기본 구조를 정의하기 위해 HTML에 여전히 의존하면서 동적 및 유지 관리 가능한 웹 애플리케이션을 구축하는 데 유용한 도구를 집합 적으로 만듭니다.

는 쓰기 시점에 핸들 바가 더 이상 사용되지 않습니까? , 핸들 바는 더 이상 사용되지 않았으며 웹 개발에서 실행 가능하고 널리 사용되는 JavaScript 템플릿 라이브러리로 남아 있습니다. 핸들 바 템플릿 이란란 무엇입니까?

핸들 바 템플릿은 웹 개발에서 동적 HTML 컨텐츠의 레이아웃과 구조를 정의하는 텍스트 기반 구조입니다. 핸들 바는 이러한 템플릿을 생성 할 수있는 JavaScript 템플릿 라이브러리로 데이터를 기반으로 HTML 컨텐츠를보다 쉽게 ​​생성 할 수 있습니다. html 템플릿에는 동적 데이터를 나타내는 "핸들 바"라고 알려진 자리 표시자를 포함시킬 수 있습니다. 이 핸들 바는 이중 곱슬 브레이스 {{}}로 둘러싸여 있습니다. 예를 들면 :

hello, {{name}}!



이 간단한 핸들 바 템플릿에서 {{name}}은“name이라는 변수의 자리 표시 자입니다. .” 이 템플릿이 {name : "john"}과 같은 특정 데이터로 렌더링 할 때 핸들 바는 {{name}}을 해당 데이터 값으로 대체합니다. 🎜>
핸들 바 템플릿은 데이터에서 프리젠 테이션 (HTML 구조)을 분리하므로 일관되고 유지 관리 가능한 HTML 컨텐츠를 작성하는 데 특히 유용하여 업데이트 및 재사용을보다 쉽게 ​​만들 수 있습니다. 웹 애플리케이션을 가로 지르는 템플릿.

더 나은 것 : 핸들 바 또는 콧수염 템플릿?
핸들 바와 콧수염 사이의 선택은 프로젝트의 요구 사항과 우선 순위에 따라 다릅니다. 핸들 바는보다 고급 기능을 제공하므로 복잡한 템플릿 요구 및 더 큰 생태계와 커뮤니티 지원이 중요한 프로젝트에 적합합니다. 반면에 콧수염은 더 간단하고 "논리없는"철학을 따르므로 여러 프로그래밍 언어에서 단순성과 휴대 성을 우선시하는 프로젝트에 적합한 선택입니다.
.

위 내용은 핸들 바를위한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!