<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. Masonry的一些等间距布局

    控件之间的间距相等,但是控件的宽度是不定的. 下列的代码:定义间距为10,yellowview的宽度是由redView的宽度计算出来的. UIView *redView = [[UIView allo ...

  2. Pthon修炼5

    函数    一.自定义函数 def:表示函数的关键字 函数名:函数的名称 函数体:函数中进行一系列的逻辑计算 参数:为函数体提供数据 返回值:执行完函数return 一个值 例:def count(x ...

  3. wxWidgets显示视频

    wxWidgets中似乎没有专门用于显示视频的控件(虽然有wxWidgets本身的openGL控件wxGLCANVAS,但是我没有去试--) 按照这篇文章所讲的,从wxPanel继承出一个DrawPa ...

  4. js调用函数时传入的参数个数与函数定义时的参数个数不符时的操作

    在js中函数没有重载的概念,如果声明了多个重名的函数,不管函数的形参个数是否一样,只有最有一个有效,其他的函数声明都是无效的.比如说声明了两个函数fn(),第一次声明时没有形参,第二次声明时形参有两个 ...

  5. python安装pip

    pip类似RedHat里面的yum,安装Python包非常方便.本节详细介绍pip的安装.以及使用方法. 1.pip下载安装 1.1 pip下载 # wget "https://pypi.p ...

  6. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  7. oracle 学习之DG的搭建

    1.配置过程 确认为归档模式 SQL> select log_mode from v$database; LOG_MODE ------------ ARCHIVELOG 配置归档日志存放路径( ...

  8. 关于STM32的IO口速率问题

    输入模式可以不用配置速度,但是输出模式必须确定最大输出频率.当STM32的GPIO端口设置为输出模式时,有三种速度可以选择:2MHz.10MHz和50MHz,这个速度是指I/O口驱动电路的速度,是用来 ...

  9. 在ashx处理程序中，如果返回json串数据？

    可以通过一下代码: using System.Collections.Generic;using System.Web.Script.Serialization; SortedDictionary&l ...

  10. OpenCV2.x自学笔记——最大类间方差法OTSU

    推荐用法:(参数勿动) threshold(gray,binary,0,255,CV_THRESH_OTSU+CV_THRESH_BINARY);