I've had a little utility that I've been kicking around for some time now that I've found to be quite useful in my JavaScript application-building endeavors. It's a super-simple templating function that is fast, caches quickly, and is easy to use. I have a couple tricks that I use to make it real fun to mess with.
Here's the source code to the templating function (a more-refined version of this code will be in my upcoming book Secrets of the JavaScript Ninja ):
// John Resig - http://ejohn.org/ - MIT Licensed
( function ( ) {
var cache = { } ;
this .tmpl = function tmpl( str, data) {
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/ .test ( str) ?
cache[ str] = cache[ str] ||
tmpl( document.getElementById ( str) .innerHTML ) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function ( "obj" ,
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
str
.replace ( /[ \r\t\n] /g , " " )
.split ( "<%" ) .join ( "\t " )
.replace ( /( ( ^|%>) [ ^\t] *) '/g, "$1\r ")
.replace(/\t =(.*?)%>/g, "' ,$1 ,'")
.split("\t ").join("' ) ;")
.split(" %>").join(" p.push ( '")
.split("\r ").join("\\ ' ")
+ " ');}return p.join(' ');");
// Provide some basic currying to the user
return data ? fn( data ) : fn;
};
})();
You would use it against templates written like this (it doesn't have to be in this particular manner - but it's a style that I enjoy):
<div id ="<%=id%> " class="<%=(i % 2 == 1 ? " even" : " ")%> ">
<div class=" grid_1 alpha right">
<img class=" righted" src=" <%=profile_image_url%> "/>
</div>
<div class ="grid_6 omega contents" >
<p> <b> <a href ="/<%=from_user%> "><%=from_user%> </a> :</b> <%=text%> </p>
</div>
</div>
</script>
You can also inline script:
Quick tip: Embedding scripts in your page that have a unknown content-type (such is the case here - the browser doesn't know how to execute a text/html script) are simply ignored by the browser - and by search engines and screenreaders. It's a perfect cloaking device for sneaking templates into your page. I like to use this technique for quick-and-dirty cases where I just need a little template or two on the page and want something light and fast.
and you would use it from script like so:
results.innerHTML = tmpl( "item_tmpl" , dataObject) ;
You could pre-compile the results for later use. If you call the templating function with only an ID (or a template code) then it'll return a pre-compiled function that you can execute later:
for ( var i = 0 ; i < users.length ; i++ ) {
html += show_user( users[ i] ) ;
}
相关推荐
史上最短小精悍的javascript编写的俄罗斯方块游戏,只用了60行代码,绝对值得学习
史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码
JavaScript短小精悍,运行在客户机上,提高了网页的浏览速度和交互能力。 二、JavaScript的基本应用 JavaScript在网页中的使用非常简单,有两种方法: 1. 在网页代码中添加“<script language="JavaScript">”...
这款引擎以其独特的命名——“柯基引擎”,寓意着它像柯基犬一样短小精悍、动力十足。 在游戏开发领域,2D和2.5D是两种常见的视觉表现形式。2D游戏以平面图像展示,通常包括传统的横向卷轴或纵向滚动的关卡设计。而...
Tomjson,一个"短小精悍"的 json 解析库,tomjson使用Java语言编写,主要作用是把Java对象(JavaBean)序列化为json格式字符串,将json格式字符串序列化为相对应的Java对象(JavaBean)。项目地址:...
总之,"屏幕拾色器 短小精悍"不仅满足了用户对小巧、便携的需求,还在实际编程和设计工作中发挥着重要作用。无论是进行HTML布局、jQuery特效、JavaScript交互还是PHP后台处理,这款工具都能帮助开发者轻松实现色彩...
### 知识点一:构建圣诞树图案 在C/C++编程中,通过简单的循环结构可以实现各种图案的打印,本例中展示了一个利用嵌套循环打印圣诞树图案的示例。 #### 代码分析: ```cpp #include using namespace std;...
支持复制到剪贴板或直接打印, 可以为用户节省大量不贵的时间和繁琐的操作,是一个检索、转换复杂数据并将其转换为其他格式的方法,想知道数据提取软件有哪些吗,威航软件园推荐大家试试短小精悍的Text Template ...
6. **函数长度**:保持函数短小精悍。过长的函数难以理解和测试,应尽量将大函数拆分为小函数。 7. **注释**:虽然好的代码应该是自解释的,但适当的注释有助于理解复杂逻辑。注释应简洁明了,避免无用和过时的注释...
在这个"简单FTP功能软件 绿色短小精悍版"中,我们主要关注的是一个轻量级、便携式的FTP服务器软件,它提供了基本的FTP服务,便于用户上传、下载文件。 FTP服务器是实现FTP服务的核心组件,它接收来自客户端的连接...
本书是XMPP高级编程:使用JavaScript和jQuery书籍的英文版。如果你不想敲代码的话可以下载该资料。xmpp协议扩展易用,就是协议体用于通信的时候没有protocolBuffer短小精悍,但个人认为xmpp的应用空间较大,可转为 ...
- 方法应保持短小精悍,一个方法只做一件事。 遵循这些代码格式模板规则,可以提升代码质量,减少错误,增强团队合作。对于华为的Java程序员来说,这是一份非常实用的指导文档,有助于保持代码的一致性和专业性。
STL,全称为Standard Template Library(标准模板库),是C++编程语言中不可或缺的一部分,它包含了一组高效、灵活的容器、迭代器、算法和函数对象。这份名为“短小精悍的STL资料”显然是为初学者设计的,旨在以简洁...
【ASP.NET短小精悍Ajax留言本(无广告)】是一个基于ASP.NET技术构建的Web应用程序,它利用Ajax(Asynchronous JavaScript and XML)技术实现了页面的动态无刷新更新,为用户提供流畅、高效的交互体验。这个留言本...
避免编写过长的函数,保持函数短小精悍,这有助于提高代码可读性和测试性。 3. 注释与文档:良好的注释可以帮助其他开发者理解你的代码。JSDoc是一种标准格式,用于为函数、类等添加结构化注释,方便自动生成API...
"短小精悍的MPEG转换工具"正是这样一款专为处理MPEG格式而设计的应用程序,它的特点在于体积小巧,但功能强大,转换效率高。下面将详细探讨MPEG格式、视频转换的原理以及这款工具的优势。 MPEG(Moving Picture ...
"短小精悍 FTP服务器软件 免安装" 指的是一款轻量级、无需复杂安装过程的FTP服务器应用程序,它简化了FTP服务器的配置和管理,使得用户能够快速地在自己的计算机上搭建一个FTP服务。 FTP服务器软件的核心功能是提供...
在JavaScript的世界里,跨域(Cross-Origin)是一个常见的问题,特别是在AJAX请求中。由于同源策略的限制,浏览器不允许JavaScript脚本从一个域名访问另一个域名的数据,这为跨域数据交互带来了挑战。JSONP(JSON ...
"非常短小精悍"的录音软件通常意味着它体积小巧,但功能强大,易于使用,且资源占用少,能快速启动并高效运行。下面将详细探讨这类软件的特点、功能以及如何利用它们来满足个性化需求。 首先,这样的录音软件往往...