면책 조항 :이 질문에 대한 답변은 열려 있지 않으므로, 에 기재하십시오. 나는이 질문에 대답하는 단순하고 단 하나의 방법이 없기 때문에 나의 경험을 공유하고있다.
저는 심포니 친구들과 긴밀하게 협력하는 프론트 엔드 웹 개발자입니다. 당시 우리는 나뭇 가지와 콧수염을 함께 사용했습니다. 콧수염 템플릿은 아약스 호출이 필요한 곳이면 어디서든 중복 될 수 있습니다. 확실히 이것은 거대한 유지 관리 오버 헤드였습니다.
저는 두 가지 문제를 다루는 두 부분으로 제 대답을 나누었습니다. 프론트 엔드 가능하게 템플릿을 구조화하고, 나뭇 가지의 자바 스크립트 구현을 추가합니다.
템플릿 구조
우리가 논리적으로 구성하는 템플릿으로했다 첫 번째 단계는, 페이지 수준, 기능 및 표상 템플릿로 분할되었다.
페이지 수준 템플릿은 앱 콘텐츠를위한 일반 컨테이너를 정의하는 템플릿입니다.의 생각한다
기능 템플릿을 한 단계 더 깊은 이메일
승인했다. 그것들은 전체 페이지를 만드는 데 사용되는 조립식입니다. 일반적으로 백엔드에서 데이터를 가져 오는 지점입니다. 예를 들어 컨테이너에있는 사용자 목록을 생각해보십시오. 기능 템플릿은 데이터를 전달하는 프리젠 테이션 템플릿을 포함하는 컨테이너입니다. 프리젠 테이션 템플릿은 논리가없는 (데이터 변환 없음) 구성 요소이며 데이터가 제공됩니다. 이 구성 요소는 중첩 될 수 있습니다. (예 : 버튼 및 제목은 모두 CTA 구성 요소에 포함됩니다. 프리젠 테이션 구성 요소는 우리 빌딩 블록 중 가장 좋은 곡물입니다.
이 방법으로 코드를 구성하는 데는 시간이 많이 걸리지 만 프런트 엔드 렌더링이 가능한 구성 요소와 로직이 많이 필요한 구성 요소를 명확하게 구분할 수 있습니다.
Twig.js twig.js (코멘트 중 하나에 제안) 다음 단계는 통합 된
.
나는 프론트 엔드 템플릿 엔진에서 사용할 수있는 모든 블록을 내 주 HTML 파일에 모으고 싶습니다. 각 블록은 태그 안에 싸여 있습니다. 따라서이 블록을 "원시 포함"해야합니다.
twig.js를 사용하면 프런트 엔드에서 사용할 수 있도록 템플릿을 만들지 않아도됩니다. 당신은 URL을 제공 할 수 있으며, 템플릿이 다른 템플릿을 확장하거나 포함하면 비동기 적으로로드됩니다. 따라서 json 데이터가 제공되는 나뭇 가지 템플릿은 자바 스크립트로 렌더링되므로 추가적인 템플릿 엔진이 필요하지 않습니다.
성능 테스트를 한 번도 해보지 않았습니다. twig.js가 콧수염보다 상당히 느리다고 상상할 수도 있지만, twig.js의 논리가없는 구성 요소 만 렌더링하면 성능이 크게 향상 될 수 있습니다.
내가 아무 것도 언급하지 않았다면 알려 주시기 바랍니다. 나는이 주제에 대해 더 논의하기를 열망하고있다.
나는 swig에 태그를 붙인 다른 질문의 대부분이 그 태그 wiki가 설명하는 것과 같은 swig가 아니라고 생각합니다. – Flexo
원하는 정확한 목적은 아니지만 [twig.js] (https://github.com/schmittjoh/twig.js)를 확인하십시오. – Maerlyn
@Maerlyn 감사합니다. –