template-web.js模板引擎框架

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'}
            ]
      };