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 避免闭包引发的问题
Mar 17 Javascript
Javascript 解疑
Nov 11 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
微信小程序block的使用教程
Apr 01 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
使用js和canvas实现时钟效果
Sep 08 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python下Fabric的简单部署方法
2015/07/14 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Python变量访问权限控制详解
2019/06/29 Python
django Admin文档生成器使用详解
2019/07/22 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
python 制作简单的音乐播放器
2020/11/25 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
自荐信需注意事项
2014/01/25 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
教务处教学工作总结
2015/08/10 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
Web应用开发TypeScript使用详解
2022/05/25 Javascript
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server