artTemplate文档：https://aui.github.io/art-template/docs/
HTML模板引擎
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>HTML模板引擎</title>
6. <style>
7. li span{
8. color: red;
9. }
10. </style>
11. </head>
12. <body>
13. <script src='template.js'></script>
14. <script>
15. // 辅助方法
16. template.helper('formData',function(time){
17. var y = time.getFullYear(),
18. m = time.getMonth(),
19. d = time.getDate()
20.
21. m = m < 10 ?'0'+m:m
22. d = d < 10?'0'+d:d
23. return
${y} - ${m} - ${d}24. })
25. template.helper('money',function(price){
26. if(price == 0) return'免费'
27. return '￥' + price.toFixed(2)
28. })
29. </script>
30. <!--创建一个简单的模板
31. 创建模板需要使用script 并且type需要设置为text/html
32. 创建模板时 模板的script必须设置id 才能使用模板
33. -->
34. <script id="template" type="text/html">
35. <!--{{}}逻辑表达式 表示引用模板数据 或者是artTenplate语法关键字-->
36. {{if books.length < 1}}
37. <p>抱歉没有找到推荐书目</p>
38. {{else}}
39. <h1>{{title}}{{books.length}}本</h1>
40. <ul>
41. <!--each as遍历数组 b = value i = 索引-->
42. {{each books as b i}}
43. <li>
44. {{b.name}}
45. <del>{{b.markerPrice}}</del>
46. <span>{{b.price | money}}</span><br>
47. 出版日期:{{b.pData | formData}}
48. </li>
49. {{/each}}
50. </ul>
51. {{/if}}
52. </script>
53. <script>
54.
55. var data = {
56. title:'推荐书目',
57. books:[{
58. name:'JavaScript 权威指南',
59. markerPrice:111,
60. price:99.9,
61. pData:new Date(2017,8,21)
62. },{
63. name:'三国演义',
64. markerPrice:120,
65. price:98.9,
66. pData:new Date(2017,5,21)
67. },{
68. name:'大闹天空',
69. markerPrice:0,
70. price:100,
71. pData:new Date(2017,8,1)
72. }]
73. }
74. // 在使用模板时 需要用到一个函数template
75. // 第一个参数需要使用模板的id
76. // 第二个参数 套用模板的数据
77. // 返回值 数据 + 模板生成的html字符串
78. var template = template('template',data)
79. document.body.innerHTML = template
80. console.log(template)
81. </script>
82. </body>
83. </html>
模板包含
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>模板包含</title>
6. </head>
7. <body>
8. <script src="template.js"></script>
9. <!--模板1-->
10. <script id="web" type="text/html">
11. <div>
12. <!--<a href="">ccccccc</a>-->
13. <a href="{{url}}">{{name}}</a>
14. </div>
15. </script>
16. <!--模板2-->
17. <script type="text/html" id="book">
18. <div>
19. <img width="300px" height="400px" src="{{img}}" alt="书籍封面">
20. <a href="{{url}}">{{name}}</a>
21. </div>
22. </script>
23. <script id="template" type="text/html">
24. <h1>{{title}}</h1>
25. {{each items as item}}
26. <!--一个模板中可以套用另一个模板 include
27. 如果这个模板是一个固定模板 只写模板id即可 {{include '模板id'}}
28. 如果这个模板是个需要数据的模板 那么就要传递数据对象{{include '模板id' item}}-->
29. {{if item.type == 'web'}}
30. {{include 'web' item}}
31. {{else}}
32. {{include 'book' item}}
33. {{/if}}
34. {{/each}}
35. </script>
36. <script>
37. var data = {
38. title:'建议浏览的网站和阅读书目',
39. items:[{
40. type:'web',
41. name:'MDN',
42. url:'https://developer.mozilla.org/zh-CN/'
43. },{
44. type:'book',
45. name:'从你的全世界路过',
46. url:'https://baike.baidu.com/item/%E4%BB%8E%E4%BD%A0%E7%9A%84%E5%85%A8%E4%B8%96%E7%95%8C%E8%B7%AF%E8%BF%87/16325805?fr=aladdin',
47. img:'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=292d33ad52afa40f28cbc68fca0d682a/2f738bd4b31c8701fb5636792f7f9e2f0608ff49.jpg'
48. },{
49. type:'web',
50. name:'gitHub',
51. url:'https://github.com/'
52. }]
53. }
54. document.body.innerHTML = template('template',data)
55. </script>
56. </body>
57. </html>