zoukankan      html  css  js  c++  java
  • 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把它添加到页面中。

  • 相关阅读:
    文章参考
    选择标识符(identifier)
    linux常见命令2
    Django框架之MVT(1)
    Tornado入门二
    2.Flask-jinjia2模板
    JQuery扩展和事件
    JQuery文档操作
    Jquery学习
    Jquery属性操作(入门二)
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1678170.html
Copyright © 2011-2022 走看看