artTemplate 動態加載模版

問題　

　　之前項目中一直有用到artDialog對話框組件，作者后期又發布了js模版引擎，使用過幾次，效果感覺還挺好。當自己想把模版放在html之外時，遇到了一點問題。

　　作者介紹的方式，是在js文件中，通過定義變量，拼接模版，示例如下:

var source =  '<ul>'+    '<% for (var i = 0; i < list.length; i ++) { %>'+        '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'+    '<% } %>'+ '</ul>';var data = {    list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']};var render = template.compile(source);var html = render(data);document.getElementById('content').innerHTML = html;

　　個人很不喜歡這種方式，雖然作者有數據證明，用加號拼接字符串，在現代瀏覽器中，性能十分強勁，但模版看起來非常不直觀。修改起來很郁悶，有時候一個逗號錯誤，一上午就過去了。相比之下，我還是很喜歡在頁面里配置的這種方式:

<script id="test" type="text/html"><h1><%=title%></h1><ul>    <%for(i = 0; i < list.length; i ++) {%>        <li>條目內容 <%=i + 1%> ：<%=list[i]%></li>    <%}%></ul></script>

　　這樣看起來比拼接的舒服一點，而且容易修改。

　　問題就來了，能不能兩者兼得呢？

解決方案

　　首先在外部定義模版，我采用的是模版提供的簡便語法，希望了解更多點擊這里。

using System;namespace Model{    public class {{name}}    {        {{each data}}        /// <summary>        /// {{$value.列說明}}        /// </summary>        public {{$value.數據類型}} {{$value.列名}} { get; set; }        {{/each}}    }}

　　接著，Html底部添加srcipt標記，指向上述模版地址。

<script type="text/html" id="tmModel" src="template/model.txt"></script>

　　接下來要處理的則是通過Ajax根據路徑獲取到模版內容，然后編譯它，編譯完成后即可使用了。關鍵代碼如下:

(function () {    var tems = document.getElementsByTagName('script');    for (var i = 0; i < tems.length; i++) {        var t = tems[i];        if (!t.id || !t.id.length || !t.src || !t.src.length || 'text/html' != t.type) continue;        var obj = { src: t.src, id: t.id };        //清除原來的模板信息        t.id = "";        t.src = "";        ajaxrequest(obj.src, 'get', true, null, function (http, obj) {            //預編譯模版            template.compile(obj.id, http.responseText.replace(/^/s*|/s*$/g, ""));        }, obj);    }})();

　　其中加載模版時，我采用的是Get方式 同步加載，避免模版未編譯就使用。

　　模版在加載完畢后，即可使用。看官方的語法:

 var html = template.render('tmTab', { data:[]});//tmTab 是我們之前定義的Script標簽ID，編譯完成后，即可直接使用該模版

　　html則是根據模版+數據編譯后的html代碼了。

　　拓展的js代碼如下，不依賴jquery:

/** * 得到ajax對象 */function getajaxHttp() {    var xmlHttp;    try {        // Firefox, Opera 8.0+, Safari        xmlhttp = new XMLHttPRequest();    } catch (e) {        // Internet Explorer        try {            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");        } catch (e) {            try {                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            } catch (e) {                alert("您的瀏覽器不支持AJAX！");                return false;            }        }    }    return xmlHttp;}/** * 發送ajax請求 * url--url * methodtype(post/get) * con (true(異步)|false(同步)) * parameter(參數) * functionName(回調方法名，不需要引號,這里只有成功的時候才調用) * (注意：這方法有二個參數，一個就是xmlhttp,一個就是要處理的對象) * obj需要到回調方法中處理的對象 */function ajaxrequest(url, methodtype, con, parameter, functionName, obj) {    var xmlhttp = getajaxHttp();    xmlhttp.onreadystatechange = function () {        if (xmlhttp.readyState == 4) {            //HTTP響應已經完全接收才調用            functionName(xmlhttp, obj);        }    };    xmlhttp.open(methodtype, url, con);    xmlhttp.send(parameter);}(function () {    var tems = document.getElementsByTagName('script');    for (var i = 0; i < tems.length; i++) {        var t = tems[i];        if (!t.id || !t.id.length || !t.src || !t.src.length || 'text/html' != t.type) continue;        var obj = { src: t.src, id: t.id };        //清除原來的模板信息        t.id = "";        t.src = "";        ajaxrequest(obj.src, 'get', true, null, function (http, obj) {            //預編譯模版            template.compile(obj.id, http.responseText.replace(/^/s*|/s*$/g, ""));        }, obj);    }})();

最后

　　相比使用MVC的Razor視圖引擎，個人更傾向于使用js類的前端模版。

　　在我看來，用戶最后看到的網頁，無非就是網頁+數據。網頁呈現這一部分，根據業務類別如何顯示，完全交給html js CSS來做，后端不管是語言，提供相應的數據即可。

　　當然，過多的ajax可能不利于SEO，不過我一直做的，都是內網用的，可能根本就不需要SEO。

　　一點拙見，歡迎大家指正。