全国咨询热线:18720358503

预约微信小程序开发_JavaScript构建自己的模板小引

类别:行业新闻 发布时间:2021-01-08 浏览人次:

JavaScript构建自己的模板小引擎示例       这篇文章主要介绍了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" 
 a href="{{href}}" rel="external nofollow" 
 {{title}}
 /h2 
 img src="{{imgSrc}}" alt="{{title}}" 
 /script 
 /body 
 /html 

css样式:

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

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

var data = [
 title: "HTML5+SVG实现的圣诞夜棒棒糖山林雪景动画效果",
 href: "",
 imgSrc: "///do/uploads/litimg/181205/1.jpg"
 title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
 href: "",
 imgSrc: "///do/uploads/litimg/181128/1H13HM103.jpg"
 title: "JavaScript开发框架权威指南",
 href: "",
 imgSrc: "///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: "",
 imgSrc: "///do/uploads/litimg/181205/1.jpg"
 title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
 href: "",
 imgSrc: "///do/uploads/litimg/181128/1H13HM103.jpg"
 title: "JavaScript开发框架权威指南",
 href: "",
 imgSrc: "///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前端代码调试运行工具: 测试上述代码运行效果:

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

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: "",
 imgSrc: "///do/uploads/litimg/181205/1.jpg"
 title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
 href: "",
 imgSrc: "///do/uploads/litimg/181128/1H13HM103.jpg"
 title: "JavaScript开发框架权威指南",
 href: "",
 imgSrc: "///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前端代码调试运行工具: 测试上述代码运行效果。

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

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


参考原文:

更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》、《》、《》及《》

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


推荐阅读

预约微信小程序开发_JavaScript构建自己的模板小引

JavaScript搭建自身的模版小模块实例 本文关键详细介绍了JavaScript搭建自身的模版小模块,融合案例方式剖析了javascript自定模版模块的完成与应用方式,必须的朋友能够参照下文中案例...

2021-01-08
广州凡科互联网科技股份有限公司招聘后期制作

招聘人数:3职位信息【CG合成师方向】1、负责对三维渲染分层素材进行后期合成;2、负责抠像、画面修理及清理工作;【视频栏目包装师方向】1、负责游戏宣传视频、视频广告、片头...

2021-01-08
何种色彩抠图好操纵-凡科抠图快速修复人物脸部

Photoshop迅速修补角色面部部分过曝的皮肤颜色相片解决网 公布 创作者:三毛 我想评价照片部分过曝是是非非经常见的,修补的方式有许多,下边详细介绍一种更为便捷的。全过程...

2021-01-08
广州凡科互联网科技股份有限公司招聘广发客服

招聘人数:9职位信息1、进行客户的关怀工作。2、根据客户介绍卡,提供公司的产品资料3、建立***。【任职资格】:1:男女不限,中专及以上学历,懂普通话/粤语、喜欢与人交流;2:...

2021-01-08
广州凡科互联网科技股份有限公司招聘销售培训

招聘人数:29职位信息1、员工岗前培训以及心态培训2、营养与减重相关专业知识整理,课件制作、专业技能培训等;3、负责公司员工的营养瘦身知识、产品知识等的培训工作;4、负责...

2021-01-08
广州凡科互联网科技股份有限公司招聘网络主播

招聘人数:18职位信息岗位职责:1、能根据直播现场的气氛,即兴发挥,调动全场的气氛;2、依照公司安排在网络平台上进行直播,包括线上线下粉丝维护;3、独立完成直播内容,与网...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信