<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. 函数:atexit

    函数说明: 1.原型:int atexit (void (*func)(void)); 2.功能:注册退出main函数之后将要被执行的函数: 3.参考:http://www.cplusplus.com ...

  2. SQL 小笔记

    如何得到字段的类型 select sql_variant_property(ID,'BaseType') from tb

  3. linux和windows双系统时间错误解决方法

    转自http://www.2cto.com/os/201204/126212.html windows时间会慢8小时,原因: 两个概念: UTC即Universal Time Coordinated, ...

  4. HDU-1757--A Simple Math Problem（矩阵乘法）

    Problem Description Lele now is thinking about a simple function f(x).If x < 10 f(x) = x.If x > ...

  5. this笔记

    在js中,如果this在全局变量和函数中this指window,在在对象中至所挂载的这个对象.

  6. hadoop 完全分布式

    转自:http://blog.itpub.net/26613085/viewspace-1219710/ 1.JDK安装和SSH互信(略过) 2.各节点IP和hostname如下(各节点需配置) [h ...

  7. c# windows服务 一个项目安装多个服务

    创建windows服务就不讲解了,其它大神写太多了.这里只写一个项目安装多个服务的教程.如:http://www.cnblogs.com/zzgblog/p/4595839.html 首先按下图创建多 ...

  8. html中的js监听付款按钮--触发ajax调用php后台--得到的json数据---交给安卓原生处理

    //01 var pay_status = new Object();$(".sure_pay").on("touchstart",function(){ va ...

  9. OpenGL多视口

    #include <gl/glew.h> #include <gl/freeglut.h> #include <iostream> ; ; float rtri = ...

  10. json 和 数组的区别

    json是javascript中的一种数据格式,类似于数组,但又不同于数组,区别在于下标: 例如,var obj=[a:15,b:10,c:3,d:8]: //这是json的写法 var  arr=[ ...