自己用 art-template 有些年頭了,最近在培養團隊學習 art-template 使用,發現有一個痛點比較難解決。 比如有一個模版,我們可以直接寫在頁面中,像這樣: 但如果這是個公用的模版,在很多頁面需要用到,那就不能直接寫在頁面中了,不然就得複製很多份了,那就只能寫到 js 文件里,做為 ...
自己用 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 書寫這樣可以輕鬆的寫多行字元串