實例 · JavaScript學習記錄

### 3、實例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="./lib/template-web.js"></script> </head> <body> <div id="content"></div> <script id="test" type="text/html"> <div>  <p>{{name}}</p>  <p>{{#value}}</p>  {{if bool}} <p>{{bool}}</p> {{/if}} {{if num < 1 }} <p>'num < 1'</p> {{else}} <p>error!</p> {{/if}}  <p>遍歷表達式數組</p> {{each list as value index}} <li>{{index}}: {{value}}</li> {{/each}}  <p>$簡寫</p> {{each list}} <li>{{$index}}: {{$value}}</li> {{/each}}  <p>遍歷表達式對象</p> {{each objList as value index}} <li>{{index}}: {{value}}</li> {{/each}}  <p>$簡寫</p> {{each objList}} <li>{{$index}}: {{$value}}</li> {{/each}}  {{include 'news_list'}}  </div> </script> <script id="news_list" type="text/html"> <p>模板包含子模板,表達式</p> <ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value + 1}}</li> {{/each}} </ul> </script> <script> const data = { name: 'zhangsan', value: '<h1>lisi</h1>', num: 0, bool: true, list: [1, 2, 3, 4, 5], objList: { name: 'zhangsan', age: '18', addr: '廣東' } } let temp = template('test', data) document.getElementById('content').innerHTML = temp </script> </body> </html> ``` ![image-20200126152808449.png](https://yanxuan.nosdn.127.net/661309f275c70d0d32b5319d697cf5cf.png) ```html <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>no escape-demo</title> <script src="../dist/template.js"></script> </head> <body> <h1>不轉義HTML</h1> <div id="content"></div> <script id="test" type="text/html"> <p>不轉義：{{#value}}</p> <p>默認轉義： {{value}}</p> </script> <script> var data = { value: '<span style="color:#F00">hello world!</span>' }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html> ``` ![image-20200126152827260.png](https://yanxuan.nosdn.127.net/3c6e9a272415409bb76dfa208eea9f06.png) ```html <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>include-demo</title> <script src="../dist/template.js"></script> </head> <body> <div id="content"></div> <script id="test" type="text/html"> <h1>{{title}}</h1> {{include 'list'}} </script> <script id="list" type="text/html"> <ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> </script> <script> var data = { title: '嵌入子模板', list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html> ``` ![image-20200126152842459.png](https://yanxuan.nosdn.127.net/5979584f9b237e913279b47fb7e2a911.png) ```html ``` ![image-20200126152920878.png](https://yanxuan.nosdn.127.net/1b3ef79d9f83050e89c7f5bcda21900a.png)