├── README.md
└── yi.template.js


/README.md:
--------------------------------------------------------------------------------
 1 | # js-template
 2 | html轻量级模板引擎
 3 | 
 4 | # how to use
 5 | 
 6 | ```html
 7 | <tbody id="dataFoundTableBody">
 8 |                 <script type="text/template" name="dataFoundTableTemplate(rows)">
 9 |                     <-for(var i=0,r;i< rows.length;i++){r=rows[i];->
10 |                          <tr>
11 |                             <td>$(i+1)</td>
12 |                             <td>
13 |                                 <a href="../check/view.html?$(r.id)">查看</a>
14 |                             </td>
15 |                             <td>$(r.account)</td>
16 |                             <td>$(r.name)</td>
17 |                             <td>$(r.status===1?"正常":"停用")</td>
18 |                             <td>$(Date.format(r.lastLoginTime))</td>
19 |                         </tr>
20 |                      <-}->
21 |                 </script>
22 | </tbody>
23 | ```  
24 | 
25 | 1. 使用一对 `<-`和 `->` 来插入js代码，使用`$()`执行表达式，`$`本质是内置的一个方法，即你也可以在其中调用其他js方法，如:
26 | 
27 | ```
28 |  <td>$(Date.format(r.lastLoginTime))</td>
29 | ```
30 | 
31 | 2. 使用<script type="text/template" >来插入模板
32 | 3. 在`script`标签上定义`id`属性来定义模板名称(模板名称为成为绑定到`window`上的一个方法)，如:
33 |   
34 | ```
35 | <script type="text/template" id="dataFoundTableTemplate(rows)">
36 | ```
37 | 其中rows为外部传入参数， 可以直接在模板中使用
38 | 
39 | 4. 模板使用
40 |   
41 | ```
42 |   var data=...;
43 |   var html=dataFoundTableTemplate(data);//直接使用模板名称作为方法名
44 |   $("#dataFoundTableBody").html(html);
45 | ```
46 | 
47 | ## 写在最后
48 | 
49 | 写模板本质上是在window对象上定义一个方法。方法体为模板的内容，`<-`和`->`中为js代码，其他地方为字符串输出。
50 |   
51 |   
52 | 


--------------------------------------------------------------------------------
/yi.template.js:
--------------------------------------------------------------------------------
  1 | (function () {
  2 |     /**
  3 |      * @param {String} nameAndArgs 方法声明为xxx(a,b)
  4 |      * @param {String} templateSource 字符串模板
  5 |      */
  6 |     let TemplateFunction =window.TemplateFunction= function (nameAndArgs, templateSource) {
  7 |         //方法声明格式为xxx或xxx(a,b)
  8 |         this.nameAndArgs = nameAndArgs;
  9 |         //模板字符串
 10 |         this.templateSource = templateSource;
 11 |         //模板方法名称
 12 |         this.functionName=null;
 13 |         //模板方法参数
 14 |         this.functionArgumentNames=null;
 15 |         //模板方法体
 16 |         this.body = [];
 17 |         //生成方法引用
 18 |         this.functionReference=null;
 19 | 
 20 |         privateMethod.init.apply(this);
 21 |     };
 22 |     //私有方法
 23 |     let privateMethod = {
 24 |         init: function () {
 25 |             //解析
 26 |             let result = staticMethod.parseFunctionNameAndArgumentNames(this.nameAndArgs);
 27 |             this.functionName = result[0];
 28 |             this.functionArgumentNames = result[1];
 29 |         }
 30 |     };
 31 |     //方法中的
 32 |     TemplateFunction.helper={
 33 |         print:function(s,ds){
 34 |             if(s===null||s===undefined)return ds||'';
 35 |             return String(s);
 36 |         },
 37 | 		escapePrint:function(s,ds){
 38 | 			if(s===null||s===undefined)return ds||'';
 39 | 			return String(s).replace(/[<>&]/g, function (c) {
 40 | 				return {'<': '&lt;', '>': '&gt;', '&': '&amp;'}[c]
 41 | 			})
 42 | 		}
 43 |     };
 44 |     /**
 45 |      * 公开方法
 46 |      */
 47 |     TemplateFunction.prototype = {
 48 |         //构建模板方法
 49 |         build: function () {
 50 | 
 51 |             let out = this.body;
 52 |             //添加工具方法
 53 |             out.push("let helper=window.TemplateFunction.helper,");
 54 |             out.push("$=helper.print,");
 55 |             out.push("_='';\n");
 56 |             //添加try-finally保证模板方法返回值
 57 |             out.push("try{\n");
 58 | 			
 59 |             //构建方法体
 60 | 			out.parseCode = staticMethod.parseCode;
 61 | 			out.parseText = staticMethod.parseText;
 62 | 			out.parseExpInText = staticMethod.parseExpInText;
 63 | 			out.parseExpInCode=staticMethod.parseExpInCode;
 64 | 			out.parseTemplate=staticMethod.parseTemplate;
 65 | 			
 66 |             out.parseTemplate(this.templateSource,0);
 67 |             //添加finally保证模板方法返回值
 68 |             out.push("\n}catch(e){console.log(e)}finally{return _;}");
 69 | 
 70 |             let funBody = out.join("");
 71 |             let args = this.functionArgumentNames;
 72 |             try {
 73 |                 //创建方法
 74 |                 let f = args ? new Function(args, funBody) : new Function(funBody);
 75 |                 this.functionReference=f;
 76 |                 return f;
 77 |             } catch (e) {
 78 |                 console.log(e);
 79 |                 console.log(funBody);
 80 |             }
 81 |         }
 82 |         
 83 |     };
 84 | 
 85 |     let staticMethod = {
 86 |         parseFunctionNameAndArgumentNames: function (funName) {
 87 |             let begin = funName.indexOf("(");
 88 |             if (begin === -1) {
 89 |                 return [funName, null];
 90 |             } else {
 91 |                 return [funName.substring(0, begin), funName.substring(begin + 1, funName.lastIndexOf(")"))];
 92 |             }
 93 |         },
 94 | 		parseTemplate:function(template,begin){
 95 | 			let textBeginIndex =-1;
 96 | 			for (let i = begin, z = template.length,c; i < z; i++) {
 97 | 			    c = template.charAt(i);
 98 | 				if(c==='<'&&template.charAt(i + 1) === '-'){
 99 | 					let codeBeginIndex = i + 2;
100 | 					let codeEndIndex=codeBeginIndex;
101 | 					//find the code end
102 | 					for(;codeEndIndex<z;codeEndIndex++){
103 | 						c=template.charAt(codeEndIndex);
104 | 						 if(c=== '-'&&template.charAt(codeEndIndex + 1) === '>') {
105 | 							 //handle the text
106 | 							 if (textBeginIndex>=0) {
107 | 								if(textBeginIndex!==i){
108 | 									this.parseText(template.substring(textBeginIndex, i));
109 | 									textBeginIndex=-1;
110 | 								}
111 | 							 }		
112 | 							 this.parseCode(template.substring(codeBeginIndex, codeEndIndex),0);
113 | 							 
114 | 							 return this.parseTemplate(template,codeEndIndex+2);
115 | 						 }	
116 | 					}
117 | 				}else if(c==='$'&&template.charAt(i + 1) === '('){
118 | 					let expBeginIndex = i + 2;
119 | 					let expEndIndex=expBeginIndex;
120 | 					let nestingExpCount=1;
121 | 					//find the code end
122 | 					for(;expEndIndex<z;expEndIndex++){
123 | 						c=template.charAt(expEndIndex);
124 | 						
125 | 						if(c==='$'&&template.charAt(expEndIndex + 1) === '(') {
126 | 							nestingExpCount++;
127 | 							console.log(nestingExpCount);
128 | 						}else if(c === ')') {
129 | 							nestingExpCount--;
130 | 							
131 | 							if(nestingExpCount<=0){
132 | 								//handle the text
133 | 								if (textBeginIndex>=0) {
134 | 									if(textBeginIndex!==i){
135 | 										this.parseText(template.substring(textBeginIndex, i));
136 | 										textBeginIndex=-1;
137 | 									}
138 | 								}	
139 | 								this.parseExpInText(template.substring(expBeginIndex, expEndIndex));
140 | 								this.parseTemplate(template,expEndIndex+1);
141 | 								return;
142 | 							}	
143 | 						}	
144 | 					}
145 | 				}else{
146 | 					if(textBeginIndex===-1){
147 | 						textBeginIndex=i;
148 | 					}
149 | 				}
150 | 			}//end for
151 | 		},
152 |            
153 | 		parseCode: function (code,begin) {
154 | 			console.log(begin)
155 |             let codeBeginIndex =-1;
156 |             for (let i= begin, z = code.length,c; i < z; i++) {
157 |                 c = code.charAt(i);
158 | 				if(c==='$'&&code.charAt(i + 1) === '('){
159 | 					let expBeginIndex = i + 2;
160 | 					let expEndIndex=expBeginIndex;
161 | 					let nestingExpCount=1;
162 | 					//find the code end
163 | 					for(;expEndIndex<z;expEndIndex++){
164 | 						c=code.charAt(expEndIndex);
165 | 						if(c=== '$'&&code.charAt(expEndIndex + 1) === '(') {
166 | 							nestingExpCount++;							
167 | 						}else if(c === ')') {
168 | 							nestingExpCount--;
169 | 							if(nestingExpCount<=0){
170 | 								//handle the text
171 | 								if (codeBeginIndex>=0) {
172 | 									if(codeBeginIndex!==i){
173 | 										this.push(code.substring(codeBeginIndex, i));
174 | 										codeBeginIndex=-1;
175 | 									}
176 | 								}	
177 | 								this.parseExpInCode(code.substring(expBeginIndex, expEndIndex));
178 | 								return this.parseCode(code,expEndIndex+1);
179 | 							}	
180 | 						}	
181 | 					}
182 | 					
183 | 				}else{
184 | 					if(codeBeginIndex===-1){
185 | 						codeBeginIndex=i;
186 | 					}
187 | 				}
188 | 			}
189 | 			if (codeBeginIndex>=0) {
190 | 				this.push(code.substr(codeBeginIndex));
191 | 			}	
192 |         },
193 | 		
194 |         parseExpInText: function (exp) {
195 | 			console.log(exp);
196 |             this.push("_+=$(" + exp + ");");
197 |         },
198 |         parseExpInCode:function (exp) {
199 |             this.push("_+=$(" + exp + ")");
200 |         },
201 |         parseText: function (txt) {
202 |             //双引号转义
203 |             txt = txt.replace(/"/g, '\\"');
204 |             //换行符分割
205 |             const lines = txt.split(/\r?\n/);
206 |             if (lines.length > 0) {
207 |                 let i = 0, z = lines.length - 1;
208 |                 while (i < z) {
209 |                     //一行一行输出,每行多输出一个换行
210 |                     this.push('_+="' + lines[i++] + '\\r\\n";\n');
211 |                 }
212 |                 this.push('_+="' + lines[z] + '";');
213 |             }
214 |         }
215 | 
216 |     };
217 | 	
218 | 	
219 |     window.addEventListener("load",function(){
220 |       //通过<script type="text/template">标签构建模板方法
221 |         let templates = document.querySelectorAll("script[type='text/template']");
222 |         Array.prototype.forEach.call(templates, function (t) {
223 |             let templateHTML = t.innerHTML;
224 |             let id = t.getAttribute("id");
225 |             let tf = new TemplateFunction(id, templateHTML);
226 | 			//直接把模板id暴露为window下方法
227 | 			window[tf.functionName]=tf.build();
228 |         });
229 |     },false);
230 |     
231 | })(window, document);
232 | 


--------------------------------------------------------------------------------