<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. jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法

    在网上找的ffSupp.js文件 /** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ ...

  2. redhat nginx 启动脚本

    #!/bin/sh # # nginx - this script starts and stops the nginx daemin # # chkconfig: - 85 15 # descrip ...

  3. Openlayer 3 最简单的弹出框

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

  4. 通过mvn archetype:generate创建Maven项目模板慢的问题

    通过mvn archetype:generate这种交互方式来创建Maven项目模板的时候,经常会长时间卡在Generating project in Interactive mode这一行提示(图1 ...

  5. GitHub常见错误解决办法

    如果輸入$ git remote add origin git@github.com:djqiang(github帳號名)/gitdemo(項目名).git 提示出錯信息:fatal: remote ...

  6. 关于c语言变量的内存分布测试程序

    #include <stdio.h> #include <stdlib.h> ; // 常全局变量 ; // 初始化全局变量 int uninit_global; // 未初始 ...

  7. CentOS7 安装 Mysql 服务

    我希望所有的软件包都用 rpm.yum 安装,这样卸载.升级.管理方便,可是自带的 yum 仓库里面没有 mysql-server 或者不是最新的,我需要安装MySQL官方的 yum 仓库, http ...

  8. 全球互联网技术大会GITC 2016 最炫酷技术盛宴

    2016年对于全球互联网产业来说,可谓是不折不扣的"创新爆发年",科技创新的更迭速度和多元化趋势都呈现出全所未见的增长态势.我们看到,云计算.大数据等在多年前萌发的技术创新正在快速 ...

  9. 认识<meta>

    概要:在查看网页源码的时候,经常发现有<meta>标签存在,于是查了一下它的作用,发现有很多功能.下面就简单的阐述一些常见的功能. 一[什么是<meta>标签] meta,即m ...

  10. linux deepin 12.12.1和Windows 7双系统修改默认启动项

    1.打开终端,输入 sudo gedit /etc/default/grub ,然后输入密码.2.在出来的文本编辑器中找到 GRUB_DEFAULT=0 一行,把0改为2(因为我的Windows 7在 ...