`

短小精捍的 javascript template engine

阅读更多

JavaScript Micro-Templating

 

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 ):


// Simple JavaScript Templating
// 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):

 

<script type ="text/html" id ="item_tmpl" >
  <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:


<script type ="text/html" id ="user_tmpl" >
  <% for ( var i = 0 ; i < users.length; i++ ) { %>
    <li> <a href ="<%=users[i].url%> "><%=users[i].name%> </a> </li>
  <% } %>
</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:


var results = document.getElementById ( "results" ) ;
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:


var show_user = tmpl( "item_tmpl" ) , html = "" ;
for ( var i = 0 ; i < users.length ; i++ ) {
  html += show_user( users[ i] ) ;
}

 

 

分享到:
评论

相关推荐

    史上最短小精悍的javascript编写的俄罗斯方块游戏

    史上最短小精悍的javascript编写的俄罗斯方块游戏,只用了60行代码,绝对值得学习

    最短的javascript编写俄罗斯方块仅仅60行代码

    史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

    JavaScript在网页美化中的基本应用.pdf

    JavaScript短小精悍,运行在客户机上,提高了网页的浏览速度和交互能力。 二、JavaScript的基本应用 JavaScript在网页中的使用非常简单,有两种方法: 1. 在网页代码中添加“&lt;script language="JavaScript"&gt;”...

    Corgi Engine - 2D 2.5D Platformer 4.2版柯基引擎横版2D游戏

    这款引擎以其独特的命名——“柯基引擎”,寓意着它像柯基犬一样短小精悍、动力十足。 在游戏开发领域,2D和2.5D是两种常见的视觉表现形式。2D游戏以平面图像展示,通常包括传统的横向卷轴或纵向滚动的关卡设计。而...

    一个"短小精悍"的 json 解析库Tomjson.zip

    Tomjson,一个"短小精悍"的 json 解析库,tomjson使用Java语言编写,主要作用是把Java对象(JavaBean)序列化为json格式字符串,将json格式字符串序列化为相对应的Java对象(JavaBean)。项目地址:...

    屏幕拾色器 短小精悍

    总之,"屏幕拾色器 短小精悍"不仅满足了用户对小巧、便携的需求,还在实际编程和设计工作中发挥着重要作用。无论是进行HTML布局、jQuery特效、JavaScript交互还是PHP后台处理,这款工具都能帮助开发者轻松实现色彩...

    程序精灵——短小精悍的实用代码

    ### 知识点一:构建圣诞树图案 在C/C++编程中,通过简单的循环结构可以实现各种图案的打印,本例中展示了一个利用嵌套循环打印圣诞树图案的示例。 #### 代码分析: ```cpp #include using namespace std;...

    Text Template Parser(多源数据提取软件)官方正式版V2.5 | 数据提取软件有哪些?

    支持复制到剪贴板或直接打印, 可以为用户节省大量不贵的时间和繁琐的操作,是一个检索、转换复杂数据并将其转换为其他格式的方法,想知道数据提取软件有哪些吗,威航软件园推荐大家试试短小精悍的Text Template ...

    适用于JavaScript的Clean Code概念.zip

    6. **函数长度**:保持函数短小精悍。过长的函数难以理解和测试,应尽量将大函数拆分为小函数。 7. **注释**:虽然好的代码应该是自解释的,但适当的注释有助于理解复杂逻辑。注释应简洁明了,避免无用和过时的注释...

    简单FTP功能软件 绿色短小精悍版

    在这个"简单FTP功能软件 绿色短小精悍版"中,我们主要关注的是一个轻量级、便携式的FTP服务器软件,它提供了基本的FTP服务,便于用户上传、下载文件。 FTP服务器是实现FTP服务的核心组件,它接收来自客户端的连接...

    XMPP高级编程:使用JavaScript和jQuery

    本书是XMPP高级编程:使用JavaScript和jQuery书籍的英文版。如果你不想敲代码的话可以下载该资料。xmpp协议扩展易用,就是协议体用于通信的时候没有protocolBuffer短小精悍,但个人认为xmpp的应用空间较大,可转为 ...

    code format template

    - 方法应保持短小精悍,一个方法只做一件事。 遵循这些代码格式模板规则,可以提升代码质量,减少错误,增强团队合作。对于华为的Java程序员来说,这是一份非常实用的指导文档,有助于保持代码的一致性和专业性。

    短小精悍的STL资料

    STL,全称为Standard Template Library(标准模板库),是C++编程语言中不可或缺的一部分,它包含了一组高效、灵活的容器、迭代器、算法和函数对象。这份名为“短小精悍的STL资料”显然是为初学者设计的,旨在以简洁...

    ASP.NET短小精悍Ajax留言本(无广告)

    【ASP.NET短小精悍Ajax留言本(无广告)】是一个基于ASP.NET技术构建的Web应用程序,它利用Ajax(Asynchronous JavaScript and XML)技术实现了页面的动态无刷新更新,为用户提供流畅、高效的交互体验。这个留言本...

    清洁代码Javascript

    避免编写过长的函数,保持函数短小精悍,这有助于提高代码可读性和测试性。 3. 注释与文档:良好的注释可以帮助其他开发者理解你的代码。JSDoc是一种标准格式,用于为函数、类等添加结构化注释,方便自动生成API...

    短小精悍的MPEG转换工具

    "短小精悍的MPEG转换工具"正是这样一款专为处理MPEG格式而设计的应用程序,它的特点在于体积小巧,但功能强大,转换效率高。下面将详细探讨MPEG格式、视频转换的原理以及这款工具的优势。 MPEG(Moving Picture ...

    短小精悍 ftp服务器软件 免安装

    "短小精悍 FTP服务器软件 免安装" 指的是一款轻量级、无需复杂安装过程的FTP服务器应用程序,它简化了FTP服务器的配置和管理,使得用户能够快速地在自己的计算机上搭建一个FTP服务。 FTP服务器软件的核心功能是提供...

    原生ajax库实现jsonp跨域短小精悍

    在JavaScript的世界里,跨域(Cross-Origin)是一个常见的问题,特别是在AJAX请求中。由于同源策略的限制,浏览器不允许JavaScript脚本从一个域名访问另一个域名的数据,这为跨域数据交互带来了挑战。JSONP(JSON ...

    录音软件 非常短小精悍

    "非常短小精悍"的录音软件通常意味着它体积小巧,但功能强大,易于使用,且资源占用少,能快速启动并高效运行。下面将详细探讨这类软件的特点、功能以及如何利用它们来满足个性化需求。 首先,这样的录音软件往往...

Global site tag (gtag.js) - Google Analytics