代码改变世界

一个简单的 JavaScript 模板引擎

2011-12-16 17:10  音乐让我说  阅读(771)  评论(0)  编辑  收藏  举报

本代码参考 http://www.cnblogs.com/TomXu/archive/2011/12/15/2284752.html

注：以下代码在 IE8 中测试通过，其他浏览器未测试！

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>一个简单的 JavaScript 模板引擎</title>
    <style type="text/css">
        .divResult { border:solid 1px red; margin:10px 10px 30px 10px; padding:10px 10px 10px 10px;}
    </style>
    <script type="text/javascript">
        var data = [
            {
              title: "Knockout应用开发指南",
              href: "http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html",
              imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_knockout2.jpg",
              imgTitle: "图片很漂亮"
            },
            {
              title: "微软ASP.NET站点部署指南",
              href: "http://www.cnblogs.com/TomXu/archive/2011/11/25/2263050.html",
              imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg",
              imgTitle: "图片很漂亮"
            },
            {
              title: "HTML5学习笔记简明版",
              href: "http://www.cnblogs.com/TomXu/archive/2011/12/06/2277499.html",
              imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png",
              imgTitle: "图片很漂亮"
            }
          ]; //假设 data 是利用 AJAX 活得的 JSON 对象
          
          //加载方式1
function loadMethod1()
          {
            var template = document.getElementById("template").innerHTML;
            var result = document.getElementById("result");
            var fragment = '';
             
            for (var i = 0,len = data.length ; i < len; i++ ) 
            {
                fragment += template.replace( /\{\$title\$\}/, data[i].title )
                .replace( /\{\$href\$\}/, data[i].href )
                .replace( /\{\$imgSrc\$\}/, data[i].imgSrc )
                .replace( /\{\$imgTitle\$\}/, data[i].imgTitle );
            }
             
            result.innerHTML = "方式 1 的加载结果：<br/>" + fragment;
          }
          
          //加载方式2
function loadMethod2()
          {
               var template = document.getElementById("template").innerHTML;
               var result = document.getElementById("result");
 
                // 将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。
var attachTemplateToData = function(template, data) 
                {
                        var fragment = '';
                 
                        // 遍历数据集合里的每一个项，做相应的替换
function replaceCore(obj) 
                        {
                            var t, key, reg;
                 　　　　　　
　　　　　　　                //遍历该数据项下所有的属性，将该属性作为key值来查找标签，然后替换
for (key in obj) 
                            {
                                reg = new RegExp('{\\$' + key + '\\$}', 'ig');
                                // RegExp 的第二个参数解释如下：
//
// i : 执行对大小写不敏感的匹配。
// g ：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
                                t = (t || template).replace(reg, obj[key]);
                            }
                 
                            return t;
                        }
                 
                        for (var i = 0, len = data.length; i < len; i++) 
                        {
                            fragment += replaceCore(data[i]);
                        }
                 
                        return fragment;
               };
                 
               result.innerHTML = "方式 2 的加载结果：<br/>" + attachTemplateToData(template, data);
          }
    </script>
</head>
<body>
    <div id="result" class="divResult"></div>
    <div id="template" style="display:none;">
        <h2>
           <a href="{$href$}">{$title$}</a>
        </h2>
        <img src="{$imgSrc$}" alt="{$imgTitle$}" title="{$imgTitle$}"/>
    </div>
    <input type="button" value="加载数据（方式 1 ）" onclick="loadMethod1();" />
    &nbsp;&nbsp;&nbsp;
    <input type="button" value="加载数据（方式 2 ）" onclick="loadMethod2();" />
</body>
</html>

 

效果截图：

效果截图2：

 

您可能还会喜欢：

给 Javascript 的 string 对象扩展一个 format 方法

自定义 Javascript 模板规则，打造轻量级模板引擎

一个轻量级 Javascript 模板引擎 front.js【二】

 

谢谢浏览！