一个简单地template模板
之前的项目中用到了artTemplate模板，感觉挺有意思，于是查看相关资料，自己动手写了个简单地template模板插件。虽然会有一些不足，但也是自己的一番心血。主体代码如下
/*
* 一个简单地template模板语法写法
*/
!function () {
"use strict";
/*
*tpl为传入的模板内容,data为数据
*/
function template(tpl, data) {
/*如果传入的是元素，则获取他的innerHTML赋值给他本身*/
if (tpl.tagName) {
tpl = tpl.innerHTML;
}
/*将tpl中的"转义*/
tpl = tpl.replace(/"/g, '\\"');
/*判断使用字符串拼接方式还是使用push方式*/
var isTrim = ''.trim;
/*定义正则表达式
reg: 匹配分隔符<%%>
reg1: 匹配原生js代码
*/
var reg = /<%([^\n]*)%>/g;
var reg1 = /(for|while|do|if|else|switch|case|default|break|continue|{|})/g;
/*定义一个空数组的字符串*/
var str = isTrim ? "var arr = [];" : ["var arr = [];"];
/*定义一个初始的下标，下方会需要*/
var index1 = 0;
/*定义一个接收正则结果的变量*/
var regResult;
while (regResult = reg.exec(tpl)) {
if (isTrim) {
str += 'arr.push("' + tpl.slice(index1, regResult.index).replace(/\s+/g, ' ') + '");';
if (regResult[1].match(reg1)) {
str += regResult[1];
} else {
str += 'arr.push(' + regResult[1] + ');';
}
} else {
str.push('arr.push("');
str.push(tpl.slice(index1, regResult.index).replace(/\s+/g, ' '));
str.push('");');
if (regResult[1].match(reg1)) {
str.push(regResult[1]);
} else {
str.push('arr.push(');
str.push(regResult[1]);
str.push(');');
}
}
index1 = regResult.index + regResult[0].length;
}
if (index1 < tpl.length) {
if (isTrim) {
str += 'arr.push("' + tpl.slice(index1).replace(/\s+/g, ' ') + '");';
} else {
str.push('arr.push("');
str.push(tpl.slice(index1).replace(/\s+/g, ' '));
str.push('");');
}
}
isTrim ? str += 'return arr.join("");' : str.push('return arr.join("");');
isTrim ? '' : str = str.join('');
return new Function(str).call(data);
}
window.template = template;
}();
代码的逻辑很简单，通过isTrim判断是否采用字符串拼接的方法（字符串拼接在IE8一下浏览器中速度很是感人，所以一般采用数组的push方法）；之后对获取到的tpl内容进行相关处理，处理成可供js执行的字符串，简单地例子如下：
<ul>
<%for (var i = 0;i < data.arr.length;i++) {%>
<li>
<%for (var j = 0;j < data.arr[i].length;j++) {%>
<a href="javascript:void(0)" data_id="<%data.arr[i][j].id%>">
<%data.arr[i][j].name%>
<span>——</span>
<%data.arr[i][j].value%>
</a><br>
<%}%>
</li>
<%}%>
</ul>
上述代码会被解析成如下字符串代码（在高版本浏览器下）：
str = '<ul>';
for (var i = 0;i < data.arr.length;i++) {
str += '<li>';
for (var j = 0;j < data.arr[i][j].length;j++) {
str += '<a href="javascript:void(0)"data_id="' + data.arr[i][j].id + '">' + data.arr[i][j].name + '<span>————</span>' + data.arr[i][j].value + '</a><br>';
}
str += '</li>';
}
str += '</ul>';
最终的字符串放在new Function()内执行（不是很了解这个方法的可以查看w3c，上面有详细的解释），生成需要的字符串。
（reg正则判断还是有问题，刚开始用的是 /<%([^%>]*)%>/g，但是这种匹配规则会不识别类似于<% if (a > b) {%>这种写法，但是有没有找到可以匹配<%开头、%>结尾、中间内容不存在%>的正则匹配规则，所以最终使用了 [^\n]代替，这样就必须每两个<%%>之间要有换行符隔开，但为了照顾到if判断中可能出现的>、<、%，也只好如此了。。。或许可以结合indexOf实现吧。。。）
一个简单地小demo如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<title>template</title>
<script>
/*
* 一个简单地template模板语法写法
*/
!function () {
"use strict";
/*
*tpl为传入的模板内容,data为数据
*/
function template(tpl, data) {
/*如果传入的是元素，则获取他的innerHTML赋值给他本身*/
if (tpl.tagName) {
tpl = tpl.innerHTML;
}
/*将tpl中的"转义*/
tpl = tpl.replace(/"/g, '\\"');
/*判断使用字符串拼接方式还是使用push方式*/
var isTrim = ''.trim;
/*定义正则表达式
reg: 匹配分隔符<%%>
reg1: 匹配原生js代码
*/
var reg = /<%([^\n]*)%>/g;
var reg1 = /(for|while|do|if|else|switch|case|default|break|continue|{|})/g;
/*定义一个空数组的字符串*/
var str = isTrim ? "var arr = [];" : ["var arr = [];"];
/*定义一个初始的下标，下方会需要*/
var index1 = 0;
/*定义一个接收正则结果的变量*/
var regResult;
while (regResult = reg.exec(tpl)) {
if (isTrim) {
str += 'arr.push("' + tpl.slice(index1, regResult.index).replace(/\s+/g, ' ') + '");';
if (regResult[1].match(reg1)) {
str += regResult[1];
} else {
str += 'arr.push(' + regResult[1] + ');';
}
} else {
str.push('arr.push("');
str.push(tpl.slice(index1, regResult.index).replace(/\s+/g, ' '));
str.push('");');
if (regResult[1].match(reg1)) {
str.push(regResult[1]);
} else {
str.push('arr.push(');
str.push(regResult[1]);
str.push(');');
}
}
index1 = regResult.index + regResult[0].length;
}
if (index1 < tpl.length) {
if (isTrim) {
str += 'arr.push("' + tpl.slice(index1).replace(/\s+/g, ' ') + '");';
} else {
str.push('arr.push("');
str.push(tpl.slice(index1).replace(/\s+/g, ' '));
str.push('");');
}
}
isTrim ? str += 'return arr.join("");' : str.push('return arr.join("");');
isTrim ? '' : str = str.join('');
return new Function(str).call(data);
}
window.template = template;
}();
</script>
</head> <body>
<div id="app"></div>
<script type="text/html" id="template">
<h1>
<%data.text%>
</h1>
<div>
<%if (!data.arr) {%>
<h3>数据暂时为空哦！</h3>
<div>
<%}else{%>
<ul>
<%for (var i = 0;i < data.arr.length;i++) {%>
<li>
<%for (var j = 0;j < data.arr[i].length;j++) {%>
<a href="javascript:void(0)" data_id="<%data.arr[i][j].id%>">
<%data.arr[i][j].name%>
<span>——</span>
<%data.arr[i][j].value%>
</a><br>
<%}%>
</li>
<%}%>
</ul>
<%}%>
</div>
</script>
<script>
var data = {
text: "简单地template",
arr: [
[{ id: 1000, name: "葛小伦", value: "银河之力" }, { id: 1001, name: "刘闯", value: "长城一号" }, { id: 1002, name: "蕾娜", value: "太阳之光" }, { id: 1003, name: "赵信", value: "人生赢家啊" }],
[{ id: 2000, name: "宋江", value: "及时雨" }, { id: 2001, name: "晁盖", value: "天王" }, { id: 2002, name: "林冲", value: "豹子头" }, { id: 2003, name: "武松", value: "行者" }],
[{ id: 3000, name: "曹操", value: "丞相" }, { id: 3001, name: "关羽", value: "汉寿亭侯" }]
]
};
var html = template(document.getElementById('template').innerHTML, data);
document.getElementById('app').innerHTML = html;
</script>
</body>
</html>
一个简单地template模板的更多相关文章
- OpenCms JSP 模板开发——创建一个简单的JSP模板
OpenCms中的JSP模板就是一个普通的JSP页面,在特定的位置使用标签来包含内容,在这个的例子中,我们将要开发一个简单JSP模板,这个模板只是在内容(如<html>.<body& ...
- Html+css 一个简单的网页模板
一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
- 一个简单的PHP模板引擎
PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处 ...
- 一个简单的模板引(han)擎(shu)
自制一个简单的模板引(han)擎(shu) 原理 说大了 实际上是模板函数 原理呢就是简单的字符串替换 第一版 var data = { username: 'Muhha' } str = '< ...
- web 框架的本质及自定义web框架 模板渲染jinja2 mvc 和 mtv框架 Django框架的下载安装 基于Django实现的一个简单示例
Django基础一之web框架的本质 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基于Django实现的一个简单 ...
- 一个简单的代码生成器（T4文本模板运用）
说要写这篇文章有一段时间了,但因为最近各方面的压力导致心情十二分的不好,下班后往往都洗洗睡了.今天痛定思痛,终于把这件拖了很久的事做了.好,不废话了,现在看看"一个简单的代码生成器" ...
- c++ template 实现一个简单的"栈"
一: 实现一个简单的swap 原来我们写swap一定会这样写: 对于int类型的: swap(const int &x,const int &y) { int temp; temp = ...
- 动手写一个简单的Web框架（模板渲染）
动手写一个简单的Web框架(模板渲染) 在百度上搜索jinja2,显示的大部分内容都是jinja2的渲染语法,这个不是Web框架需要做的事,最终,居然在Werkzeug的官方文档里找到模板渲染的代码. ...
- java课堂测试—根据模板完成一个简单的技术需求征集系统
课堂上老师发布了一个页面模板要求让我们实现一个系统的功能,模仿以后后端的简单工作情况. 然后在这个模板的基础上,提供了一个注册的网页模板,接着点击注册的按钮,发现register里面调用了zhu/zh ...
随机推荐
- 拖拽 ‘vue-grid-layout’ 插件了解下
我接触到vue-grid-layout是通过我们公司的项目,感觉还是比较简单上手的,大概看了有1个小时吧,我是个行动派,就是觉得实践出真知,但是记性也不太好,有时候自己踩过的坑会忘记,会改但是会忘记原 ...
- Python常用高级函数
一 .匿名函数 有些时候,我们不需要显式的定义函数,可以使用匿名函数临时快速定义函数. lambda x: x * x 关键字lambda表示匿名函数,冒号前面的x表示函数的参数,多个参数用','隔开 ...
- iOS下 UILabel 如何自动换行
背景: 相信很多朋友都遇到过,文本的内容长度不一,需要根据内容的多少来自动换行处理. 场景: 很多APP中评论,有的评论长,有的评论短,有的一行,有的多行. 下面以评论的实现为例来说说具体如何实现 ...
- 学习excel的使用技巧统计文本出现的次数
其实是使用一个函数来完成的 =ifcount(C1:C214,''test123") 统计c1到c214中出现的test123的次数
- spring boot 整合quartz ,job不能注入的问题
在使用spring boot 整合quartz的时候,新建定时任务类,实现job接口,在使用@AutoWire或者@Resource时,运行时出现nullpointException的问题.显然是相关 ...
- python大法好——飞机大战完整吧
# -*- coding:utf-8 -*-import pygamefrom pygame.locals import *import time '''说明1.按下b键,让玩家飞机爆炸 2.爆炸效果 ...
- xml模块学习
import xml.etree.ElementTree as ET tree = ET.parse("xmltest.xml") root = tree.getroot() pr ...
- Java自学如何找工作
今天聊一下可能大多数人都关注的问题“自学Java如何找工作”那么首先你就要明确现在招聘Java开发的基本要求是什么?下面我们来看一下招聘网站上面的要求,在这里我只随便找了一个比较全面的要求,自己可以去 ...
- spark总结
算子总结 1.变换操作,包括过滤,变换,去重,排序,分区操作 filter过滤操作,无法触发重新分区 map,flatMap,flatMapValues,mapValues,mapPartitions ...
- Linux 添加中文字体库，解决Java 生成中文水印不显示问题
本机 Windows 环境测试以下代码生成中文水印完全没问题,但是发布到Linux下不显示,一开始以为是报错了没打印出来,搜索发现直接提示中文乱码的或者不显示的,才明白原来是字体库原因,于是开始解决这 ...