ao_tmpl-1.7.js (AlphaOmega Templating JS)

 

ao_tmpl-1.7.js

0.00MB

 

1. 소개

1.1. 개요
- 관련 논문의 라마커블 전처리기(분리기와 결합기) 개념을 응용한 html Templating JavaScript 함수. [1]

1.2. 사용된 약어
- aoBlock : AlphaOmega 태그로 감싼 템플릿 영역. 일명, 알파오메가 블록.
- aoSuperBlock : 분리기의 처리대상. aoBlock 여러개를 포함하는 컨텐츠의 최상위 블록.
- tmplScriptBlock : 결합기의 처리대상. tmplScript 태그(<script type='text/tmpl'>)로 감싼 템플릿 영역.
- aoRemarkBlock : 결합기의 최종 처리대상. 템플릿이 캐싱되어 있는 ao_tmpl.remarkBlock 전역변수. 결합기가 tmplScriptBlock을 처음 참조할 때 최종 처리대상인 aoRemarkBlock으로 캐싱함.

1.3. 관련 논문의 개념과 다른 점
- 관련 논문에서는 웹페이지를 디자인과 로직파일로 분리하고 다시 웹페이지로 결합하는 개념이지만
- 본 구현은 웹페이지에 구성해 둔 aoBlock을 분리하여 aoRemarkBlock으로 캐싱하고, 렌더링시에는 aoRemarkBlock의 HTML(디자인)을 JavaScript(로직)의 data와 결합(Templating)하는 전처리 과정을 의미함.

1.4. 주요 특징 (기존 특징 [1] 에서 달라진 점을 위주로)
1.4.1. UIComponent 처리개념 도입
- UI 컨텐츠와 관련 로직을 하나의 script 블록으로 캡슐화 가능.
- 이제 v1.7 알파오메가 분리기는 tmplScriptBlock 생성없이 aoRemarkBlock에만 캐싱함.
- UIComponet를 위한 aoSuperBlock은 script 주석문으로 감쌀 것. "2. 예제" 참고.
1.4.2. AlphaOmega 태그의 id 자동부여 규칙 변경
- v1.6 자동부여 id = 직전id + _tmpl (예: 직전id가 sel_render인 경우 id가 sel_render_tmpl인 tmplScriptBlock 생성)
- v1.7 자동부여 id = 직전id (예: 직전id가 sel_render인 경우 그 id로 aoRemarkBlock에만 캐싱)
1.4.3 분리기능 수행시 "<//script>" 문구를 "</script>" 로 치환하던 기능 제거
- 주 기능에 속하지 않는 부가 기능은 사용자 정의 로직에서 다루는 것이 바람직하다는 판단으로.

1.5. 적용시 기대효과
- tmplScriptBlock을 웹페이지에 직접 기술할 경우 편집기 상에서 가독성이 떨어지는 측면이 있고 
  웹브라우저에서 script 태그는 문법상 중첩이 안되므로 별도 영역으로 관리해야 하지만 
- 본 구현을 적용하면 tmplScriptBlock을 따로 작성할 필요없이 aoSuperBlock + aoBlock 만 구성하면 됨.
 (WYSIWYG 방식. aoBlock의 중첩은 ao_tmpl.separate() 수행시 분리되어 aoRemarkBlock으로 캐싱됨)
- HTML 뷰 영역에 로직 코드가 섞이는 스파게티 코딩 방지.
- 템플릿 영역에 로직 코드 허용시 발생할 수 있는 위험을 사전 차단(예: 디버깅시 step 추적이 어려움).
- 타 개발자의 소스 분석시에도 명확하게 분리된 로직 영역에 집중할 수 있음. 유지보수성 향상.

2. 예제

 

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 태그로의 분리를 도와주는 "HTmplFilter 서블릿".

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 }}

3.10. ao_tmpl-1.6.js (hidongh.tistory.com/12)
분리기와 결합기의 수행 환경을 통일하면서 AlphaOmega Templating JS 로 명칭 수정
- jquery 의존성을 제거하고 pure JS 형태의 함수로 기능 제공
- HTmplFilter의 기능을 클라이언트 JS 함수로 제공
- AlphaOmega 시작태그와 종료태그 재정의