JavaScript 微型模板引擎

// Simple JavaScript Templating

// John Resig - http://ejohn.org/ - 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;

  };

})();[break]

------------------------------------------------------------------------

用法:

<html>

<head>

这里包含这个JavaScript 模板引擎

</head>

<body>

<div><b>example 1:</b></div>

<script type="text/html" id="user_tmpl">

  <% for ( var i = 0; i < users.length; i++ ) { %>

    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>

  <% } %>

</script>

<div id="show"></div>

<script type="text/javascript">

var users = new Array(2);

users[0] = {url:"http://www.baidu.com", name:"baidu"};

users[1] = {url:"http://www.google.com/hk/", name:"google"};

var results = document.getElementById("show");

results.innerHTML =tmpl("user_tmpl", users);

</script>

<div><b>example 2:</b></div>

<script type="text/html" id="item_tmpl">

  <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">

    <div class="grid_1 alpha right">

      <img class="righted" src="<%=profile_image_url%>"/>

    </div>

    <div class="grid_6 omega contents">

      <p><b><a href="<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>

    </div>

  </div>

</script>

<div id="result_item"></div>

<script type="text/javascript">

var items = {"id":1, "i":2, "profile_image_url":"http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", "from_user":"http://www.google.com.hk", "text":"google"};

var result_item = document.getElementById("result_item");

result_item.innerHTML = tmpl("item_tmpl", items);

</script>

this is a script template test

</body>

</html>

短小精悍,灰常不错!~


smarteng 发布于 2010-08-11 17:16