- 浏览: 42424 次
- 性别:
- 来自: 深圳
最新评论
简单实用的js模板引擎
不足50行的js模板引擎,支持各种js语法:
<script id="test_list" type="text/html">
<%=
for(var i = 0, l = p.list.length; i < l; i++){
var stu = p.list[i];
=%>
<tr>
<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
<td><%==stu.age=%></td>
<td><%==(stu.address || '')=%></td>
<tr>
<%=
}
=%>
</script>
“<%= xxx =%>”内是js逻辑代码,“<%== xxx =%>”内是直接输出的变量,类似php的echo的作用。“p”是调用下面build方法时的k-v对象参数,也可以在调用“new JTemp”时设置成别的参数名
调用:
$(function(){
var temp = new JTemp('test_list'),
html = temp.build(
{list:[
{name:'张三', age:13, address:'北京'},
{name:'李四', age:17, address:'天津'},
{name:'王五', age:13}
]});
$('table').html(html);
});
上面的temp生成以后,可以多次调用build方法,生成html
一下是模板引擎的代码:
var JTemp = function(){
function Temp(htmlId, p){
p = p || {};//配置信息,大部分情况可以缺省
this.htmlId = htmlId;
this.fun;
this.oName = p.oName || 'p';
this.TEMP_S = p.tempS || '<%=';
this.TEMP_E = p.tempE || '=%>';
this.getFun();
}
Temp.prototype = {
getFun : function(){
var _ = this,
str = $('#' + _.htmlId).html();
if(!str) _.err('error: no temp!!');
var str_ = 'var ' + _.oName + '=this,f=\'\';',
s = str.indexOf(_.TEMP_S),
e = -1,
p,
sl = _.TEMP_S.length,
el = _.TEMP_E.length;
for(;s >= 0;){
e = str.indexOf(_.TEMP_E);
if(e < s) alert(':( ERROR!!');
str_ += 'f+=\'' + str.substring(0, s) + '\';';
p = _.trim(str.substring(s+sl, e));
if(p.indexOf('=') !== 0){//js语句
str_ += p;
}else{//普通语句
str_ += 'f+=' + p.substring(1) + ';';
}
str = str.substring(e + el);
s = str.indexOf(_.TEMP_S);
}
str_ += 'f+=\'' + str + '\';';
str_ = str_.replace(/\n/g, '');//处理换行
var fs = str_ + 'return f;';
this.fun = Function(fs);
},
build : function(p){
return this.fun.call(p);
},
err : function(s){
alert(s);
},
trim : function(s){
return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,"");
}
};
return Temp;
}();
核心是将模板代码转变成了一个拼接字符串的function,每次拿数据call这个function。
因为主要是给手机(webkit)用的,所以没有考虑字符串拼接的效率问题,如果需要给IE实用,最好将字符串拼接方法改为Array.push()的形式。
不足50行的js模板引擎,支持各种js语法:
<script id="test_list" type="text/html">
<%=
for(var i = 0, l = p.list.length; i < l; i++){
var stu = p.list[i];
=%>
<tr>
<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
<td><%==stu.age=%></td>
<td><%==(stu.address || '')=%></td>
<tr>
<%=
}
=%>
</script>
“<%= xxx =%>”内是js逻辑代码,“<%== xxx =%>”内是直接输出的变量,类似php的echo的作用。“p”是调用下面build方法时的k-v对象参数,也可以在调用“new JTemp”时设置成别的参数名
调用:
$(function(){
var temp = new JTemp('test_list'),
html = temp.build(
{list:[
{name:'张三', age:13, address:'北京'},
{name:'李四', age:17, address:'天津'},
{name:'王五', age:13}
]});
$('table').html(html);
});
上面的temp生成以后,可以多次调用build方法,生成html
一下是模板引擎的代码:
var JTemp = function(){
function Temp(htmlId, p){
p = p || {};//配置信息,大部分情况可以缺省
this.htmlId = htmlId;
this.fun;
this.oName = p.oName || 'p';
this.TEMP_S = p.tempS || '<%=';
this.TEMP_E = p.tempE || '=%>';
this.getFun();
}
Temp.prototype = {
getFun : function(){
var _ = this,
str = $('#' + _.htmlId).html();
if(!str) _.err('error: no temp!!');
var str_ = 'var ' + _.oName + '=this,f=\'\';',
s = str.indexOf(_.TEMP_S),
e = -1,
p,
sl = _.TEMP_S.length,
el = _.TEMP_E.length;
for(;s >= 0;){
e = str.indexOf(_.TEMP_E);
if(e < s) alert(':( ERROR!!');
str_ += 'f+=\'' + str.substring(0, s) + '\';';
p = _.trim(str.substring(s+sl, e));
if(p.indexOf('=') !== 0){//js语句
str_ += p;
}else{//普通语句
str_ += 'f+=' + p.substring(1) + ';';
}
str = str.substring(e + el);
s = str.indexOf(_.TEMP_S);
}
str_ += 'f+=\'' + str + '\';';
str_ = str_.replace(/\n/g, '');//处理换行
var fs = str_ + 'return f;';
this.fun = Function(fs);
},
build : function(p){
return this.fun.call(p);
},
err : function(s){
alert(s);
},
trim : function(s){
return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,"");
}
};
return Temp;
}();
核心是将模板代码转变成了一个拼接字符串的function,每次拿数据call这个function。
因为主要是给手机(webkit)用的,所以没有考虑字符串拼接的效率问题,如果需要给IE实用,最好将字符串拼接方法改为Array.push()的形式。
发表评论
-
ES6 Array常用Api详解
2019-05-06 11:41 3631,Array.of Array.of方法用于将一组值, ... -
JavaScript基础
2019-03-23 21:23 01,数据类型 在JavaScri ... -
gulp
2019-03-21 10:25 0正则路径 https://blog.csdn.net/wi ... -
vue声明周期
2019-02-25 21:51 0vue -
Vue生命周期 VS React生命周期
2019-01-29 11:12 0Vue生命周: beforeCreate: c ... -
JavaScript 对象属性
2019-01-23 10:57 915JavaScript中的对象属性有两种: 一,数据 ... -
JavaScript闭包
2019-01-17 12:02 0要想真正理解闭包首先要先搞清楚作用域和作用域链。 1,作 ... -
常用收藏
2019-01-16 11:11 316参考链接 MongoDB用户权限管理 https:/ ... -
浏览器中进程与线程
2019-01-05 18:06 1174一,首先使用快捷键Shift+Esc打开浏览器Chrome任 ... -
Flex
2018-12-30 15:42 9122009年,W3C提出了一种新的布局方式:Flex布局。 ... -
linux下建立git仓库
2018-12-28 14:51 516参考文件 https://www.cnblogs.com/ ... -
Express中异常处理
2018-12-26 17:36 1243下面内容摘自网络文章,分析的很全面。 文章地址:http ... -
Express中如何使用async/await
2018-12-26 15:31 1206随着Node.js v7.6.0版本开 ... -
查看端口占用
2018-10-09 23:27 462参考:https://www.jianshu.com/p/ ... -
GIt部署到linux服务器
2018-09-30 12:01 905git一键部署代码到远程 ... -
JavaScript中常见继承方式
2018-09-14 18:16 530JavaScript作为弱类型语言,继承也是其强大的特性之 ... -
Node.js版本管理工具nvm
2018-09-09 10:52 562nvm是什么? nvm允许你在同一台机器上安装不同版 ... -
字符编码的发展历史
2018-09-08 09:52 0字符编码的发展历史 Unicode和UTF-8有何区别? ... -
nodejs-buffer
2018-09-07 18:13 0公所周知JavaScript语言不能处理二进制数据,但在服务 ... -
Git学习笔记
2018-09-04 18:07 350----------------------------- ...
相关推荐
比较简单,又小巧的js模板引擎,非常好用的。
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。 本资源包含了mustache.js 、mustache.min.js包 版本号v2.2.1
一段简单的JavaScript实现的前端模板引擎,可以实现简单的变量替代
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 标签:Mustache
Simple-Template(sTemplate),支持原生js脚本和HTML代码混排的简单/高效JS模板引擎
Javascript最简单的模板引擎
template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。特性:模版编译,渲染支持所有主流浏览器及Node...
Mustache是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手。
js模板引擎(基于数据方式,仿smarty),jQuery插件,有短标签,块标签,字段标签,简单易用
vegito:支持JavaScript表达式简单微模板引擎,只有463字节适用于Node.js和浏览器。
一个简单的js模板引擎 [removed][removed] [removed] <h1>{title} <% if (this.title) {%> <% for(var i = 0; i <li>{list[i]} <% } %> <% } else {%>...
腾讯的一款模板引擎,效率极佳,从此告别html字符串拼接,安全的数据渲染,自动防范xss攻击,只需简单引入即可
template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。https://github.com/aui/artTemplate 1、特性 ...
epii.js 不仅仅是一个模板引擎! 可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑定和处理,不依赖任何第三方库,仅仅8k,在native webapp开发 和 web开发,h5微网页上均可以使用, 不与其它框架冲突...
layer模板引擎的使用,带有详细注释,简单易上手,可用来入门,配合layer官网使用,效果更好
主要为大家介绍了Javascript模板引擎mustache.js,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,需要的朋友可以参考下
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 3. jSmart jSmart 是著名的 PHP 模板引擎 Smarty...
一个简单、快速、类似ejs的node . js的模板引擎
Trimpath JavaScript 是不个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎。 它有如下的特点: 1、采用标准的JavaScript编写,支持跨浏览器 2...
用于简单模板引擎 例子 < script id =" search " type =" text/template " > < input type = "text" data-bind = "search" data-action-input = "update" > < ! -- BEGIN result : loop -- > ...