问题　

　　之前项目中一直有用到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);

    }

})();

templateExtension.js

最后

　　相比使用MVC的Razor视图引擎，个人更倾向于使用js类的前端模版。

　　在我看来，用户最后看到的网页，无非就是网页+数据。网页呈现这一部分，根据业务类别如何显示，完全交给html js css来做，后端不管是语言，提供相应的数据即可。

　　当然，过多的ajax可能不利于SEO，不过我一直做的，都是内网用的，可能根本就不需要SEO。

　　一点拙见，欢迎大家指正。

模版

artTemplate 动态加载模版

问题

解决方案

最后

问题　