自己用 art-template 有些年頭了,最近在培養團隊學習 art-template 使用,發現有一個痛點比較難解決。
比如有一個模版,我們可以直接寫在頁面中,像這樣:
<script id="appbtnTemp" type="text/html">
<div id="<%=id%>" class="appbtn" title="<%=title%>" appid="<%=appid%>" realappid="<%=realappid%>" type="<%=type%>">
<img src="<%=imgsrc%>" alt="<%=title%>" style="width:<%=appsize%>px;height:<%=appsize%>px;">
<span style="width:<%=appsize+10%>px;"><%=title%></span>
</div>
</script>
但如果這是個公用的模版,在很多頁面需要用到,那就不能直接寫在頁面中了,不然就得複制很多份了,那就隻能寫到 js 檔案裡,做為一個公用函數。
var appbtn = template.compile(
'<div id="<%=id%>" class="appbtn" title="<%=title%>" appid="<%=appid%>" realappid="<%=realappid%>" type="<%=type%>">'+
'<img src="<%=imgsrc%>" alt="<%=title%>" style="width:<%=appsize%>px;height:<%=appsize%>px;">'+
'<span style="width:<%=appsize+10%>px;"><%=title%></span>'+
'</div>'
);
這樣子雖然解決了公用的問題,但代碼就變得難以維護了,畢竟是在 js 檔案裡寫 html 代碼,代碼高亮提示沒了,而且都是字元串拼接,如果模版有修改,将會是一個可怕的問題。
那有沒有什麼解決辦法呢?我的第一個想法是把每個模版都寫到獨立的檔案裡,但在官網文檔裡看到浏覽器版本不支援檔案路徑讀取模版,那就自己改造下吧,讓浏覽器版本也支援檔案加載讀取模版。
這裡我的大緻思路是通過 jquery 的 $.ajax() 去擷取模版,讀取到模版然後用 template.compile() 把模版編譯成函數并儲存好,如果再次調用模版,則不用重新去擷取模版。
$(function(){
var cache = {};
var renderFile = function(path, data){
var html;
if(cache.hasOwnProperty(path)){
html = cache[path](data);
}else{
$.ajax({
type: 'GET',
url: path,
dataType: 'text',
async: false
}).done(function(cb){
var render = template.compile(cb);
html = render(data);
cache[path] = render;
});
}
return html;
}
renderFile('test.art', {title: '測試1'});
});
下面是 test.art 檔案
<div>
<h1><%=title%></h1>
</div>
代碼實作整體還是很 easy 的,這樣修改之後,模版檔案也可以統一管理了,既不會和頁面混在一起,也不會和 js 混在一起。
後續:
在和 art-template 的作者交流後,作者給出兩點解決方案:
1、如果用 webpack 結合 art-template-loader 就解決了這個問題了,它可以根據需要自動打包模闆(而且是編譯好的代碼,不包含模闆引擎)
2、我建議你使用 es6,至少模闆這裡可以用 es6 書寫這樣可以輕松的寫多行字元串
新部落格位址
hooray.github.io