最简单的JS模版引擎

出于某些原因，比方说学习JS模版引擎的工作原理，相信下边来自 John Resig 的一个JS function能帮助到我们。

// Simple JavaScript Templating
// John Resig - https://johnresig.com/ - MIT Licensed
(function(){
var cache = {};

this.tmpl = function tmpl(str, data){
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +

// Introduce the data as local variables using with(){}
"with(obj){p.push('" +

// Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

// Provide some basic currying to the user
return data ? fn( data ) : fn;
  };
})();

使用起来也就三步走。

第一步，将上边的代码粘贴到JS作用域最开始部分。
第二步，随便写一个模版。

<script id="hello_template">
 <h2><%=message%></h2>
<ul>
<% for(var userIndex in users) { %>
<li>#<%=users[userIndex]._id%>: <%=users[userIndex].name%></li>
<% } %>
</ul>
</script>

第三布，按照格式 tmpl(TEMPLATE_HTML_ID | TEMPLATE_HTML_TEXT, INPUT_DATA) 调用模版。

TEMPLATE_HTML_TEXT 工作方式

var html = tmpl('<h1><%=message%></h1>', {message: 'hello'});

console.log(html);

TEMPLATE_HTML_ID 工作方式

var html = tmpl('hello_template', {
 message: 'hello, world.',
  users: [
    {_id: 0, name: 'robin'},
    {_id: 1, name: 'alex'}
  ]
});

console.log(html);

慢慢领悟，很有意思。