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 class="result"></div>
<script type="template" id="template">
<h2>
<a href="{{href}}" rel="external nofollow" >
{{title}}
</a>
</h2>
<img src="{{imgSrc}}" alt="{{title}}">
</script>
</body>
</html>
css样式：
a:link, a:visited {
color: #3D81EE;
}
然后，我们需要通过Ajax等其它方式获取所需要的数据，这里为了展示方便，我们使用了自己定义的数组：
var data = [
{
title: "HTML5+SVG实现的圣诞夜棒棒糖山林雪景动画效果",
href: "https://www.jb51.net/jiaoben/649311.html",
imgSrc: "https://zsrimg.ikafan.com/do/uploads/litimg/181205/162543361311.jpg"
},
{
title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
href: "https://www.jb51.net/books/648114.html",
imgSrc: "https://zsrimg.ikafan.com/do/uploads/litimg/181128/1H13HM103.jpg"
},
{
title: "JavaScript开发框架权威指南",
href: "https://www.jb51.net/books/636104.html",
imgSrc: "https://zsrimg.ikafan.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.jb51.net/jiaoben/649311.html",
imgSrc: "https://zsrimg.ikafan.com/do/uploads/litimg/181205/162543361311.jpg"
},
{
title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
href: "https://www.jb51.net/books/648114.html",
imgSrc: "https://zsrimg.ikafan.com/do/uploads/litimg/181128/1H13HM103.jpg"
},
{
title: "JavaScript开发框架权威指南",
href: "https://www.jb51.net/books/636104.html",
imgSrc: "https://zsrimg.ikafan.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.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 = [
{
title: "HTML5+SVG实现的圣诞夜棒棒糖山林雪景动画效果",
href: "https://www.jb51.net/jiaoben/649311.html",
imgSrc: "https://zsrimg.ikafan.com/do/uploads/litimg/181205/162543361311.jpg"
},
{
title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
href: "https://www.jb51.net/books/648114.html",
imgSrc: "https://zsrimg.ikafan.com/do/uploads/litimg/181128/1H13HM103.jpg"
},
{
title: "JavaScript开发框架权威指南",
href: "https://www.jb51.net/books/636104.html",
imgSrc: "https://zsrimg.ikafan.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.jb51.net/code/WebCodeRun 测试上述代码运行效果。
这样，我们就可以做到，无限制定义自己的标签和item属性了，而无需修改JS代码。
更多关于模板引擎的信息，你可以访问如下2个地址，这2个引擎都不错哦。
参考原文：http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
koa2使用ejs和nunjucks作为模板引擎的使用
一.使用 ejs 作为模板引擎 koa2 如果使用 ejs.jade 这种作为模板引擎的话,直接使用 koa-views 进行模板加载即可. 比如使用 ejs : 安装: yarn add koa-views ejs 使用: 在使用 render 的时候,需要进行异步文件模板读取,因此 ctx.render 需要使用 await const app= require('koa')(); const koaViews= require('koa-views'); const path = requ
-
JavaScript模板引擎实现原理实例详解
本文实例讲述了JavaScript模板引擎实现原理.分享给大家供大家参考,具体如下: 1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> <a href="{{href}}" rel="external nofollow" > {{title}} </a> </h2> <img src
-
详解Node.js模板引擎Jade入门
Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近.并且,Jade也支持空格. 1.标签 在Jade里,一行开头的任何文本都被默认解释成HTML标签.并且你只需要你写开始标签--注意:不需要加"<>".因为Jade会帮我们渲染闭合和开始标签.例如: body div h1 Jade是Node.js的一个模板引擎 p 它借鉴了Haml的很多地方,所以语法上和Haml比较相近. div footer © Pandora 上面的Jad
-
新手入门带你学习JavaScript引擎运行原理
一些名词 JS引擎 - 一个读取代码并运行的引擎,没有单一的"JS引擎";,每个浏览器都有自己的引擎,如谷歌有V. 作用域 - 可以从中访问变量的"区域". 词法作用域- 在词法阶段的作用域,换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变. 块作用域 - 由花括号{}创建的范围 作用域链 - 函数可以上升到它的外部环境(词法上)来搜索一个变量,它可以一直向上查找,直到它到达全局作用域. 同步 - 一次
-
使用Node.js实现一个多人游戏服务器引擎
摘要 听说过文字冒险游戏吗? 如果你的年龄足够大的话(就像我一样),那么你可能听说过.甚至玩过"back in the day".在本文中,我将向你展示编写的整个过程.这不仅仅是一个文本冒险游戏,而是一个能让你和你的朋友们一起玩的,可以进行任何剧情的文本冒险游戏引擎. 没错,我们将通过在添加多人游戏功能来增加它的趣味性. 文字冒险是最早的 RPG 形式的游戏之一,回到还没有图形画面的时代,你只能通过阅读 CRT 显示器上黑色背景下的描述,并且依赖自己的想象力来推动游戏剧情的发展. 如果
-
JavaScript模板引擎应用场景及实现原理详解
本文实例讲述了JavaScript模板引擎应用场景及实现原理.分享给大家供大家参考,具体如下: 一.应用场景 以下应用场景可以使用模板引擎: 1.如果你有动态ajax请求数据并需要封装成视图展现给用户,想要提高自己的工作效率. 2.如果你是拼串族或者数组push族,迫切的希望改变现有的书写方式. 3.如果你在页面布局中,存在共性模块和布局,你可以提取出公共模板,减少维护的数量. 二.实现原理 不同模板间实现原理大同小异,各有优缺,请按需选择,以下示例以artTemplate模板引擎来分析. 2.
-
JavaScript模板引擎原理与用法详解
本文实例讲述了JavaScript模板引擎原理与用法.分享给大家供大家参考,具体如下: 一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { "name": "Barret Lee", "age": "
-
Node.js 使用jade模板引擎的示例
在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本的目录结构.模板.stylesheet.routers等.虽然那只是一个简单的HelloWorld类的小东西,可里面包含的内容还是有些多了,为了更好的理解Express所支持的jade模板引擎的用法,我们这次提供一个手动创建的小网站,可以显示来访者的IP,并对访问进行计数. 安装jade npm instal
-
JavaScript构建自己的模板小引擎示例
本文实例讲述了JavaScript构建自己的模板小引擎.分享给大家供大家参考,具体如下: 有时候,我们不需要太牛逼太强大的JavaScript模板引擎(比如jQuery tmpl或者handlebarsjs),我们只是需要在简单的模板里绑定一些非常简单的字段,本文将使用非常简单的技巧来帮你实现这个小功能. 首先我们先来定义我们需要的模板,在id为template的script块里: HTML部分: <!doctype html> <html> <head> <me
-
JavaScript构建自己的对象示例
本文实例讲述了JavaScript构建自己的对象.分享给大家供大家参考,具体如下: <script type='text/javascript'> //构建一个CustomerBooking类 //构造函数 function CustomerBooking(bookingId,customerName,film,showDate){ this.bookingId = bookingId; this.customerName = customerName; this.film = film; t
-
javascript 初学教程及五子棋小程序的简单实现
一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 二.hbulider工具的使用 1) hbulider的特点: 1.飞快的编码速度 2.HBuilder直接创建移动App,打包为ios或Android原生安装包 3.HTML5语法.HTML5+
-
javascript实现Emrips反质数枚举的示例代码
今天看到一个kata,提出一个"emirps"的概念:一个质数倒转后得到的是一个不同的质数,这个数叫做"emirps". 例如:13,17是质数,31,71也是质数,13和17是"emirps". 但是质数757,787,797是回文质数,这意味着反转的数字与原始数字相同,所以它们不被认为是"emirps". 题目要求写一个函数输入一个正整数n,返回小于n的"emirps"的个数,其中最大"emi
-
JavaScript/TypeScript 实现并发请求控制的示例代码
场景 假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制 模拟 利用 setTimeout 实行简单模仿一个请求 let startTime = Date.now(); const timeout = (timeout: number, ret: number) => { return (idx?: any) => new Promise((resolve) => { setTimeout(() => { const compa
-
python jinja2模板的使用示例
模板的用处 jinja2 可以用来修改配置文件,把配置文件的关键地方可以用变量来进行替换 模板语法 模板语法和django的模板语法差不多 在jinja2中,存在三种语法: 控制结构{% %} 变量取值{{ }} 注释{# #} for 循环 {% for user in users %} {{user.username}} {% endfor %} 迭代字典 {% for key,value in my_dict.iteritems() %} {{ key }} {{ value }} {%
-
原生javascript中检查对象是否为空示例实现
目录 什么是原生 JavaScript A.在较新的浏览器中检查空对象 通过检查 constructor 解决误报 对其他值进行空检查 B.旧版本浏览器中的空对象检查 使用 JavaScript 检查空对象 其它类型的构造函数也能正常判断 使用外部库检查空对象 原生 VS 库 下面的代码片段,用于检查对象是否为空. 对于较新的浏览器,你可以使用 ES6 的 "Object.keys".对于较旧的浏览器,可以安装Lodash库并使用其" isEmpty"方法. con
-
JavaScript 显示一个倒计时广告牌的实现示例
本文主要介绍了JavaScript 显示一个倒计时广告牌的实现示例,分享给大家,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
利用JavaScript构建树形图的方法详解
目录 什么是树形图 浏览JS树形图 创建一个基本的JS树形图 1. 创建一个HTML页面 2. 参考JavaScript文件 3.设置数据 4. 编写一些JS树形图代码 自定义JS树形图 A. 改变颜色 B. 应用线性色标 C. 格式化标签和工具提示 D. 按升序排列图块 树形图可视化广泛用于分层数据分析.如果你没有经验还想创建一个,那将会有些复杂.下面是一个详细教程,教你如何使用JavaScript创建交互式树形图. 宇宙中只有我们吗?我们每个人都曾在某个时候问过自己这个问题.当我们在考虑地球
-
JavaScript实现一个Promise队列小工具
目录 摘要 思考 实现 总结 摘要 在百度的解释中,队列是一种特殊的线性表,特殊之处在于它只允许在表的前端进行删除操作,而在表的后端进行插入操作,和栈一样,队列是一种操作受限制的线性表.进行插入操作的端称为队尾,进行删除操作的端称为队头. 受这个队列结构的启发,在前端不同的业务场景中,由于一次性发起的异步请求过多,并且这些服务位于不同组件或者不同兄弟功能之间,我们无法直接对这些方法进行同步,所以需要引入队列的概念,对这些并发性的问题进行顺序处理. 思考 为什么要写一个类似于队列的功能? 我们知道