JavaScript 템 플 릿 엔진 - Elapse

배경:
회사 프로젝트, 제품 요구 에 사용:
1, 컴 파일 가능, 고성능.
2, 간단 / 유연 한 include
3. 간결 한 문법
 
그래서 자체 개발 엔진 이름: Elapse
 
 
필요 사례: 데이터 시트 렌 더 링:
템 플 릿:

				<table>
					<thead>
						<tr>
							<th>
								  
							</th>
							<th>
								  
							</th>
							<th>
								  
							</th>
						</tr>
					</thead>
					<tbody>
						${forarr #userList as user}
							<tr>
								<td>
									${user.name}
								</td>
								<td>
									${user.sex}
								</td>
								<td>
									${user.birthday}
								</td>
							</tr>
						${/forarr}
					</tbody>
				</table>

 
템 플 릿 에 주 입 된 데이터:

				{
					"userList": [
						{
							"name": "  ",
							"sex": " ",
							"birthday": "1989-10-29"
						},
						{
							"name": "  ",
							"sex": " ",
							"birthday": "1989-10-1"
						}
					]
				}

  
렌 더 링 코드:

				var template = $("#template").val();
				var json = $.parseJSON($("#json").val());
				//      
				Elapse.renderFromSource({
					source: template,
					data: json,
					complete: function (text) {
						$("#result").html(text);
					}
				});
				//      

 
렌 더 링 결과:
 

				<table>
					<thead>
						<tr>
							<th>
								  
							</th>
							<th>
								  
							</th>
							<th>
								  
							</th>
						</tr>
					</thead>
					<tbody>
						
							<tr>
								<td>
									  
								</td>
								<td>
									 
								</td>
								<td>
									1989-10-29
								</td>
							</tr>
						
							<tr>
								<td>
									  
								</td>
								<td>
									 
								</td>
								<td>
									1989-10-1
								</td>
							</tr>
						
					</tbody>
				</table>
			 

 
간단 한 변수 접근 메커니즘:
 

	      ：${#userList} ${#userList.length}
	  JS    ：${@location.href}
	           ： ${curUser}

 
 
상용 수 요 를 위 한 최적화 키워드:
순환 배열:

					${forarr #userList as user}
						     :${#userList.length},      ${user#index}, :${user}
					${/forarr}

  
순환 대상:

					${foreach #colors as color}
						  ${color#key}       :${color}
					${/foreach}

  
  단순 순환:

					    :
					${loop 10 as ls}
						     ${ls#step},    ${ls},   ${ls#over}   。
					${/loop}
					
					    ，    2:
					${loop 10,2 as ls}
						     ${ls#step},    ${ls},   ${ls#over}   。
					${/loop}
					
					    ，    2,    5:
					${loop 10,2,5 as ls}
						     ${ls#step},    ${ls},   ${ls#over}   。
					${/loop}

 
while 순환:

					${while true}
						        
						${break}
					${/while}

if 구문:

					${if #userList.length == 3}
						       3
					${/if}

 
else 구문:

					${if #userList.length == 3}
						       3
					${else}
						        3
					${/if}		

  
elseif 구문:

					${if #userList.length == 3}
						       3
					${elseif #userList.length == 0}
						       0
					${else}
						        3
					${/if}

 
switch 구문:

					${switch #userList.length}
						${case 0}
							        。
							${break}
						${case 1}
							       1。
							${break}
						${case 2}
							       2。
							${break}
						${case 3}
							       3。
							${break}
						${default}
							   。。。
					${/switch}

 
정의 변수:

					      null:
					${eval #userList[0] = null}
					
					      ,     # :
					${eval #myvar = "hello world!"}

 
템 플 릿 이름 지정 (템 플 릿 등록):

					     name “userlist”
					${name userlist}

 
간단 한 템 플 릿 포함:

					     “userlist”   ：
					${include userlist}
					
					     “userlist”   ,          ：
					${include userlist:#userList}

 
시스템 은 어떻게 포 함 된 템 플 릿 을 찾 습 니까?:

					Elapse.setLoader({
						loader: function (name, setter) {	
							//  loader  ，             ，      。
							//name:         
							//setter:       。
							//        ：  dom、    。。。        。  
							$.ajax({
								url: "/getTemplate",
								data: "name=" + name,
								type: "get",
								dataType: "text",
								success: function (source) {
									setter(source);
								}
							});
						}
					});
					
					//      loader     ，        “setter”          ，           。          ，          。

 
최종 제품 특징:
        1. 문법 이 간단 합 니 다.우 리 는 JS 문법 을 바탕 으로 강화 하기 때문에 학습 원가 가 낮다.기능 도 강하 다.
          2, 컴 파일 가능, 고성능.테스트 를 통 해 컴 파일 된 운행 효율 과 시중 대부분의 템 플 릿 엔진 의 효율 이 같 거나 높 습 니 다.
          3, 간단 한 include.하나의 loader (로 더) 만 설정 하면 각종 템 플 릿 원본 을 지원 하고 원본 에서 템 플 릿 을 자동 으로 가 져 올 수 있 습 니 다.
 
자세 한 문 서 는 첨부 파일 을 참조 하고 guide. html 즉 문 서 를 엽 니 다. ie 로 보지 마 십시오. 문서 스타일 이 호 환 되 지 않 습 니 다.
프로젝트 오픈 소스, github: https://github.com/yinhang/Elapse
 
당신 의 사용 을 환영 하 며, 이 프로젝트 에 가입 하여 함께 개발 하 기 를 기대 합 니 다.