当前位置: 首页 > news >正文

(TipsTricks)用客户端模板精简JavaScript代码

出处:http://www.cnblogs.com/osamede/archive/2009/06/11/1501474.html

假设你在做一个AJAX-oriented 项目,使用JavaScript访问服务器 ,获取Json 对象,然后操作DOM,将它们显示出来。如果遇到一些复杂的页面,需要获取和展示大量的JSON对象,那该如何处理?为每一个对象单独写一段JavaScript代码创建相应的HTML?那样的话随着JavaScript代码越来越多,页面会变的越来越复杂,而且你不得不通过修改JavaScript代码来改变HTML样式。

使用客户端模可以解决这个问题。你可以先用HTML定义一个模板,然后绑定JSON对象上去。这样你可以任意改变最终生成的HTML,而不用修改JavaScript

John Resig’s Microtemplating engine

John ResigJQuery的设计者,曾经在他的博客上发布过一个特别微型,但是很强大的的JS模板引擎,仅仅只有20行……。好吧,我承认看不大懂,但是它真的很强。

这段代码将一个模板解析成一段JavaScript 代码,然后运行。模板的语法类似于ASP,<%= expression %> <% codeblock %>嵌入代码。你可以嵌入任意的JavaScript代码,而不是仅仅几个命令。

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->var_tmplCache={}
this.parseTemplate=function(str,data){
varerr="";
try{
varfunc=_tmplCache[str];
if(!func){
varstrFunc=
"varp=[],print=function(){p.push.apply(p,arguments);};"+
"with(obj){p.push('"+
str.replace(
/[\r\t\n]/g,"")
.replace(
/'(?=[^#]*#>)/g,"\t")
.split(
"'").join("\\'")
.split(
"\t").join("'")
.replace(
/<#=(.+?)#>/g,"',$1,'")
.split(
"<#").join("');")
.split(
"#>").join("p.push('")
+"');}returnp.join('');";
func
=newFunction("obj",strFunc);
_tmplCache[str]
=func;
}
returnfunc(data);
}
catch(e){err=e.message;}
return"<#ERROR:"+err.htmlEncode()+"#>";
}

一个简单的实例

这个例子将一个Json对象Customers,解析成表格。

模板

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scriptid="ItemTemplate"type="text/html">
<tableborder="2px">
<#for(vari=0;i<Customers.length;i++){#>
<tr>
<td><#=Customers[i].name#></td>
<td><#=Customers[i].address.street#></td>
<td><#=Customers[i].address.city#></td>
</tr>
<#}#>
</table>
</script>

代码

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 content.innerHTML=parseTemplate($("#ItemTemplate").html(),{Customers:[
2 {name:"张三",address:{street:"朝阳路",city:"北京"}},
3 {name:"张三子",address:{street:"玄武路",city:"北京"}},
4 {name:"李四",address:{street:"莫干山路",city:"杭州"}},
5 {name:"李四子",address:{street:"武陵门路",city:"杭州"}}]
6
7 }
8
9
10
11 );
12

相关链接

John Resig posted a tiny little templating engine

Minimize Code by Using jQuery and Data Templates ----Dan Wahlin

Client Templating with jQuery----Rick Strahl

相关文章:

  • eclipse 生成发布的apk (signed zipalign过程)
  • 使用黄金分割比值计算斐波那契数列
  • 遭遇飞信“中奖” 之 图文全攻略
  • Swift 3 实现拍照功能
  • 我们欠了地球什么?
  • Iphone 消息通知(APNS)的3种方式 -- C# 和 nodejs
  • 创建Azure Function
  • 金旭亮博客之“桌面应用程序开发技术”资源主页
  • Javascript MV framework 对比
  • 基于LWUIT实现全局按键控制(快捷键)
  • azure 架构选择
  • Swift 3 点击屏幕任意位置隐藏键盘
  • 成为优秀的程序员真不简单
  • Swift 保存pdf并在webview显示
  • jQuery:收集一些基于jQuery框架开发的控件/jquery插件。(1)
  • [LeetCode] Wiggle Sort
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • EventListener原理
  • java中具有继承关系的类及其对象初始化顺序
  • MySQL几个简单SQL的优化
  • React16时代,该用什么姿势写 React ?
  • vue--为什么data属性必须是一个函数
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 从setTimeout-setInterval看JS线程
  • 缓存与缓冲
  • 基于Mobx的多页面小程序的全局共享状态管理实践
  • 记一次和乔布斯合作最难忘的经历
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 个项目)
  • 前言-如何学习区块链
  • 用Python写一份独特的元宵节祝福
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • 好程序员web前端教程分享CSS不同元素margin的计算 ...
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • #Linux(make工具和makefile文件以及makefile语法)
  • #单片机(TB6600驱动42步进电机)
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • (Redis使用系列) Springboot 实现Redis消息的订阅与分布 四
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (二)springcloud实战之config配置中心
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (全注解开发)学习Spring-MVC的第三天
  • (转)Android学习笔记 --- android任务栈和启动模式
  • (转)socket Aio demo
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • .NET 分布式技术比较
  • .NET 简介:跨平台、开源、高性能的开发平台
  • .net 开发怎么实现前后端分离_前后端分离:分离式开发和一体式发布
  • .net/c# memcached 获取所有缓存键(keys)
  • /etc/apt/sources.list 和 /etc/apt/sources.list.d
  • [20170728]oracle保留字.txt
  • [CodeForces-759D]Bacterial Melee
  • [ComfyUI进阶教程] animatediff视频提示词书写要点
  • [Deepin 15] 编译安装 MySQL-5.6.35