mustache.js是一个模板引擎，为开发节省了大量的“人力”，对于初学者，我是从这篇 和这篇 博客接触的，算是对mustache有了初步认识，不得不承认自己还是菜鸟阶段还有太多东西要学，慢慢熟悉。

在初步了解mustache后，我仿照公司使用的技巧写了一个demo：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<script type="text/javascript" src="C:\Users\Administrator\Desktop\mustache.js"> </script>

<script id="emacleTempl" class="mustache-template" type="text/template">

        <h1>标题：[[title]]</h1>

        <p>下面是我的个人信息:</p>

        <h2>姓名：[[name]]</h2>

        <h2>年龄：[[age]]</h2>

        <h2>身高：[[height]]</h2>

        <h2>学校：[[school]]</h2>

        <h3>工作：[[#job]] [[.]] [[/job]]</h3>

        <h3>地址：[[#addres]]<p>城市：[[city]]<p>科室：[[zip]]<p>[[/addres]]</h3>

        [[#edu]]

            教育信息：我的学校是：[[school]] !!

        [[/edu]]

</script>

</head>

<body>

    <div id="d2"></div>

</body>

<script type="text/javascript">

var tem=document.getElementById("emacleTempl").innerHTML;

var d2=document.getElementById("d2");

var data={

    title:"个人资料",

    name:"jim",

    age:20,

    height:180,

    school:"辽宁工程技术大学大学",

    addres:{

        city:"北京",

        atate:"朝阳",

        zip:512

    },

    job:["java","js","css","html","ps"],

    edu:true //true时加载，flase时不加载

};

var html = Mustache.render(tem,data); //渲染数据

d2.innerHTML=html; //把渲染结果插入空div中，显示

</script>

</html>

在demo里有几个关键点这里需要声明一下，第一就是代码中的第二个<script>标签，重点是它的type="text/template" 而不是“text/javascript”,没错就是让他不能正常识别为js代码，因为它内部本身就不是js，识别了反而会报错。它存放的是渲染模板，本打算单独成一个html文件的，但不利于查看，就写在一起了，我司的模板都是一个个html文件，文件里就一个<script type="text/template">标签。也就是说，网页是从模板中选择性加载的，怎样选择呢？那就是底部的js代码控制的，先看模板吧：

<script id="emacleTempl" class="mustache-template" type="text/template">

        <h1>标题：[[title]]</h1>

        <p>下面是我的个人信息:</p>

        <h2>姓名：[[name]]</h2>

        <h2>年龄：[[age]]</h2>

        <h2>身高：[[height]]</h2>

        <h2>学校：[[school]]</h2>

        <h3>工作：[[#job]] [[.]] [[/job]]</h3>

        <h3>地址：[[#addres]]<p>城市：[[city]]<p>科室：[[zip]]<p>[[/addres]]</h3>

        [[#edu]]

            教育信息：我的学校是：[[school]] !!

        [[/edu]]

</script>

最后一个[[#edu]]为true时加载，flase时不加载，这就是所谓的选择性加载，下面看看控制加载的js代码吧：

<script type="text/javascript">

var tem=document.getElementById("emacleTempl").innerHTML;

var d2=document.getElementById("d2");

var data={

    title:"个人资料",

    name:"jim",

    age:20,

    height:180,

    school:"辽宁工程技术大学大学",

    addres:{

        city:"北京",

        atate:"朝阳",

        zip:512

    },

    job:["java","js","css","html","ps"],

    edu:true //true时加载，flase时不加载

};

var html = Mustache.render(tem,data); //渲染数据

d2.innerHTML=html; //把渲染结果插入空div中，显示

</script>

js代码定义了data，里面存着渲染信息，最后通过Mustache.render(tem,data)渲染，并把渲染的结果作为innerHTML插入到指定标签中，这样就实现了选择性加载，如果要更改数据只需更改data就行，基本原理就是这样，当然实际情况要比这复杂。一个模板成千上万行代码也是很常见的。同志仍需努力！

mustache模板渲染的基本原理的更多相关文章

  1. mustache模板技术

    一.简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hog ...

  2. JS模板引擎-Mustache模板引擎使用实例1-表格树

    1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...

  3. 【nodejs笔记3】Express基本用法，和路由控制，和模板渲染ejs

    1. 路由控制的工作原理 //routes/index.js中的代码//访问主页时,调用ejs模板引擎,渲染index.ejs模板文件,生成静态页面,并显示在浏览器中.router.get('/', ...

  4. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  5. Flask -- 静态文件 和 模板渲染

    静态文件 一般用于存放图片,样式文件(css, js等) 保存位置:包中或者文件所在目录创建一个 static 目录 访问:在应用中使用 /static/...即可访问 , 更好的方式是使用url_f ...

  6. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

  7. Django中的模板渲染是什么

    首先建立一个页面 在views.py中增加一个方法 配置URL 如何实现的呢 这就是渲染,传递的数据不同显示的数据也不同.Django里的渲染引擎和Jinja的虽然不同但是语法基本通用.现在明白什么叫 ...

  8. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...

  9. thinkphp3.2.3模板渲染支持三元表达式

    thinkphp3.2.3模板渲染支持三元表达式 {$status?'正常':'错误'} {$info['status']?$info['msg']:$info['error']} 注意:三元运算符中 ...

随机推荐

  1. 使用PowerDesigner导出Word/HTML的一些配置

    目标:根据物理视图导出代码和列清单(包括字段.类型.注释).由于默认导出的要素太多,大多不是自己想要的,这里简单说下导出目标的一些配置,留下来备用. 其中,Title中的图和Table表格中的代码预览 ...

  2. 微信公众号API返回不可打印字符的处理。

    引言 在使用微信公众号的"批量获取用户基本信息"API时,发现在某些时候不能使用php的json_decode转为数组,打印出curl获取到的内容中,发现了几个不可打印字符.相信不 ...

  3. 【PRML读书笔记-Chapter1-Introduction】引言

    模式识别领域主要关注的就是如何通过算法让计算机自动去发现数据中的规则,并利用这些规则来做一些有意义的事情,比如说,分类. 以数字识别为例,我们可以根据笔画规则启发式教学去解决,但这样效果并不理想. 我 ...

  4. 没有找到cxcore100.dll,因此这个应用程序未能启动，重新安装应用程序可能会修复此问题

    第一种情况: 出现这个问题多数是因为“环境变量PATH”未设置,虽然你可能在安装的过程中勾选了Add <...>\OpenCV\bin to the system PATH项!安装Open ...

  5. 【NS2仿真】TCP协议

    # # ftp # \ # tcp sink # \ / # n0--------5M 2ms---------n1 # # set ns [new Simulator] set f [open ou ...

  6. $.ajax()方法参数详解

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  7. Rendering Path

    Rendering Path:渲染路径 设置:1.Player Setting,2.Camera(会覆盖PlayerSetting中的设置) 选择:根据渲染内容和目标平台来选择合适的Rendering ...

  8. Hadoop第5周练习—MapReduce计算气象温度等例子

    :对云计算的看法 内容 :使用MapReduce求每年最低温度 内容 :求温度平均值能使用combiner吗? 内容 :使用Hadoop流求最高温度(awk脚本) 内容 :使用Hadoop流求最高温度 ...

  9. 分享一套精美的现代 UI PSD 工具包【免费下载】

    艾库特·耶尔马兹,是土耳其伊斯坦布尔的一位高级艺术总监,他向大家分享了一套美丽的现代 UI 工具包,你可以免费下载.所以,你可以使用这个优秀的素材设计视觉互动和有吸引力的用户界面. 此 UI 套件提供 ...

  10. [C] static和extern的作用

    static: 当用于函数定义或者代码块之外的变量声明时,static关键字用于修改标识符的链接属性,从external改为internal. 当用于代码块内部的变量声明时,static关键字用于修改 ...