js模版引擎笔记

2018-07-28 11:39 1293 次阅读 0 赞

<div>**JavaScript 模板引擎** JavaScript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注。 **常见模板引擎**</div>[baiduTemplate(百度)\\](http://baidufe.github.io/BaiduTemplate/)[artTemplate（腾讯）\\](https://github.com/aui/artTemplate)[juicer（淘宝）\\](http://juicer.name/)[doT\\ ](https://github.com/olado/doT)[tmpl\\ ](https://github.com/BorisMoore/jquery-tmpl)[handlebars\\ ](http://handlebarsjs.com/)[easyTemplate\\ ](https://github.com/qitupstudios/easyTemplate)[underscoretemplate\\ ](http://documentcloud.github.io/underscore/)[mustache\\kissytemplate等。](https://github.com/janl/mustache.js) 兼容性、性能对比详情见，([各种JS模板引擎对比数据(高性能JavaScript模板引擎)，我就不在多说了。](http://www.cnblogs.com/guohu/p/3870677.html) **art-template** ---------------- javascript 模板引擎，官网：[https://github.com/aui/art-template](https://github.com/aui/art-template) 分为原生语法和简洁语法，本文主要是讲简洁语法 - 基础数据渲染 - 输出HTML - 流程控制 - 遍历 - 调用自定义函数方法 - 子模板引入 ### **基础数据渲染** 一、引入art-template.js文件 ``` <script src="template-debug.js"></script> ``` 二、编写HTML模板 ``` <script id="test" type="text/html"> <h1>{{title}}</h1> </script> ``` 三、向模板插入数据，并输出到页面 ``` var data = { title:"hello world" }; var html = template("test",data); document.getElementById('content').innerHTML = html; ``` ### 输出HTML ``` <script id="test" type="text/html"> <h1>{{title}}</h1> </script> ``` //注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出 ``` <script id="test" type="text/html"> <h1>{{#title}}</h1> </script> var data = { title:"<p>hello world</p>" }; var html = template("test",data); document.getElementById('content').innerHTML = html; ``` ### ### **流程控制语句**（if else） {{if value}} ... {{else if value}} ... {{else}} ... {{/if}} 流程控制就相对其他模板来说强大很多了，直接看例子 ``` <script id="test" type="text/html"> <div> {{if bok==22}} <h1>线上</h1> {{else if bok==33}} <h2>隐藏</h2> {{else}} <h3>走这里</h3> {{/if}} </div> </script> <script> var data = { "bok":22 }; var html = template('test',data); document.getElementById("app").innerHTML = html; </script> ``` ### **循环遍历语句** {{each name}} 索引：{{$index}} 值：{{$value}} {{/each}} ``` <script id="test" type="text/html"> <div> <ul> {{if c==100}} <ul> {{each person}} <li> 编号：{{$index+1}}--姓名：{{$value.name}}--年龄：{{$value.age}} </li> {{/each}} </ul> {{/if}} </ul> </div> </script> <script> var data = { c:100, person:[ {name:"jack",age:18}, {name:"tom",age:19}, {name:"jerry",age:20}, {name:"kid",age:21}, {name:"jade",age:22} ] }; var html = template("test",data); document.getElementById("content").innerHTML = html; </script> ``` 嵌套的写法 ``` <script id="test" type="text/html"> <div> {{if bok}} {{if list.length>=0}} {{each list}} <p>{{$index}}:{{$value}}</p> {{/each}} {{else}} <p>没有数据</p> {{/if}} {{/if}} </div> </script> <script> var data = { "bok":true, list:["a","b","c"] }; var html = template('test',data); document.getElementById("app").innerHTML = html; </script> ``` ### **调用自定义方法** 通过template.helper(name,fnCallBack)注册方法可以直接在{{}}中调用 ``` <script id="test" type="text/html"> <div> {{if c==100}} <ul> {{each person}} <li>姓名：{{$value.name}}--性别：{{show($value.sex)}}</li> {{/each}} </ul> {{/if}} </div> </script> <script> var data = { c:100, person:[ {name:"jack",age:18,sex:1}, {name:"tom",age:19,sex:0}, {name:"jerry",age:20,sex:0}, {name:"kid",age:21,sex:1}, {name:"jade",age:22,sex:0} ] }; //自定义函数 template.defaults.imports.show=function(sex){ console.log(sex);//同样可以打印日志到控制台 if(sex==0){ return "男" }else if(sex==1){ return "女" } }; var html = template("test",data); document.getElementById("app").innerHTML = html; </script> ``` ### **调用子模板** {{include 'main'}} 引入子模板，数据默认为共享 {{include 'main' a}} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的 ``` <body> <div id="app"></div> <script src="template-debug.js"></script> <script id="main" type="text/html"> <ul> {{each list}} <li>{{$value}}</li> {{/each}} </ul> </script> <script id="test" type="text/html"> <div> <ul> {{each person}} <li>{{$value.name}}</li> {{/each}} </ul> {{include 'main' a}} </div> </script> <script> var data = { person:[ {name:"jack",age:18}, {name:"tom",age:19}, {name:"jerry",age:20}, {name:"kid",age:21}, {name:"jade",age:22} ], a:{ list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] } }; var html = template("test",data); document.getElementById("app").innerHTML=html; </script> </body> ```

js模版引擎笔记

评论区