Question

내가 프로젝트의 프런트 엔드에 콧수염/호건을 사용으로 동료 동료를 설득하려고했던 나는 다음과 같은 제안 :

templates.js 파일을 갖는, 약처럼 보일 수있는을 이 :

var tpl_alert = '<div class="alert">{{msg}}</div>'; 
var tpl_welcome = '<p class="user-{{type}}">Welcome, {{name}}</p>'; 
... 

그런 다음, 우리는 templates.js을 포함하고 콧수염/Hogan.js 렌더링에 해당하는 TPL을 사용합니다.

html 템플릿을 js 변수로 하드 코딩하기 때문에 내 제안이 거절되었습니다. 정말 그렇게 나빴습니까? 이것에 대한 다른 대안은 무엇입니까?

Answer 1

질문에 답하기 위해 정적 JavaScript 파일 내부의 자바 스크립트 변수에 템플릿을 저장하면 템플릿을 유지하기가 어려워집니다. 간단한 변경을 원할 때마다 문자열 이스케이프에 대해 걱정할 필요가 있습니다. 그리고 1 구문 오류가 귀하의 응용 프로그램을 충돌합니다.

그러나 모든 템플릿을 단일 JavaScript 파일에 저장하는 것이 템플릿을로드하는 가장 빠른 방법입니다.

당신의 대안은 다음과 같습니다

1. 는 별도의 파일에 템플릿을 저장하고 사전 빌드 단계로 정적 template.js 파일을 생성.
2. HTML 템플릿 파일 async를 AJAX를 통해 javascript 변수로로드 중입니다.
3. Require.js과 같은 라이브러리를 사용하면 필요에 따라 템플릿을 변수에로드합니다.

Answer 2

필자가 선호하는 방법은 개발시 동적으로로드하고 프로덕션을 위해 순수 js로 구울 수있는 별도의 템플릿 파일을 만드는 것입니다.

특히 나는 eco 템플릿을 사용합니다 (커피 스크립트에 익숙하지 않은 경우에는 권장하지 않습니다). Stitch for node.js. Stitch는 파일 확장자에 연결된 사용자 정의 엔진을 지원하므로 프로젝트 디렉토리에서 eco 파일을 찾으면 Javascript 기능으로 컴파일합니다. 에코 파일의 원래 경로를 사용하여 require 기능을 제공하는 스티치를 사용하여 응용 프로그램의 다른 부분에이 기능을 포함 할 수 있습니다. 템플릿이 src/views/listItem.eco에 거주한다면 나는 그것을 가져 물론 당신은 require.js 대신에 스티치를 사용할 수있는이

var html = listItemView({item: items[i]}); 
$someElement.html(html); 

, 또는 기타 유사한 프레임 워크처럼 사용하는 var listItemView = require('views/listItem');을 실행하는 것입니다.