web前端模板引擎框架之一的template-web.js模板引擎框架，用於引入多條相同的資料。
步驟：
1.匯入模板檔案，這裡是用的是art_template
2.寫好模板，是待作為複製的物件，寫在script中，type為text/hml，這樣不會再頁面中解析。
3.引入需要使用模板的資料。
4.填充

—簡單替換模板內容，在需要更換內容地方寫成{{name}}

<script type="text/html" id="template">
        <ul>
            <li>名字{{name}}</li>
            <li>技能{{skill}}</li>
            <li>愛好{{habbit}}</li>
        </ul>
    </script>
 

填充語句：

<script>
      // 人工手寫的資料，後期資料會越來越複雜，這裡只是一個例子
        var data = {
            name:'張三',
            skill:"帥氣",
            habbit:"kai"
        };
        // 2.開始填坑
        // 引數1：模板的id
        // 引數2：填充的引數
        
        var result = template('template',data);
        console.log(result);
        document.body.innerHTML = result;
    </script>
 

結果展示：

-----if使用：需要判斷一下選擇哪個模板的時候,

//兩組資料，屬性名都是一樣的，屬性的內容都是不一樣的。而用來輸出的格式卻又是一致的。
 var person1 = {
                male:'female',
                age:'18',
                name:'Susan',
                skill:'cooking'
            };
var person2 = {
                male:'male',
                age:'80',
                name:'Joffer',
                skill:'gardening'
            };
 

模板：用了兩個li，分別在每個li中寫好每組的模板名稱，這是沒有使用判斷語句的模板，在頁面中中會根據收到的資料對兩個li都進行模板利用，這樣就會輸出兩段，分別是女士和先生的，使用同一段資料顯示兩次。

<script type="text/html" id="template1">
            <ul>
                <li>歡迎您！{{name}}女士！
                    <ol>您的年齡：{{age}}</ol>
                    <ol>您擅長 ：{{skill}}</ol>
                </li>
                <li>歡迎您！{{name}}先生！
                    <ol>您的年齡：{{age}}</ol>
                    <ol>您擅長 ：{{skill}}</ol>
                </li>
            </ul>
        </script>

結果：

—使用if的改進寫法。

<script type="text/html" id="template1">
         <ul>
              {{if male=='female'}}
                  <li>歡迎您！{{name}}女士！
                      <ol>您的年齡：{{age}}</ol>
                      <ol>您擅長 ：{{skill}}</ol>
                  </li>
              {{else if male=='male'}}
                  <li>歡迎您！{{name}}先生！
                      <ol>您的年齡：{{age}}</ol>
                      <ol>您擅長 ：{{skill}}</ol>
                  </li>
              {{/if}}
          </ul>
</script>

分別呼叫並輸出：

 console.log(template('template1',person1));
console.log(template('template1',person2));
 
 document.body.innerHTML = template('template1',person1);
 document.body.innerHTML += template('template1',person2);

結果顯示，female的對於女士，male對應男士。功能 √

—當資料物件中出現數組，並需要對陣列中的資料一一進行呼叫並輸出
資料：

 var person = {
            name:'三傻',
            family:['羅柏','二丫','布蘭','雪諾']
      };

可以在第二條對應family中的li中加ol，因為family陣列中有4個，在ol中再加4個li，每個li的待作模板的資料可以用[index]選出

<script type="text/html" id="template1">
          <ul>
              <li>她的名字：{{name}}</li>
              <li>她的家人們：
                   <ol>
                       <li>{{family[0]}}</li>
                       <li>{{family[1]}}</li>
                       <li>{{family[2]}}</li>
                       <li>{{family[3]}}</li>
                   </ol>
               </li>
            </ul>
	 </script>

結果顯示：

這是在僅有4個數值的情況，如果是多條或者不知道長度的時候，可以使用each語句進行復制。

 <script type="text/html" id="template1">
     <ul>
           <li>她的名字：{{name}}</li>
           <li>她的家人們：
	           {{each family}}
	             <ol>{{$value}}</ol>
	             {{/each}}
           </li>
        </ul>
 </script>

其他程式碼不變
顯示結果與之前一致

—當物件資料中包含陣列，陣列中包含物件，且此時需要對每個鍵值對物件輸出。

{{$value.name}}---{{$value.title}}
// 因為最終要取得值在物件中，這樣輸出使得每一條物件中的每個鍵值都可以輸出

模板：

 <script type="text/html" id="template1">
       <ul>
	          <li>她的名字：{{name}}</li>
	          <li>她的兄弟姐妹：
		             {{each brother}}
		             		<ol>{{$value}}</ol>
		             {{/each}}
	          </li>
	          <li>她的家人：
		           {{each family}}
		          		 <ol>{{$value.name}}---{{$value.title}}</ol>
		           {{/each}}  
	          </li>
       </ul>
</script>

輸出結果：
資料部分：

 var person = {
            name:'三傻',
            brother:['羅柏','二丫','布蘭','雪諾'],
            family:[
                {name:'dad',title:'WinterFall Lord'},
                {name:'Mother',title:'WinterFall Lady'}
            ]
      };