的模板系统升一下级, 继续在新公司里面用。 现在几在互联网公司没有不用javascript模板了, 什么TX, 百度, 新浪, 360什么的, 最后瀑布流的流行, 里面又有许多用到模板。
本版本就是改回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 >
|
因为内部生成的字符串是这个样子的:
为了防止用户顺手把个逗号或分号上去,本版本自动帮你处理了.
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: "http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_type4.jpg"
});
$( "#table_tc" ).html(html)
});
|
隐形杀手 |
29 |
男 |
静态的表格 |
静态的表格 |
静态的表格 |
索拉 |
22 |
男 |
静态的表格 |
静态的表格 |
静态的表格 |
fesyo |
23 |
女 |
静态的表格 |
静态的表格 |
静态的表格 |
恋妖壶 |
18 |
男 |
静态的表格 |
静态的表格 |
静态的表格 |
竜崎 |
25 |
男 |
静态的表格 |
静态的表格 |
静态的表格 |
你不懂的 |
30 |
女 |
静态的表格 |
静态的表格 |
静态的表格 |
分享到:
相关推荐
我的模板系统升一下级, 继续在新公司里面用。 现在几在互联网公司没有不用javascript模板了, 什么TX, 百度, 新浪, 360什么的, 最后瀑布流的流行, 里面又有许多用到模板
EJS - 嵌入的JavaScript模板
主要介绍了Node.js项目中调用JavaScript的EJS模板库的方法,通过EJS模板引擎可以制作出维护性良好的HTML代码结构,需要的朋友可以参考下
Node.js项目中调用JavaScript的EJS模板库的方法_.docx
很好用的javascript模板工具,可以在页面内自定义模板,也可以将整个模板存成单独的文件,语法也与js几乎一致,十分方便
express ejs模板引擎
ECT是一个新兴的JavaScript模板引擎,主要致力于性能表现。 ECT开发者称,与其他引擎(如Dust、Hogan.js、Fest、Handlebars.js、doT、Swig、Eco、EJS、CoffeeKup和Jade等)相比,ECT目前是最快的,见基准测试。你...
嵌入式JavaScript模板。 注意:EJS版本2对此版本进行了一些重大更改(特别是删除了过滤器功能)。 v2的工作在这里进行: : EJS v2的文件问题在这里: : 安装 $ npm install ejs 特征 符合 View系统 中间...
ejs是Node世界的开源模板引擎中比较有人气的一个,而且并不只是在Express框架中才可以使用,今天为大家带来Node.js的Web模板引擎ejs的入门学习教程,其中侧重于ejs的layout页面布局放面
Node 开源模板的选择很多,但有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 输出变量%>(另外 输出变量是不会对 & 等符号进行...
%> ) 包括客户端支持中间JavaScript的静态缓存模板的静态缓存符合 View系统例子<% if (user) { % > < h2>< %= user . name % >< / h2 >< % } %> 可以通过以下在线尝试EJS: : 。基本用法let ...
嵌入式JavaScript模板安装$ npm install ejs功能带有<%%>的转义输出,具有<%=%>(可配置转义功能)带有&lt的未转义原始输出嵌入式JavaScript模板安装$ npm install ejs功能具有带有(escaped输出的转义...
项目共包含76个文件,其中JavaScript源代码文件js 45个,HTML页面文件html 4个,CSS样式文件css 4个,JPG图片文件4个,EJS模板文件ejs 3个,项目备份文件bak 2个,PNG图片文件2个,Git忽略配置文件gitignore 1个,...
<%= EJS%>嵌入式JavaScript模板。 EJS是一种简单的建模语言,可让您使用简单JavaScript生成HTML标记。 没有关于如何组织事物的宗教信仰。 无需重新设计迭代和控制流程。 它只是JavaScript。
这是一个使用ejs模板引擎以Java编写的Node编写的测试Google身份验证应用程序
使用express + MongoDB + ejs模板引擎实现的简易博客系统.zip
一个简单、快速、类似ejs的node . js的模板引擎