<script type="text/javascript">

 function test(){

  //你的方法

 }

 </script>

如上代码：通常我们见到的是以<script type="text/javascript"></script>开始/结束的一串javascript代码，并且，type="text/jacascript"。

有朋友可能见到过 以<script type="text/html"></script>开始/结束的一串javascript代码，并且，type="text/html" 这样的js代码，是不是写错了？

真的写错了么？答案是否定的。实际上以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法，在实际项目中，我们非常有用，那么下面我举几个例子，让你对javascript模板渲染有一个更深刻的认识：

编写模板

使用一个type="text/html"的script标签存放模板，html如下：

 <script id="test" type="text/html">

 <h1><%=title%></h1>

 <ul>

 <%for(i = 0; i < list.length; i ++) {%>

 <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>

 <%}%>

 </ul>

 </script>

 <div id="content"></div>

模板逻辑语法开始与结束的界定符号为<% 与%>，若<%后面紧跟=号则输出变量内容。

渲染模板

 <script type="text/javascript" src="../js/template.js"></script>

 //引入template.js

 <script type="text/javascript">

 var data = {

     title: '标签',

     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

 };

 var html = template.render('test', data);

 document.getElementById('content').innerHTML = html;

 </script>

好了，一个javascript模板渲染使用成功了。

下面看一个完整的实例：

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>include demo</title>

     <script src="template.js"></script>

 </head>

 <body>

 <div id="content"></div>

 <script id="customTag" type="text/html">

     <h1><!--[= header]--></h1>

     <ul>

         <!--[for(var i=0; i<tag.length; i++){]-->

             <li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></li>

         <!--[}]-->

     </ul>

 </script>

 <script>

     template.openTag = '<!--[';

     template.closeTag = ']-->';

     var listdata = {

         header : 'your study list',

         tag : ['算法导论','linq','c#','jquery','django','python']

     };

     var resulthtml = template.render ('customTag', listdata);

     document.getElementById('tagcontent').innerHTML = resulthtml;

     //

 </script>

 </body>

 </html>

有兴趣的朋友测试一下吧，这个用法还是挺高大上的，比如在一些用Ajax响应的页面，这种用法比较广泛。

javascript模板引擎template.render使用的更多相关文章

  1. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  2. javascript模板引擎template.js使用

    到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...

  3. 如何选择Javascript模板引擎（javascript template engine)？

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  4. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  5. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  6. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  7. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

  8. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  9. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

随机推荐

  1. 阅读国外大神对this的分析，自己的总结

    大神的分析地址:http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/#comment- ...

  2. 寒假学干货之------android开发环境

    1.下载安装jdk(http://www.oracle.com/technetwork/java/javase/downloads/index.html)装se版的就可以了,复制jdk目录路径,之后配 ...

  3. 误删除libc.so.6的解决方法

     误删除libc.so.6的解决方法   原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://63638790.blog.51cto. ...

  4. Hive中频繁报警的问题

    在使用Hive的过程中,是不是会在shell中报一堆警告,虽然说不影响正常使用,但是看着很烦人,而且指不定会影响数据的准确性和运行的稳定性. 警告的内容如下: Tue Aug :: CST WARN: ...

  5. dropdown-toggle 的点击禁用

    <div class="dropdown select-dropdown" id="choiceTagdiv"> <a class=" ...

  6. Java线程池主线程等待子线程执行完成

    今天讨论一个入门级的话题, 不然没东西更新对不起空间和域名~~ 工作总往往会遇到异步去执行某段逻辑, 然后先处理其他事情, 处理完后再把那段逻辑的处理结果进行汇总的产景, 这时候就需要使用线程了. 一 ...

  7. HTTP Basic Authentication认证的各种语言 后台用的

    访问需要HTTP Basic Authentication认证的资源的各种语言的实现 无聊想调用下嘀咕的api的时候,发现需要HTTP Basic Authentication,就看了下. 什么是HT ...

  8. IE6/IE7浏览器中"float: right"自动换行的解决方法

    在项目中,调试IE6/IE7,发现一个bug,那就是:在同一个div包裹着,几个块级元素并列为一行的情况下,设置了float:right的块级元素会自动换行: 代码如下: <p> < ...

  9. C/C++的静态库与动态库

    C/C++编程中相关文件后缀(以Linux系统下为例): .a:           静态库(archive) .c/.cpp:  C/C++源程序 .h/.hpp: C/C++源程序的头文件 .i: ...

  10. asp.net学习视频资料地址链接

    ASP.NET开发学习视频教程大全(共800集) http://felix520wj.blog.51cto.com/7129746/1548458 http://study.163.com/cours ...