这篇文章主要介绍了JavaScript构建自己的模板小引擎,结合实例形式分析了javascript自定义模板引擎的实现与使用方法,需要的朋友可以参考下

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

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

首先我们先来定义我们需要的模板,在id为template的script块里:

HTML部分:

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

css样式:

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

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

var data = [
  {
   title: "HTML5+SVG实现的圣诞夜糖山林雪景动画效果",
   href: "https://www.lovean.com/jiaoben/649311.html",
   imgSrc: "https://files.lovean.com/do/uploads/litimg/181205/162543361311.jpg"
  },
  {
   title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
   href: "https://www.lovean.com/books/648114.html",
   imgSrc: "https://files.lovean.com/do/uploads/litimg/181128/1H13HM103.jpg"
  },
  {
   title: "JavaScript开发框架权威指南",
   href: "https://www.lovean.com/books/636104.html",
   imgSrc: "https://files.lovean.com/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( /\{\{title\}\}/, data[i].title )
   .replace( /\{\{href\}\}/, data[i].href )
   .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
}
result.innerHTML = fragment;

完整js部分:

;(function() {
 // simulates AJAX request
 var data = [
  {
   title: "HTML5+SVG实现的圣诞夜糖山林雪景动画效果",
   href: "https://www.lovean.com/jiaoben/649311.html",
   imgSrc: "https://files.lovean.com/do/uploads/litimg/181205/162543361311.jpg"
  },
  {
   title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
   href: "https://www.lovean.com/books/648114.html",
   imgSrc: "https://files.lovean.com/do/uploads/litimg/181128/1H13HM103.jpg"
  },
  {
   title: "JavaScript开发框架权威指南",
   href: "https://www.lovean.com/books/636104.html",
   imgSrc: "https://files.lovean.com/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( /\{\{title\}\}/, data[i].title )
   .replace( /\{\{href\}\}/, data[i].href )
   .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
 }
 result.innerHTML = fragment;
})();

这里使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.lovean.com/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 = [
  {
   title: "HTML5+SVG实现的圣诞夜糖山林雪景动画效果",
   href: "https://www.lovean.com/jiaoben/649311.html",
   imgSrc: "https://files.lovean.com/do/uploads/litimg/181205/162543361311.jpg"
  },
  {
   title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
   href: "https://www.lovean.com/books/648114.html",
   imgSrc: "https://files.lovean.com/do/uploads/litimg/181128/1H13HM103.jpg"
  },
  {
   title: "JavaScript开发框架权威指南",
   href: "https://www.lovean.com/books/636104.html",
   imgSrc: "https://files.lovean.com/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/JavaScript前端代码调试运行工具:http://tools.lovean.com/code/WebCodeRun 测试上述代码运行效果。

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

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

HandleBars.js
Mustache.js

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

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

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

最新资讯
消息称富士康成立工作组应对立讯精密竞争

消息称富士康成立工作

据多位知情人士称,苹果最大iPhone代工商富士康的母公司
变味的在线教育:每月花5亿元打广告,产品被指不重视少儿启蒙

变味的在线教育:每月花

在线教育在火过2020之后,开始有点变味了。
联想之星:已完成四期人民币基金募集 资金规模为8亿元

联想之星:已完成四期人

联想之星宣布已于9月30日完成四期人民币基金募集,资金
辛巴离薇娅还差100个李佳琦

辛巴离薇娅还差100个

辛巴、李佳琦、薇娅,他们早就不甘于当一个头部主播。除
特斯拉:今日起 超充站充电费用涨价

特斯拉:今日起 超充站

各站点的价格依据各地电价、相关的投入及运营情况和当
5G害了iPhone 12?

5G害了iPhone 12?

好不容易等来5G网络支持的iPhone 12,这下却要被5G给连
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,