javascript微型模板系统

由于后台模板系统的强大，如rails的erb，javascript的模板系统一直处于被打压状态，但又由于后台的技术发展过快，日新月异，以及Ajax应用的普及，javascript还是有一藉之地的。如我们要从后台返回一个HTML片断，但事实上我们永远只能返回文本（responseText）或responseXML，如果你得到是json，其实后台已稍稍调用javascript把它eval成json。

好了，既然我们知道它有用武之处，那么这模板系统的规模应多大呢？或者说，它应该有什么功能呢？问题很简单，我们看一下那些后台模板系统就知了。后台模板发展了这么多年，非常成熟了。因此我们做的问题就是取舍。

<table>
<% foreach $topic in param.topic %>
  <tr class="topic">
    <td><%= $topic.renderLink() %></td>
    <td><%= $topic.creator.renderLink() %></td>
    <td>
    <% $count = topic.comments.count() - 1 %>
    <% if $count == 1 %>
      1 Post
    <% elseif $count > 1 %>
      <%= $count %> Posts
    <% else %>
     
    <% end %>
    </td>
    <td nowrap><%= $topic.createDate | format "dd.MM.yy - HH:mm" %></td>
  </tr>
<% end %>
</table>

这是网上找到一个示例，有分支，有循环，还有变量。像分支与循环，我觉得实现不应该与普通标签混在一起，貌似jsp mode1就是这个样子，很难维护。另外，我们也不得不注意一个问题，就是RSS。现在许多网站都支持订阅。如果前面是用以下方式设计会死得很惨：

<ul>
<!-- for(var i=0; i<supplies.length; i++) { //-->
   <li><!--= supplies[i] //--></li>
<li><!--= } //--></li>
</ul>

情况同现在我的博客用的语法高亮差不多。为了实现高亮，SyntaxHighlighter会把目标pre改成一个div，里面填充了许多设置了各种样式的span，于是我们就看到五颜六色。但在google Reader一看，javascript失效了。因此我们得出一个结论，前台的模板系统不应该在全页面范围使用。它只应处理那些临时生成的HTML片断。如Ajax提交的回复，这就省得刷新页面。

由于<% 与 %gt;与许多后台语言的模板系统发生冲突，直接用静态页面干活的日子不多了，因此我们就不能用这种格式了。我推荐使用rails的#{}，括号里面是替换的东西。

下面是我的微型模板系统，比Ext还少。

dom.Template = dom.factory({
    init:function(template, pattern){
        this.template = String(template);
        this.pattern = pattern || dom.Template.Pattern;
    },
    compile: function(object) {
        return this.template.replace(this.pattern, function(displace,variable){
            variable = dom.trim(variable)
            return displace = object[variable]
        });
    },
    statics:{Pattern:/#\{([^}]*)\}/mg}
});

把它修改成能独立运行的代码，就是下面这个样子：

var Template = function(template, pattern){
  this.template = String(template);
  this.pattern = pattern || Template.Pattern;
}
Template.Pattern = /#\{([^}]*)\}/mg;
Template.trim = String.trim || function(str){
  return str.replace(/^\s+|\s+$/g, '')
}
Template.prototype ={
  constructor:Template,
  compile: function(object) {
    return this.template.replace(this.pattern, function(displace,variable){
      variable = Template.trim(variable)
      return displace = object[variable]
    });
  }
}

使用：

var data = "<div>Name: <b>#{name}</b>  Blog: <a href='#{href}'>#{blog }</a></div>";
 var t = new Template(data);
 var objs = {name:"司徒正美",
   blog:"RubyLouvre",
   href:"http://www.cnblogs.com/rubylouvre/"}
 var result = t.compile(objs);
 alert(result)

如你们所见，功能非常少，就是替换变量，实现格式与可变内容相分离。执行结果，我们可以用innerHTML把它添加到页面中。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>javascript 模板系统 by 司徒正美</title>

</script>
  
  </head>
  <body>

</body>
</html>