jquery.hTmpl v1.5 공개(html Templating)

jquery.hTmpl-1.5.js

0.00MB

1. 소개

1.1. 개요
- 관련 논문의 리마커블 결합기 개념을 용용하여 javascript로 구현한 json to html Templating 함수

1.2. 사용된 약어
- RemarkBlock : Templating시에 사용되는 템플릿 코드블록 (관련 논문 참고)

1.3. 관련 논문의 개념과 다른 점
- 관련 논문에서는 디자인과 로직파일을 웹페이지로 결합하는 개념이지만
- 본 구현은 웹페이지에 구성해 둔 RemarkBlock(디자인)에 JSON(로직처리) 결과를 결합하는 전처리 과정을 의미

1.4. 주요 특징 (jquery.tmpl과의 비교를 중심으로)
1.4.1. 치환 문법(2가지) 및 하위 객체 참조 예시
- {{ =key }} : obj[key]의 값을 html escape 처리한 후 그 값으로 치환 (jquery.tmpl의 기능과 유사)
- {{ key }} : obj[key]의 값으로 치환 (jquery.tmpl의 {{html key}} 기능과 유사)
- {{ =subObj.key }} 혹은 {{ subObj.key }} : 하위 객체 obj[subObj][key]의 값을 참조
1.4.2. 분기 문법(3가지 기호)
- HTML 표시 용도에 한해 분기처리 허용 : 3.9.2.절 참조.
- 사용 예: {{ if/ isDisplay }} show or hide {{ /if }} 혹은 {{ ifNot/ isDisplay }} show or hide {{ /if }}
1.4.3. HTML 영역에 계산, 반복, 변환 등의 로직은 허용하지 않음 (jquery.tmpl 등의 Templating과 차별화되는 철학)
1.4.4. 함수가 반환하는 결과값은 HTML 단순 문자열 (반면 jquery.tmpl은 jquery 객체를 반환)

1.5. 적용시 기대효과
- 뷰 영역에 로직 코드가 섞이는 스파게티 코딩 방지
- 템플릿에 로직 코드 허용시 발생 가능한 위험요소 원천 방지 : 템플릿 영역의 로직은 디버깅시 step 추적이 어려움
- 타 개발자의 소스 분석시에도 javascript 로직 영역에 집중할 수 있음. 유지보수성 향상

2. 사용 예제

2.1. 작성 예시(HTmplFilter 적용된 JSP로 가정)

<select id="select_render">
<!--ALPHA[select_tmpl]-->
  {{ if/ isDisp }}<option>기준월을 선택하세요.</option>{{ /if 디폴트문구 표시여부 }}
  <!--ALPHA[option_tmpl]-->
  <option value="{{info.year}}{{key_month}}">{{=disp_month}}</option>
  <!--OMEGA[option_tmpl]-->
<!--OMEGA[select_tmpl]-->
</select>

<script type="text/javascript">
var data = [ {"key_month":"11", "info":{"year":"2019"}}, {"key_month":"12", "info":{"year":"2019"}} ];

$("#select_render").html( $("#select_tmpl").hTmpl({"isDisp":true}) );

$.each(data, function(i, obj) {
  obj.disp_month = obj.key_month + " <월>";
  $("#select_render").append( $("#option_tmpl").hTmpl(obj) );
});
</script>

2.2. 실행 결과

<!-- 실행 결과 -->
<select id="select_render">
  <option>기준월을 선택하세요.</option>
  <option value="201911">11 &lt;월&gt;</option>
  <option value="201912">12 &lt;월&gt;</option>
</select>

<script id="select_tmpl" type="text/tmpl">
  {{ if/ isDisp }}<option>기준월을 선택하세요.</option>{{ /if 디폴트문구 표시여부 }}
  <!--[option_tmpl]-->
</script>
<script id="option_tmpl" type="text/tmpl">
  <option value="{{info.year}}{{key_month}}">{{=disp_month}}</option>
</script>

3.  HISTORY

3.1. 설계 철학
저는 HTML 영역에 계산, 반복, 변환 등의 로직 노출을 최소화하자는 코드분리 철학을 가지고 있습니다. (관련 논문 참고)

3.2. 초기 버전 (hidongh.tistory.com/4)
웹페이지의 코드 가독성과 개발 생산성 향상을 설계 목표로 JSTL의 forEach 사용을 대체하는
jquery.forEach plugin을 2015년에 공개하였습니다.

3.3. jquery.tmplEach v1.0 (hidongh.tistory.com/5)
이 후 javascript 템플릿 엔진의 개념이 이미 존재함을 알게 되었고 인지도가 있는 jquery.tmpl plugin을 참고하되, 코드분리 철학은 유지하는 방향으로 jquery.tmplEach plugin을 2016년에 공개하였습니다.

3.4. jquery.tmplEach v1.1 (hidongh.tistory.com/6)
논문에서 HTML 주석처리로 소개한 개념을 템플릿 엔진의 기능으로 다시 복원.

3.5. jquery.eachTmpl v1.2 (hidongh.tistory.com/7)
필터링 함수 문법을 jquery each문과 유사하게 재정의하면서 명칭 수정. options 파라미터 추가.

3.6. jquery.hTmpl v1.3 (hidongh.tistory.com/8)
코드분리 철학에 집중하는 간결한 버전으로 새롭게 정의하면서 명칭 수정. 반복, 필터링 기능 제거. 
(주 기능에 속하지 않는 부가 기능은 사용자 정의 로직에서 다루는 것이 적합하다는 판단입니다)
※ hTmlp 함수에는 반복, 필터링 기능이 없으므로 $.each() 함수와 함께 사용할 것을 권장합니다.

3.7. jquery.hTmpl v1.4 (hidongh.tistory.com/9)
html escape 처리후 치환용 식별자 추가 정의. {{=key}}

3.8. HTML Template 전처리 Filter (hidongh.tistory.com/10)
템플릿 영역을 WYSIWYG 방식으로 작성할 수 있도록, script 태그로의 분리를 도와주는 서블릿 Filter

3.9. jquery.hTmpl v1.5 (hidongh.tistory.com/11)
실무적 필요성에 따라 아래 2가지 기능을 추가.

3.9.1. 하위 객체 참조용 .(dot) 기호 도입
- 사용 예 : {{ = subObj.key }}

3.9.2. HTML 분기 처리용 기호 도입 (3가지)
- HTML 표시 용도에 한해 분기처리 허용 : 간결한 표현 및 개발편의성 제공을 위해
- {{ if/ key }} : if 블럭의 시작. (key로 참조된 값을 javascript true/false로 평가)
- {{ ifNot/ key }}  : ifNot 블럭의 시작
- {{ /if 주석표시가능 }} : if 혹은 ifNot 블럭의 종료. (뒤쪽에 주석을 포함시킬 수 있음)
- 사용 예: {{ if/ isDisplay }} show or hide {{ /if }} 혹은 {{ ifNot/ isDisplay }} show or hide {{ /if }}