有时候,我们不需要太牛逼太强大的JavaScript模板引擎(比如jQuery tmpl或者handlebarsjs),我们只是需要在简单的模板里绑定一些非常简单的字段,本文将使用非常简单的技巧来帮你实现这个小功能。
首先我们先来定义我们需要的模板,在id为template的script块里:前端UI分享
01 |
<!doctype html> |
02 |
<html> |
03 |
<head> |
04 |
<meta charset=utf-8>
|
05 |
<title>Simple Templating</title>
|
06 |
</head> |
07 |
<body> |
08 |
|
09 |
<div class= "result" ></div>
|
10 |
|
11 |
<script type= "template" id= "template" >
|
12 |
<h2>
|
13 |
<a href= "{{href}}" >
|
14 |
{{title}}
|
15 |
</a>
|
16 |
</h2>
|
17 |
<img src= "{{imgSrc}}" alt= "{{title}}" >
|
18 |
</script>
|
19 |
|
20 |
</body> |
21 |
</html> |
然后,我们需要通过Ajax等其它方式获取所需要的数据,这里为了展示方便,我们使用了自己定义的数组:
01 |
var data = [
|
02 |
{ |
03 |
title: "Knockout应用开发指南" ,
|
04 |
href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html" ,
|
05 |
imgSrc: "http://www.jcodecraeer.com"
|
06 |
}, |
07 |
{ |
08 |
title: "微软ASP.NET站点部署指南" ,
|
09 |
href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html" ,
|
10 |
imgSrc: "http://www.jcodecraeer.com"
|
11 |
}, |
12 |
{ |
13 |
title: "HTML5学习笔记简明版" ,
|
14 |
href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html" ,
|
15 |
imgSrc: "http://www.jcodecraeer.com"
|
16 |
} |
17 |
], |
我们有2种方式来绑定这些数据到模板上,第一种是非常简单的hardcode方法,第二种是自动识别变量式的。
我们先来看第一种方式,是通过替换花括号里的值为data里所对应的值来达到目的:前端UI分享
01 |
template = document.querySelector( '#template' ).innerHTML,
|
02 |
result = document.querySelector( '.result' ),
|
03 |
i = 0, len = data.length, |
04 |
fragment = '' ;
|
05 |
|
06 |
for ( ; i < len; i++ ) {
|
07 |
fragment += template
|
08 |
.replace( /\{\{title\}\}/, data[i].title )
|
09 |
.replace( /\{\{href\}\}/, data[i].href )
|
10 |
.replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
|
11 |
} |
12 |
|
13 |
result.innerHTML = fragment; |
第二种方式比较灵活,是通过正则表达式来替换所有花括号的值,而无需一个一个替换,这样相对来说比较灵活,但是要注意模板标签可能在数据里不存在的情况:
01 |
template = document.querySelector( '#template' ).innerHTML,
|
02 |
result = document.querySelector( '.result' ),
|
03 |
attachTemplateToData; |
04 |
|
05 |
// 将模板和数据作为参数,通过数据里所有的项将值替换到模板的标签上(注意不是遍历模板标签,因为标签可能不在数据里存在)。 |
06 |
attachTemplateToData = function (template, data) {
|
07 |
var i = 0,
|
08 |
len = data.length,
|
09 |
fragment = '' ;
|
10 |
|
11 |
// 遍历数据集合里的每一个项,做相应的替换
|
12 |
function replace(obj) {
|
13 |
var t, key, reg;
|
14 |
|
15 |
//遍历该数据项下所有的属性,将该属性作为key值来查找标签,然后替换
|
16 |
for (key in obj) {
|
17 |
reg = new RegExp( '{{' + key + '}}' , 'ig' );
|
18 |
t = (t || template).replace(reg, obj[key]);
|
19 |
}
|
20 |
|
21 |
return t;
|
22 |
}
|
23 |
|
24 |
for (; i < len; i++) {
|
25 |
fragment += replace(data[i]);
|
26 |
}
|
27 |
|
28 |
return fragment;
|
29 |
};
|
30 |
|
31 |
result.innerHTML = attachTemplateToData(template, data); |
这样,我们就可以做到,无限制定义自己的标签和item属性了,而无需修改JS代码。
相关推荐
主要介绍了JavaScript构建自己的模板小引擎,结合实例形式分析了javascript自定义模板引擎的实现与使用方法,需要的朋友可以参考下
Trimpath JavaScript 是不个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎。 它有如下的特点: 1、采用标准的JavaScript编写,支持跨浏览器 2...
本文主要是给大家分享的一个javascript页面模板库Handlebars的简单用法,可以帮助大家轻松的构建语义化模板,非常的实用,推荐给大家。
模板引擎建立在javascript原生技术之上:模板文字和标记函数。 安装 安装软件包: npm i @peter.naydenov/tag-templates 从脚本中请求模块: const tagTemplates = require ( '@peter.naydenov/tag-templates' ) ...
在评估了几种现有JavaScript模板语言以帮助构建用于开发的模拟Node服务器后,我非常渴望Thymeleaf的自然模板功能。 该项目的目标是首先在等Node服务器上执行与现有JS模板库(例如类似的任务。 一旦实现Thymeleaf-...
介绍模板引擎和数据绑定 讲解远程数据加载、第二代Ajax以及跨域请求 利用WebSockets和Node构建实时应用 拖拽上传文件以及上传进度提示 讲解主流的库和框架,包括jQuery、JavaScriptMVC以及Backbone 编写测试...
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
毫不奇怪,React比其他基本模板引擎要慢,但是通过使用最小化的构建,我们仍然能够看到显着的性能提升,而在ES6中使用新JavaScript类语法,还有一点点收获。 注意:最新版本的React(0.14)现在引入了无状态组件的...
用JavaScript编写的逐步增强HTML模板引擎 目录 背景 该库是旨在生成最佳渲染功能的编译器。 该函数应进行缓存和重用,以提供比其他模板语言更好的性能。 它也可以在各种上下文中使用,以呈现html页面,电子邮件...
这本书将专注于讲述如何构建“优雅又不失高水准”(state of the art)的JavaScript应用,包括软件架构、模板引擎、框架和库、同服务器的消息通信等内容。 通过由浅入深的讲解,你将学会如何构建具有丰富交互以及...
Tempo 是个轻量级的JSON渲染引擎(只有4kb),使用它可以以纯HTML的方式来构建数据呈现。 使用JSON作为数据源时经常是会在JS中解析JSON,然后拼成HTML呈现数据。而 Tempo 可以实现 HTML 与 JavaScript 的完全分离,...
MVC在前端的火爆促使该书的诞生。《JavaScript Web 富应用...这本书将专注于讲述如何构建“优雅又不失高水准”(state of the art)的JavaScript应用,包括软件架构、模板引擎、框架和库、同服务器的消息通信等内容。
基于 JSON 的模板引擎。 特征 HTML 文档的 JSON 表示 HTML5 优化 原始文本支持 通过 API 的条件、迭代和包含 多输出:字符串、缓冲区、流 漂亮的人类可读的输出选项 模具填充系统 安装 npm install ongine 用法 ...
MVC在前端的火爆促使该书的诞生。《JavaScript Web 富应用开发...这本书将专注于讲述如何构建“优雅又不失高水准”(state of the art)的JavaScript应用,包括软件架构、模板引擎、框架和库、同服务器的消息通信等内容
《基于mvc的javascript web富应用开发》将专注于讲述如何构建“优雅又不失高水准”(state of the art)的javascript 应用,包括软件架构、模板引擎、框架和库、同服务器的消息通信等内容。书中同样提供了大量的示例...