本文实例讲述了 构建自己的模板小引擎。分享给大家供大家参考，具体如下：

有时候，我们不需要太牛逼太强大的 模板引擎（比如jQuery tmpl或者handlebarsjs），我们只是需要在简单的模板里绑定一些非常简单的字段，本文将使用非常简单的技巧来帮你实现这个小功能。

首先我们先来定义我们需要的模板，在id为template的 块里：

HTML部分：

<!doctype html>
<html>
<head>
  <  charset=utf-8>
  < >Simple Templating</ >
</head>
<body>
 <div class=\"result\"></div>
 <  type=\"template\" id=\"template\">
  <h2>
   <a href=\"{{href}}\" rel=\"external nofollow\" >
    {{ }}
   </a>
  </h2>
  <img src=\"{{imgSrc}}\" alt=\"{{ }}\">
 </ >
</body>
</html>

css样式：

a: , a:visited {
  color: #3D81EE;
}

然后，我们需要通过Ajax等其它方式获取所需要的数据，这里为了展示方便，我们使用了自己定义的数组：

var data = [
  {
    : \"HTML5+SVG实现的圣诞夜棒棒糖山林雪景动画效果\",
   href: \"https://www.jb51.net/jiaoben/649311.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/181205/162543361311.jpg\"
  },
  {
    : \"微信小程序实战入门(内含完整实例解析) 刘明洋著\",
   href: \"https://www.jb51.net/books/648114.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/181128/1H13HM103.jpg\"
  },
  {
    : \" 开发框架权威指南\",
   href: \"https://www.jb51.net/books/636104.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/180910/1H9462K325.jpg\"
  }
],

我们有2种方式来绑定这些数据到模板上，第一种是非常简单的hardcode方法，第二种是自动识别变量式的。

我们先来看第一种方式，是通过替换花括号里的值为data里所对应的值来达到目的：

template = document.querySelector(\'#template\').innerHTML,
result = document.querySelector(\'.result\'),
i = 0, len = data.length,
fragment = \'\';
for ( ; i < len; i++ ) {
  fragment += template
   .replace( /\\{\\{ \\}\\}/, data[i].  )
   .replace( /\\{\\{href\\}\\}/, data[i].href )
   .replace( /\\{\\{imgSrc\\}\\}/, data[i].imgSrc );
}
result.innerHTML = fragment;

完整js部分：

;(function() {
 // simulates AJAX request
 var data = [
  {
    : \"HTML5+SVG实现的圣诞夜棒棒糖山林雪景动画效果\",
   href: \"https://www.jb51.net/jiaoben/649311.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/181205/162543361311.jpg\"
  },
  {
    : \"微信小程序实战入门(内含完整实例解析) 刘明洋著\",
   href: \"https://www.jb51.net/books/648114.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/181128/1H13HM103.jpg\"
  },
  {
    : \" 开发框架权威指南\",
   href: \"https://www.jb51.net/books/636104.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/180910/1H9462K325.jpg\"
  }
 ],
   template = document.querySelector(\'#template\').innerHTML,
   result = document.querySelector(\'.result\'),
   i = 0, len = data.length,
   fragment = \'\';
 for ( ; i < len; i++ ) {
  fragment += template
   .replace( /\\{\\{ \\}\\}/, data[i].  )
   .replace( /\\{\\{href\\}\\}/, data[i].href )
   .replace( /\\{\\{imgSrc\\}\\}/, data[i].imgSrc );
 }
 result.innerHTML = fragment;
})();

这里使用在线HTML/CSS/ 前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun 测试上述代码运行效果：

\"\"

第二种方式比较灵活，是通过正则表达式来替换所有花括号的值，而无需一个一个替换，这样相对来说比较灵活，但是要注意模板标签可能在数据里不存在的情况：

template = document.querySelector(\'#template\').innerHTML,
result = document.querySelector(\'.result\'),
attachTemplateToData;
// 将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。
attachTemplateToData = function(template, data) {
    var i = 0,
      len = data.length,
      fragment = \'\';
    // 遍历数据集合里的每一个项，做相应的替换
    function replace(obj) {
      var t, key, reg;
　　　　　　　//遍历该数据项下所有的属性，将该属性作为key值来查找标签，然后替换
      for (key in obj) {
        reg = new RegExp(\'{{\' + key + \'}}\', \'ig\');
        t = (t || template).replace(reg, obj[key]);
      }
      return t;
    }
    for (; i < len; i++) {
      fragment += replace(data[i]);
    }
    return fragment;
  };
result.innerHTML = attachTemplateToData(template, data);

此时js部分完整代码：

;(function() {
 // simulates AJAX request
 var data = [
  {
    : \"HTML5+SVG实现的圣诞夜棒棒糖山林雪景动画效果\",
   href: \"https://www.jb51.net/jiaoben/649311.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/181205/162543361311.jpg\"
  },
  {
    : \"微信小程序实战入门(内含完整实例解析) 刘明洋著\",
   href: \"https://www.jb51.net/books/648114.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/181128/1H13HM103.jpg\"
  },
  {
    : \" 开发框架权威指南\",
   href: \"https://www.jb51.net/books/636104.html\",
   imgSrc: \"https://files.jb51.net/do/uploads/litimg/180910/1H9462K325.jpg\"
  }
 ],
    template = document.querySelector(\'#template\').innerHTML,
    result = document.querySelector(\'.result\'),
    attachTemplateToData;
  // 将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。
  attachTemplateToData = function(template, data) {
    var i = 0,
      len = data.length,
      fragment = \'\';
    // 遍历数据集合里的每一个项，做相应的替换
    function replace(obj) {
      var t, key, reg;
      for (key in obj) {
        reg = new RegExp(\'{{\' + key + \'}}\', \'ig\');
        t = (t || template).replace(reg, obj[key]);
      }
      return t;
    }
    for (; i < len; i++) {
      fragment += replace(data[i]);
    }
    return fragment;
  };
  result.innerHTML = attachTemplateToData(template, data);
})();

感兴趣的朋友可以使用在线HTML/CSS/ 前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun 测试上述代码运行效果。

这样，我们就可以做到，无限制定义自己的标签和item属性了，而无需修改JS代码。

更多关于模板引擎的信息，你可以访问如下2个地址，这2个引擎都不错哦。

HandleBars.js
Mustache.js

参考原文：http://net.tutsplus.com/tutorials/ -ajax/create-a-makeshift- -templating-solution/

更多关于 相关内容可查看本站专题：《 面向对象入门教程》、《 切换特效与技巧总结》、《 查找算法技巧总结》、《 错误与调试技巧总结》、《 数据结构与算法技巧总结》、《 遍历算法与技巧总结》及《 数学运算用法总结》

希望本文所述对大家 程序设计有所帮助。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章