mustache模板渲染的基本原理

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>

View Code