artTemplate(點選開啟連結)是一個Javascript模板引擎。用模板才渲染ajax請求獲得的資料 ，要比用一些操作dom的JsApi優雅一些。效能應該也好很多。

然而我發現使用模板進行一些分支或判斷的時候，往往會使模板看起來比較混亂。

例如有如下資料  [ {name:'aaa',status:1} ,{name:'bbb',status:0}  ....]

按照官網的示例，模板需要這麼寫 

<span style="white-space:pre">		</span><script type="text/html" id="test-ugly-tpl">
			{{each com as value index}}
    			<span>{{value.name}}</span>
				{{if value.status==1}}
    				<p>正常</p>
				{{else}}
    				<p>異常</p>
				{{/if}}
			{{/each}}
		</script>
 

雖然官網上沒有寫，但是經過本人的試驗，發現artTemplate的語法是支援三目運算的

於是可以改進成下列程式碼

<span style="white-space:pre">		</span><script type="text/html" id="test-ok-tpl">
			{{each com as value index}}
    			<span>{{value.name}}</span>
			<p>{{value.status==1?"正常":"異常"}}</p>
			{{/each}}
		</script>
 

於是我想為什麼不把資料整理好,再進行模板渲染呢?如

<span style="white-space:pre">				</span>for(var i in data){
						if(data[i].status==1){
							data[i].statusText="正常";
						}else{
							data[i].statusText="異常";
						}
					}

<span style="white-space:pre">		</span><script type="text/html" id="test-pretty-tpl">
			{{each com as value index}}
    			<span>{{value.name}}</span>
			<p>{{value.statusText}}</p>
			{{/each}}
		</script>

但是這樣做，在渲染時進行了一次遍歷操作，渲染中又進行了一次遍歷，可能會使效率變差麼？

經過實驗，發現用第一種方式渲染300條資料，5-6納秒。第二種和第三種為2-3納秒。

測試程式碼如下：

由此可見，雖然多進行了一次遍歷。但渲染遍歷的時候工作減少了，效率反而提升了。

所以我推薦在開發過程中，現將需要渲染的資料進行初步的整理，在進行模板渲染的工作。

<span style="white-space:pre">			</span>$(function(){
				
				var data ;
				
				$.post(
					"someurl",
					 someParam,
					function(res){
						data=res.data;
						renderUgly(data);
					 	renderOk(data);
						renderPretty(data); 
					}
				);
				
				function renderUgly(data){
					var start = new Date().getTime();
					$('#ugly').html(template('test-ugly-tpl',{com:data}));
					var end = new Date().getTime();
					console.log("render using ugly:"+(end-start));
				}
				
				function renderOk(data){
					var start = new Date().getTime();
					$('#ok').html(template('test-ok-tpl',{com:data}));
					var end = new Date().getTime();
					console.log("render using ok:"+(end-start));
				}
				
				function renderPretty(data){
					var start = new Date().getTime();
					for(var i in data){
						if(data[i].status==1){
							data[i].statusText="正常";
						}else{
							data[i].statusText="異常";
						}
					}
					
					$('#pretty').html(template('test-pretty-tpl',{com:data}));
					var end = new Date().getTime();
					console.log("render using pretty:"+(end-start));
					
				}
			});