js的简单模板解析
在编程中总是会遇见很多动态生成的东西,一般我们都是通过简单的html拼接起来的
function createHtml(name, phone, addr, email, imageSrc){
var html = '';
html += '<div class=personInfo>'
html += '<p>Name: ' + name + '</p>';
html += '<p>Phone: ' + phone + '</p>';
html += '<p>Addr: ' + addr + '</p>';
html += '<p>Email: ' + email + '</p>';
html += '<img src="' + imageSrc + '">';
html += '</div>'
return html;
}
但是其实我们可以通过使用正则表达式来进行简单的替换,从而实现模板解析
<script type="template" id="template">
<h2>
<a href="{{href}}">
{{title}}
</a>
</h2>
<img src="{{imgSrc}}" alt="{{title}}">
</script>
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;
}
来一份简单的源代码:
<!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}}">
{{title}}
</a>
</h2>
<img src="{{imgSrc}}" alt="{{title}}">
</script> <script type="text/javascript">
var data = [
{
title : 'php web appliaction',
href : 'http://www.baidu.com',
imgSrc : 'http://www.baidu.com'
},
{
title : 'js 权威指南',
href : 'http://www.qq.com',
imgSrc : 'http://www.qq.com'
}];
var template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result');
function _template(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;
}
console.log(_template(template, data));
</script>
</body>
</html>
js的简单模板解析的更多相关文章
- 一种简单快速的模板解析方法,活用with javascript版
//一种简单快速的模板解析方法,活用with var parseTpl = function( str, data ) { var tmpl = 'var __p=[];' + 'with(obj|| ...
- js 简单模板引擎
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- [转载]ECMall模板解析语法与机制
ECMall模板解析语法与机制 2011-05-22 在ECMall模板中,用"{"开头,以"}"结尾就构成一个标签单元,"{"紧接着的单词 ...
- Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
- 1kb的前端HTML模板解析引擎,不限于嵌套、循环、函数你能想到的解析方式
传送门:https://github.com/xiangyuecn/BuildHTML copy之前说点什么 html做点小功能(什么都没有),如果是要手动生成html这种操作,容易把代码搞得乱七八糟 ...
- vert.x学习(四),使用模板解析器ClassLoaderTemplateResolver
在vert.x中使用模板解析,可以为我们带来很多方便.我这里学习了一下ClassLoaderTemplateResolver的简单使用.这次工程配置与上篇一样,不需要做任何多的配置.直接编写代码就可以 ...
- HTML(.js) – 最简单的方式操作 DOM 的 JS 库
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
- CI 模板解析器类
模板解析器类可以解析你的视图文件中的伪变量.它可以解析简单的变量或者以变量作为标签的结构.如果你以前没有用过模板引擎,那么伪变量如下所示: <html><head><ti ...
- ThinkPHP第八天(U函数放置在外部JS不会被解析,错误界面定制,错误信息变量)
1.JS外部文件中U函数不会被解析,内部JS代码可以被解析. 2.halt. _404可以定制错误模板,在配置文件中配置 TMPL_EXCEPTION_FILE =>'./Public/Tpl/ ...
随机推荐
- AndroidStudio SDK版本下载
错误描述: pkg: /data/local/tmp/com.example.myapplication Failure [INSTALL_FAILED_OLDER_SDK] 出现这个错误,研究了半天 ...
- Asp.net页面使用showModalDialog时Postback弹出新页面解决办法
今天碰到一个让我一开始觉得莫名其妙的问题, 用window.showModalDialog打开一个.aspx文件,然后点击这个页面上一个button, 把页面的数据存入数据库之后,居然又打开一个这个页 ...
- 谷歌postman插件用不了的命令行指令
谷歌postman插件用不了,想测试通过post提交传过来的参数测试,打开所在目录,shift右键,打开命令窗口,输入一下指令,即可获取到提交的值curl -X POST -d 'name=kpf&a ...
- Binary XML file : Error inflating class com.esri.android.map.MapView
在测试esri arcgis for android的第一个程序Helloworld的时候,报这样的错: Binary XML file : Error inflating class com.esr ...
- 【转】 iOS 原生二维码扫描(可限制扫描区域)
在用 AVFoundation 完成扫码后,遇到2个问题: 1,如何限制扫描范围? 2.条形码如何扫描? 一位朋友的文章帮助了我,特地转来,可以帮到有需要的朋友. 原文:http://blog.csd ...
- XML约束图解
- Java中的继承与组合
本文主要说明Java中继承与组合的概念,以及它们之间的联系与区别.首先文章会给出一小段代码示例,用于展示到底什么是继承.然后演示如何通过“组合”来改进这种继承的设计机制.最后总结这两者的应用场景,即到 ...
- Java学习----你可以告诉对象该怎么做(方法中传参)
对象根据参数传递来的条件执行相应的功能. package org.demo.app2; public class App2 { public void print(String msg, int nu ...
- css 雪碧图 及jquery定位代码
无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...
- javascript知识图谱