这篇文章主要介绍了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程序设计有所帮助。

最新资讯
内外备受冲击,知识付费走下神坛

内外备受冲击,知识付费

繁荣的背后,知识付费却也面临增长乏力的困境。内容质量
泼天股价背后,宁德时代的资本赌局

泼天股价背后,宁德时代

翻看宁德时代财报,前三季度,营收和利润双双同比下滑。而
社交媒体平台Parler或于1月底恢复上线 CEO称将每天公布进展

社交媒体平台Parler或

据报道,备受争议的社交媒体平台Parler CEO约翰·马茨(Jo
腾讯致歉PC版QQ读取浏览记录:判断是否恶意登录 数据不上传不储存

腾讯致歉PC版QQ读取浏

腾讯表示,读取的数据用于在PC QQ的本地客户端中判断是
监管风暴后续,互联网存款的存量掣肘

监管风暴后续,互联网存

互联网存款没了?互联网存款全剧终?自1月15日商业银行互
投资人称Facebook和Twitter面临10年政治清算 投资吸引力将下降

投资人称Facebook和Tw

苏格兰抵押投资信托公司基金经理詹姆斯·安德森日前表
最新文章
详解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支持,