mustache模板渲染的基本原理
2014-12-05 22:22
686 查看
mustache.js是一个模板引擎,为开发节省了大量的“人力”,对于初学者,我是从这篇 和这篇 博客接触的,算是对mustache有了初步认识,不得不承认自己还是菜鸟阶段还有太多东西要学,慢慢熟悉。
在初步了解mustache后,我仿照公司使用的技巧写了一个demo:
View Code
在demo里有几个关键点这里需要声明一下,第一就是代码中的第二个<script>标签,重点是它的type="text/template" 而不是“text/javascript”,没错就是让他不能正常识别为js代码,因为它内部本身就不是js,识别了反而会报错。它存放的是渲染模板,本打算单独成一个html文件的,但不利于查看,就写在一起了,我司的模板都是一个个html文件,文件里就一个<script type="text/template">标签。也就是说,网页是从模板中选择性加载的,怎样选择呢?那就是底部的js代码控制的,先看模板吧:
最后一个[[#edu]]为true时加载,flase时不加载,这就是所谓的选择性加载,下面看看控制加载的js代码吧:
js代码定义了data,里面存着渲染信息,最后通过Mustache.render(tem,data)渲染,并把渲染的结果作为innerHTML插入到指定标签中,这样就实现了选择性加载,如果要更改数据只需更改data就行,基本原理就是这样,当然实际情况要比这复杂。一个模板成千上万行代码也是很常见的。同志仍需努力!
在初步了解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>
View Code
在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就行,基本原理就是这样,当然实际情况要比这复杂。一个模板成千上万行代码也是很常见的。同志仍需努力!
相关文章推荐
- GRMustache的使用(HTML模板渲染工具)For iOS
- 关于mustacheJS模板渲染页面内容
- GRMustache的使用(HTML模板渲染工具)For iOS
- Mustache.js前端渲染模板
- 一头扎进springboot之使用Freemarker模板引擎渲染web视图
- (六)模板渲染
- 【Django1】基本知识,URL映射,视图渲染,模板应用
- Spring Boot 与 kotlin 使用Thymeleaf模板引擎渲染web视图
- Jtemplete/客户端模板的脚本渲染引擎
- 模板引擎中的模板获取,模板渲染 原理
- thinkphp模板的包含与渲染实例分析
- Web模板引擎—Mustache
- Itext读取PDF模板文件渲染数据后创建新文件
- iOS绘图教程 绘图、变换、颜色管理、脱屏渲染,模板、渐变、
- Javascript模板引擎mustache.js详解
- Spring入门,模板语法和渲染
- Javascript 语言的模板引擎:Mustache
- mustache模板技术(转)
- cocos2dx的RenderTarget渲染遇到模板缓冲(Stencil)出问题的解决方案
- 模板渲染和参数传递.