没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
4页
本文实例讲述了JavaScript构建自己的模板小引擎。分享给大家供大家参考,具体如下: 有时候,我们不需要太牛逼太强大的JavaScript模板引擎(比如jQuery tmpl或者handlebarsjs),我们只是需要在简单的模板里绑定一些非常简单的字段,本文将使用非常简单的技巧来帮你实现这个小功能。 首先我们先来定义我们需要的模板,在id为template的script块里: HTML部分: <!doctype html> <html> <head> <meta charset=utf-8> <title>Simple Templating</title> </head> <b
资源详情
资源评论
资源推荐
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://files.jb51.net/do/uploads/litimg/181205/162543361311.jpg"
},
{
title: "微信小程序实战入门(内含完整实例解析) 刘明洋著",
href: "https://www.jb51.net/books/648114.html",
imgSrc: "https://files.jb51.net/do/uploads/litimg/181128/1H13HM103.jpg"
},
{
title: "JavaScript开发框架权威指南",
href: "https://www.jb51.net/books/636104.html",
imgSrc: "https://files.jb51.net/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部分:
weixin_38607479
- 粉丝: 3
- 资源: 965
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0