本文讲述了一个JavaScript构建自己的模板引擎的例子。分享给大家参考，如下：

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

首先，让我们在id为template的脚本块中定义我们需要的模板：

HTML部分：

！doctype html html head meta charset=utf-8 title simple Templating/title/head body div class=' result '/Divscript type=' template ' id=' template ' h2a href=' { { href } } ' rel=' external no follow ' { { title } }/a/h2img src=' http : { { img src } } ' alt=' { { title } } '/script/body

a:link，a : visited { color : # 3D81EE；}然后，我们需要通过Ajax等手段获取所需的数据。在这里，为了便于展示，我们使用自己定义的数组：

Var data=[{title: 'HTML5 SVG的平安夜棒棒糖山雪景卡通效果'，href : ' https://www.jb51.net/jiaoben/649311.html', Img src : ' https://files . JB 51 . net/do/uploads/litig/181205/162543361311 . jpg ' }，{title: '刘名洋微信小程序介绍(含完整示例分析)'，href 3360 '

我们先来看第一种方式，通过用数据中对应的值替换花括号中的值来达到目的：

template=document . queryselector(' # template ')。innerHTML，结果=document.querySelector('。结果')，i=0，len=data.length，fragment=for(；我透镜；i ) {片段=模板。替换(/{{title}}/，数据[i]。标题)。替换(/{{href}}/，数据[i]。href)。替换(/{{imgSrc}}/，数据[i]。img src)；} result.innerHTML=fragment完整的js部分：

；(function(){//模拟Ajax request var data=[{ title : ' html 5 SVG的平安夜棒棒糖山雪景卡通效果'，href : ' https://www.jb51.net/jiaoben/649311.html', Img src : ' https://files . JB 51 . net/do/uploads/lit mg/181205/162543361311 . jpg ' }，{ title 3: '刘名洋对微信小程序的介绍(包括完整的示例分析')，hreinnerHTML，结果=document.querySelector('。结果')，i=0，len=data.length，fragment=for(；我透镜；i ) {片段=模板。替换(/{{title}}/，数据[i]。标题)。替换(/{{href}}/，数据[i]。href)。替换(/{{imgSrc}}/，数据[i]。img src)；} result.innerHTML=fragment})();在这里，使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码的运行效果：

第二种方法比较灵活，用正则表达式替换所有花括号值，不用逐个替换，相对灵活，但要注意数据中可能不存在模板标签的情况：

模板=文档。queryselector(' # template ').innerHTML，结果=document.querySelector(' .结果)，attachTemplateToData//将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在)。attachTemplateToData=函数（模板，数据){ var i=0，len=data.length，fragment=//遍历数据集合里的每一个项，做相应的替换函数替换(obj) { var t，key，reg//遍历该数据项下所有的属性，将该属性作为键值来查找标签，然后替换for(key in obj){ reg=new RegExp(" { " key " } } "，" ig ")；t=(t ||模板)。替换(reg，obj[key])；}返回t；} for(；我透镜；I){ fragment=replace(数据[I])；}返回片段；};结果。innerhtml=attachTemplateToData(模板，数据);此时射流研究…部分完整代码：

；(函数(){ //模拟创建交互式、快速动态网页应用的网页开发技术请求定义变量数据=[ { title: 'HTML5 SVG实现的圣诞夜棒棒糖山林雪景动画效果，href : ' https://www .JB 51。net/jiao Ben/649311。html '，imgsrc : ' https://文件。JB 51。net/do/uploads/liti mg/181205/162543361311。jpg ' }，{ title: '微信小程序实战入门（内含完整实例解析)刘明洋著，href : ' https://www .JB 51。net/books/648114。html '，imgsrc : ' https://文件。JB 51。net/do/uploads/liti mg/181128/1 H13 hm 103。jpg ' }，{ title: 'JavaScript开发框架权威指南，href : ' https://www .JB 51。net/books/636104。html '，imgsrc : ' https://文件。JB 51。net/do/uploads/liti mg/180910/1h 9462k 325。jpg ' }]，模板=文档。queryselector(' # template ').innerHTML，结果=document.querySelector(' .结果)，attachTemplateToData//将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在)。attachTemplateToData=函数（模板，数据){ var i=0，len=data.length，fragment=//遍历数据集合里的每一个项，做相应的替换函数替换(obj) { var t，key，regfor(obj中的key){ reg=new RegExp(" { " key " } } "，" ig ")；t=(t ||模板)。替换(reg，obj[key])；}返回t；} for(；我透镜；I){ fragment=replace(数据[I])；}返回片段；};结果。innerhtml=attachTemplateToData(模板，数据);})();感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://工具。JB 51。net/code/WebCodeRun测试上述代码运行效果。

这样，我们就可以做到，无限制定义自己的标签和项目属性了，而无需修改射流研究…代码。

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

车把，小胡子

参考原文：http://网。啧啧啪啪。com/教程/JavaScript-Ajax/create-a-临时-JavaScript-模板-解决方案/

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

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