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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
jquery自适应布局的简单实例
May 28 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
npm的lock机制解析
Jun 20 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 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
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
es6新特性之 class 基本用法解析
2018/05/05 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python操作Jira库常用方法解析
2020/04/10 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
技校教师求职简历的自我评价
2013/10/20 职场文书
护士辞职信模板
2014/01/20 职场文书
民族团结先进个人材料
2014/02/05 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
租赁协议书范本
2014/04/22 职场文书
个性婚礼策划方案
2014/05/17 职场文书
企业法人代表任命书
2014/06/06 职场文书
高效课堂标语
2014/06/26 职场文书
白银帝国观后感
2015/06/17 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers