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 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
Javascript String.replace的妙用
Sep 08 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
js实现省级联动(数据结构优化)
Jul 17 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
来自qq的javascript面试题
2010/07/24 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
JS实现简易计算器
2020/02/14 Javascript
Python将多个list合并为1个list的方法
2018/06/27 Python
python实现二维数组的对角线遍历
2019/03/02 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
专业实习自我鉴定
2013/10/29 职场文书
银行会计财务工作个人的自我评价
2013/10/29 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
临床专业自荐信
2014/06/22 职场文书
垃圾桶标语
2014/06/24 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
先进党支部事迹材料
2014/12/24 职场文书
保外就医申请书范文
2015/08/06 职场文书