<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. QT LNK2019 无法解析的外部符号

    Qt新手,编译时遇到上述问题,但检查代码没有问题,代码很简单. 最后在网上搜到是因为用了新建类向导,导致moc文件没有更新,但是重新构建,清理构建还是不行,最后将代码目录下所有的编译的文件全部删除才暂 ...

  2. Openlayer 3 最简单的弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Nohttp框架在Android Studio中的使用

    1.添加noHttp的使用权限 <!-- 读写 sd 卡 --> <uses-permission android:name="android.permission.REA ...

  4. 精简CSS

    1.简化你的注释 2.简化颜色代码 3.使用单行属性代替多行属性 4.值为0时可省略单位 5.同时设置多个元素的属性用分组形式 6.删除空白和换行 7.设定过期时间

  5. C#中ref和out的区别浅析

    这篇文章主要介绍了C#中ref和out的区别浅析,当一个方法需要返回多个值的时候,就需要用到ref和out,那么这两个方法区别在哪儿呢,需要的朋友可以参考下   在C#中通过使用方法来获取返回值时,通 ...

  6. HomeBrew 安装 PHP7.1（开发笔记）

    HomeBrew 安装 PHP7.1 $ brew update $ brew tap homebrew/dupes $ brew tap homebrew/php $ brew update $ b ...

  7. SolrCloud今日大纲

    SolrCloud今日大纲(了解) ●    分布式集群系统基本概念 ●    SolrCloud入门 ●    SolrCloud搭建 ******************************* ...

  8. LINUX nfs服务

    1.什么是NFS(Network FileSystem)  NFS 就是 Network FileSystem 的缩写,最早之前是由 Sun 所发展出来的.他最大的功能就是可以透过网络,让不同的机器. ...

  9. 去掉svn与文件之间 的关联

    今天在检出文件的时候,没注意检出目录 ,居然直接检出到D盘里了.然后就看到D盘上有个大大的绿勾,看起来很不舒服,想去掉. 自己看看小乌龟里好像没这功能,于是百度,一大堆都是要改和注册相关的东西,照着做 ...

  10. 利用PYTHON设计计算器功能

    通过利用PYTHON 设计处理计算器的功能如: 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 ))- (-4*3 ...