핸들 바 4.0이있는 인라인 부분 및 데코레이터 사용

클라이언트 측 및 서버 측 렌더링을위한 인기있는 JavaScript 템플릿 라이브러리 인 핸들 바는 개선 된 템플릿 관리를 위해 콧수염 사양을 확장합니다. 신규 이민자의 경우 PluralSight 코스를 통해 핸들 바로 JavaScript 템플릿을 탐색하는 것이 좋습니다. 핸들 바 4.0 (2015 년 9 월)은 인라인 부분 및 데코레이터 인 상당한 개선 사항을 도입했습니다. 이 기사는 구문과 최적 사용을 자세히 설명합니다.

주요 개념 :

핸들 바 4.0의 주요 기능 : 인라인 부분 (재사용 가능한 템플릿) 및 데코레이터 (렌더링 상태 수정). 인라인 부분 : 템플릿 내에서 정의되어 JavaScript 등록이 필요하지 않습니다. 그들은 블록 스코핑되어 현재 및 중첩 스코프에 대한 사용을 제한합니다. 작고 재사용 가능한 HTML 스 니펫에 이상적입니다 데코레이터 : 실행 전 런타임에 영향을 미치는 핸들 바 프로그램 함수를 수정하십시오. 컨텍스트 데이터 또는 도우미를 변경하는 데 유용합니다 데코레이터는 코드 모듈성, 확장 성 및 테스트 가능성을 향상시킵니다. 특히 통화 형식과 같은 작업에 유리합니다. <line line> 두 가지 기능은 프론트 엔드 개발을 간소화하여 더 깨끗하고 체계적이며 잠재적으로보다 효율적인 코드를 만듭니다. <p> <strong> 인라인 부분 부분 </strong> </p> 일반 템플릿 개념 인 부분적 부분은 재사용 가능한 템플릿을 개별 파일로 분리하여 코드 재사용을 촉진합니다. 그러나 핸들 바의 전통적인 부분에는 전역 범위, JavaScript 등록이 필요한 글로벌 범위 (종종 사전 컴파일러가 처리 함) 및 사용 컨텍스트와의 분리가 필요합니다. 이것은 종종 그들의 사용을 가장 큰 재사용 가능한 코드 블록으로만 제한합니다. <ul>. <ial> 인라인 부분은 이러한 문제를 해결합니다. 핸들 바 구문을 사용하여 템플릿 내에서 정의되면 JavaScript 등록이 필요하지 않습니다. 그들의 블록 스코프 자연은 현재와 어린이 스코프에 그들의 사용을 제한합니다. 별도의 파일에 비해 너무 작거나 단일 템플릿 내에서만 사용되는 작고 재사용 가능한 HTML 세그먼트에 대한 인라인 부분을 선택하십시오. 인라인 부분을 사용하는 <li> > <in> 재사용 가능한 코드를 로 감싸서 인라인 부분을 선언합니다. 그런 다음 예 : </in> </li> <ing> <code> <li> {{firstName}} {{lastName}} </li>를 반복하는 대신 inline 부분을 사용하십시오 :

부분과 인라인 부분 비교 반복 된

: 가있는 템플릿을 고려하십시오

• 전통적인 부분 :

  는 를 등록하기 위해 별도의 JavaScript 파일이 필요하고 템플릿에서 사용을 로 사용합니다. 이것은 부분의 정의를 분리하여 전체 템플릿을 더욱 어렵게 만듭니다. . Handlebars.registerPartial('fullName', '{{firstName}} {{lastName}}'); 인라인 부분 : 더 깨끗하고 자체 포함 된 접근 : {{> fullName}}

• 데코레이터

  데코레이터 핸들 바 프로그램 기능을 수정하여 렌더링 프로세스에 영향을 미칩니다. 그들은 도우미 기능의보다 근본적인 동반자 역할을하는 템플릿 기능을 향상시키는 메타 데이터를 제공합니다. 핸들 바 컴파일은 다음과 관련이 있습니다. 1. 템플릿을 얻는다; 2. 컴파일; 3. 출력 렌더링. 데코레이터는 컴파일 단계 ()에 개입하여 블록 스코프 컴파일 함수에 영향을 미칩니다. 렌더링 전에 실행을 제어하여 컨텍스트 데이터 또는 도우미에 대한 수정을 허용합니다. 데코레이터 사용 데코레이터는 를 사용하여 등록됩니다. 함수는

:

<code class="language-handlebars">{{#* inline "fullName"}}
    {{firstName}} {{lastName}}
{{/inline}}

{{#each clients}}
    <li>{{> fullName}}</li>
{{/each}}</code>

컴파일 된 핸들 바 기능. 인수, 반환 값 또는 컨텍스트를 수정하십시오

: 여기에 설정된 속성은 교체하더라도 프로그램 기능에 영향을 미칩니다. 메타 데이터에 유용합니다.

:

핸들 바 런타임 컨테이너 (부분, 도우미, 컨텍스트). 수정 가능.

: Handlebars.compile 데코레이터 인수 및 데이터를 포함한 부모의 맥락

데코레이터는 수정 된 템플릿을 렌더링하려면 함수 (또는 거짓 값)를 반환해야합니다.

예 : 통화 형식 핸들 바 4.0 이전에 통화 형식은 종종 헬퍼에 의존했습니다. 데코레이터는보다 우아한 솔루션을 제공합니다 데코레이터는 컨텍스트에 따라 통화 형식의 도우미를 동적으로 등록 할 수 있습니다. 그런 다음 템플릿에서 : 이 접근법은 헬퍼 만 사용하는 것보다 모듈 식적이고 확장 가능하며 테스트 가능합니다. 결론

인라인 부분 및 데코레이터는 핸들 바를 크게 향상시켜 코드 조직, 재사용 성 및 테스트 가능성을 향상시킵니다. 그들은보다 유지 가능하고 효율적인 프론트 엔드 애플리케이션을 구축하는 데 유용한 도구입니다. Handlebars.registerDecorator()

위 내용은 핸들 바 4.0이있는 인라인 부분 및 데코레이터 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!