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实现预览待上传的本地图片
Mar 15 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
利用javascript查看html源文件
2006/11/08 Javascript
关于js类的定义
2011/06/28 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
如何查找和删除数据库中的重复数据
2014/11/05 面试题
北大青鸟学生求职信
2013/09/24 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
《颐和园》教学反思
2014/02/26 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
速龙x4-860k处理器相当于i几
2022/04/20 数码科技