模板引擎：把js數據轉換成html需要的頁面，這就是模板引擎需要做的事
• native原生語法
1. 准備數據
2. 把數據轉化成html格式的字符串 使用模板引擎 artTemplate 原生語法
a. 下載原生語法的js文件
b. 引入在當前頁面
c. 怎么使用？
i. 創建模板 ，在html頁面創建<script type='text/template'></script>
1. Type必須是text/template或text/html
2. 寫這個的目的是為了讓內容不被解析成js執行，當做字符串或html去解釋，不會顯示在頁面中
3. 給標簽設置一個ID用來做標識
4. 模板的內容是什么？內容里面有沒有特殊語法
5. 模板引擎是有自己的語法的，原生的語法
6. 可以在模板引擎內寫，js語法 <% js語法 %>
7. 可以拿到數據 。傳的對象的屬性當做變量使用 {list：data} list是一個變量可以在模板引擎內使用
8. 獲取數據顯示出來 <%=屬性名稱 %>
9. 在模板引擎內不可使用全局變量。提高性能
10. 如果想使用全局變量怎么辦？兩種方式
11. 第一種：當做數據進行傳遞 {console：console}
12. 第二種：helper()
13. = 獲取數據的時候，默認解析出的數據純字符串
14. =# 符號獲取數據的時候，默認解釋出的是html代碼在瀏覽器是會被執行的<script>alert(0);<\/script>
15. 可以導入 其他模板。Include（’childTemplate‘，{’name‘：’xx‘}）
ii. 把數據使用在模板中
iii. 有兩個參數：模板的ID，數據（特殊要求：必須是對象）
iv. 返回的內容是什么？是數據轉化成的html格式的字符串
v. 注冊模板內部能使用的函數 var a=function(){ } {getConsole：function（）{ } }
vi. 兩個參數，第一個參數：方法的名稱。第二個參數：方法名對應的函數
3. 渲染
<script type="text/template" id="childTemplate"> <tr><td colspan="5"><%=name%>我是子模版</td></tr> </script> <script type="text/template" id="template"> <% include('childTemplate',{'name':'xgg'}); %> <% var console = getConsole(); %> <% console.log('我使用了全局變量'); %> <% for(var i = 0 ; i < list.length ; i ++){ %> <% var item = list[i]; %> <tr> <td><%=i+1%></td> <td><%=item.username%></td> <td><%=item.password%></td> <td><%=item.age%></td> <td><%=item.sex%></td> </tr> <% } %> </script> <script src="js/jquery.min.js"></script> <script src="js/template-native.js"></script> <script> /*1.准備數據*/ var data = [ {"username":"<span style='color:red'>xgg1</span>","password":"123456","age":18,"sex":"男"}, {"username":"xgg2","password":"123456","age":18,"sex":"男"}, {"username":"xgg3","password":"123456","age":18,"sex":"男"} ]; /*2.把數據轉化成html格式的字符串 使用模版引擎 artTemplate 原生語法 */ /*2.1 下載 https://github.com/aui/art-template */ /*2.2 引入在當前頁面 template-native.js 原生語法的js文件*/ /*2.3 怎么使用模板引擎*/ /*2.3.1 創建模版 在html頁面創建 <script type='text/template'><\/script> */ /*2.3.2 把數據使用在模版當中*/ /*2.3.3 有兩個參數 第一個參數 模版的ID 第二個參數 數據（特殊要求：必須是對象{}）*/ /*2.3.4 返回的內容是什么 是html格式的字符串*/ /*2.3.5 注冊模版內部能使用的函數 var a = function(){} ｛getConsole:function(){}｝*/ /*2.3.6 兩個參數 第一個參數 方法的名稱 第二個參數 方法名對應的函數 */ template.helper('getConsole',function(){ return console; }); var html = template('template',{list:data}); /*3.渲染*/ $('tbody').html(html); </script>
• pithy簡潔語法
1、准備數據
2、把數據轉化成html格式的字符串 使用模板引擎 artTemplate 簡潔語法
i. 引入js文件
ii. 准備模板
iii. 調用解析方法
a. 簡潔語法的模板 使用簡潔語法
b. {{ 寫簡潔語法 }}
c. Each 需要遍歷的數據 默認的 索引和索引對應的值 使用默認變量 $index $value
d. {{ each model as item i }} 自己指定 索引和對應數據的 變量名稱
e. {{ if }}
f. 導入 {{ include 'childTemplate' }}
3、渲染
<!-- 1.簡潔語法的模版 使用簡潔的語法 2.{{ 寫簡潔語法 }} 3. each 需要遍歷的數據 默認的 索引和索引對應的數據 使用默認變量 $index $value 4. {{each model as item i }} 自己指定 索引和對應數據的 變量名稱 5. {{if}} 6. 導入 {{ include 'childTemplate'}} 注意 最后的地方（}}）不能有空格 --> <script type="text/template" id="childTemplate"> <tr><td colspan="5">我是子模版</td></tr> </script> <script type="text/template" id="template"> {{ include 'childTemplate'}} {{each model}} <tr> <td>{{$index+1}}</td> <td>{{$value.username}}</td> <td>{{$value.password}}</td> <td>{{$value.age}}</td> <td>{{$value.sex}}</td> </tr> {{/each}} {{each model as item i }} <tr> <td>{{if i == 2}} <b>0</b> {{/if}}</td> <td>{{item.username}}</td> <td>{{item.password}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> </tr> {{/each}} </script> <script src="js/jquery.min.js"></script> <script src="js/template.js"></script> <script> /*1.准備數據*/ var data = [ {"username":"xgg1","password":"123456","age":18,"sex":"男"}, {"username":"xgg2","password":"123456","age":18,"sex":"男"}, {"username":"xgg3","password":"123456","age":18,"sex":"男"} ]; /*2.把數據轉化成html格式的字符串 使用模版引擎 artTemplate 簡潔語法 */ /*2.1 引入js文件 template.js 簡介語法的文件*/ /*2.2 准備模版 */ /*2.3 調用解析方法*/ var html = template('template',{model:data}); /*3.渲染*/ $('tbody').html(html); </script>