ejs v9 javascript模板系统


Posted in Javascript onMarch 21, 2012

本版本就是改回v6的形态,后端数据还是带@前端才方便查看与调试。昨天也与一TX前端工程师讨论过这个必要性。取得模板中的需要填写的变量,再与后端传过来的JSON进行比较,尽早进行数据验证。这种技术,可以看一看PHP的变量命名就知了,带是带$前缀。
在之前的版本中,如果输出语句带分号或逗号是会报错的

<script type="tmpl" id="table_tmpl"> 
<table> 
<& for(var i=0,tl = @trs.length,tr;i<tl;i++){ &> 
<& tr = @trs[i]; &> 
<tr> 
<td><&= tr.name; &></td> <td><&= tr.age; &></td> <td><&= tr.sex || "男" &></td> 
</tr> 
<& } &> 
</table> 
<&# 怎么可能不支持图片 &> 
<img src="<&= @href &>"> 
</script>

因为内部生成的字符串是这个样子的:
__views(data.tr.name;)
为了防止用户顺手把个逗号或分号上去,本版本自动帮你处理了.
rlastSemi = /[,;]\s*$/ 
// 略 
case "="://处理后台返回的变量(输出到页面的); 
logic = els[0].substring(1); 
if(logic.indexOf("@")!==-1){ 
temp.push( startOfHTML, logic.replace(rAt,"$1data.").replace(rlastSemi,''), endOfHTML ); 
}else{ 
temp.push( startOfHTML, logic.replace(rlastSemi,''), endOfHTML ); 
} 
break;

例子
下面是一个模板,放置于浏览器会忽略解析JS代码的script标签之内, 注意trs与href前面都带有@标识符。
<script type="tmpl" id="table_tmpl"> 
<table> 
<& for(var i=0,tl = @trs.length,tr;i<tl;i++){ &> 
<& tr = @trs[i]; &> 
<tr> 
<td><&= tr.name &></td> <td><&= tr.age &></td> <td><&= tr.sex || "男" &></td> 
<&# 导入子模板 &> 
<&= $.ejs("tds_tmpl"); &> 
</tr> 
<& } &> 
</table> 
<&# 怎么可能不支持图片 &> 
<img src="<&= @href &>"> 
</script> 
<!-- 这是子模板 --> 
<script type="tmpl" id="tds_tmpl"> 
<td>静态的表格</d> <td>静态的表格</d> <td>静态的表格</d> 
</script>

这是它的JS代码:
$.require("ready,more/ejs,node", function(){ 
var trs = [ 
{name:"隐形杀手",age:29,sex:"男"}, 
{name:"索拉",age:22,sex:"男"}, 
{name:"fesyo",age:23,sex:"女"}, 
{name:"恋妖壶",age:18,sex:"男"}, 
{name:"?崎",age:25,sex:"男"}, 
{name:"你不懂的",age:30,sex:"女"} 
] 
var html = $.ejs("table_tmpl",{ 
trs: trs, 
href: "https://3water.com//rubylouvre/202906/o_type4.jpg" 
}); 
$("#table_tc").html(html) 
});

ejs v9 javascript模板系统

ejs源代码

$.define("ejs", "lang",function(){ 
var 
_startOfHTML = "\t__views.push(", 
_endOfHTML = ");\n", 
sRight = "&>", 
rLeft = /\s*<&\s*/, 
rRight = /\s*&>\s*/, 
rAt = /(^|[^\w\u00c0-\uFFFF_])(@)(?=\w)/g, 
rLastSemi = /[,;]\s*$/ 
var ejs2 = $.ejs = function(id,data){ 
data = data || {}; 
if( !ejs2[id] ){ 
var rleft = rLeft, 
rright = rRight, 
sright = sRight, 
rlastSemi = rLastSemi, 
startOfHTML = _startOfHTML, 
endOfHTML = _endOfHTML, str , logic, 
el = document.getElementById(id); 
if (!el) throw "can not find the target element"; 
str = el.innerHTML; 
var arr = str.trim().split(rleft), 
buff = ["var __views = [];\n"],temp = [],i = 0,n = arr.length,els,segment; 
while(i < n){//逐行分析,以防歧义 
segment = arr[i++]; 
els = segment.split(rright); 
if( ~segment.indexOf(sright) ){//这里不使用els.length === 2是为了避开IE的split bug 
switch ( els[0].charAt(0) ) { 
case "="://处理后台返回的变量(输出到页面的); 
logic = els[0].substring(1); 
if(logic.indexOf("@")!==-1){ 
temp.push( startOfHTML, logic.replace(rAt,"$1data.").replace(rlastSemi,''), endOfHTML ); 
}else{ 
temp.push( startOfHTML, logic.replace(rlastSemi,''), endOfHTML ); 
} 
break; 
case "#"://处理注释 
break; 
default://处理逻辑 
logic = els[0]; 
if(logic.indexOf("@")!==-1){ 
temp.push( logic.replace(rAt,"$1data."), "\n" ); 
}else{ 
temp.push( logic, "\n" ); 
} 
} 
//处理静态HTML片断 
els[1] && temp.push(startOfHTML, $.quote( els[1] ), endOfHTML) 
}else{ 
//处理静态HTML片断 
temp.push(startOfHTML, $.quote( els[0] ), endOfHTML ); 
} 
} 
ejs2[id] = new Function("data",buff.concat(temp).join("")+';return __views.join("");'); 
return ejs2[id]( data ) 
} 
return ejs2[id]( data ) 
} 
}) 
// ejs v9!
Javascript 相关文章推荐
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
javascript的理解及经典案例分析
May 20 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 #Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 #Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 #Javascript
js对象关系图 方便dom操作
Mar 18 #Javascript
再谈javascript面向对象编程
Mar 18 #Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 #Javascript
Javascript 面向对象编程(coolshell)
Mar 18 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP面向对象分析设计的经验原则
2008/09/20 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Python-基础-入门 简介
2014/08/09 Python
python获取当前日期和时间的方法
2015/04/30 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python序列类型种类详解
2020/02/26 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
Python能做什么
2020/06/02 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
高一历史教学反思
2014/01/13 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
python基础之//、/与%的区别详解
2022/06/10 Python