JavaScript模版引擎的基本实现方法浅析(3)

<script type='javascript/template'> <ul> <% for(var i in obj){ %> <li><%= obj[i].text %></li> <% } %> </ul> </script> ... var text = document.getElementById('template').innerHTML; var items = [ { text: 'text1' ,status:'done' }, { text: 'text2' ,status:'pending' }, { text: 'text3' ,status:'pending' }, { text: 'text4' ,status:'processing' } ]; console.log(template(text,items));

可见，我们只用了很少的代码就实现了一个简易的模板。

遗留的问题
还有几个细节的问题需要注意：

因为<%或者%>都是模板的边界字符，如果模板需要输出<%或者%>，那么需要设计转义的办法

如果数据对象中包含有null，显然不希望最后输出'null',所以需要在function_body的代码中考虑null的情况

在模板中每次使用obj的形参引用数据，可能不太方便，可以在function_body添加with(obj||{}){...}，这样模板中可以直接使用obj的属性

可以设计将render返回出去，而不是返回转化的结果，这样外部可以缓存生成的函数，以提高性能

您可能感兴趣的文章: