模板引擎的初次尝试

模板引擎使用步骤（逆战班）

插件下载

首先需要前往Github下载一个名为art-template的jquery插件，下载下来过后我们需要的是其中libs文件夹中的template-web.js文件，将其引入。

DOM结构

此次以ul为例：

<ul>
</ul>
 <script type="text/html" id="category">
     {{each list shop,index}}
     <li data-index="{{shop.id}}">
         <a href="/html/detail.html">
             <img src="{{shop.img}}" alt="">
             <p>{{shop.title}}</p>
             <p>{{shop.price}}</p>
         </a>
     </li>
     {{/each}}
 </script>

ul作为容器盒子，然后再使用script标签，注意此次type为text/html,再给其一个id名方便之后选择器选取，然后使用each对获取到的数据做一个遍历，然后内部的li就按照正常的DOM文档格式，只不过其中的内容就改为获取到的对应数据的数据名。

JS代码

require(['./config'],() => {
    require(['template','header','footer'],(template) =>{
        class List {
            constructor (){
                this.category()
            }
            category(){
                $.get('http://rap2.taobao.org:38080/app/mock/242307/api/mi/list',resp =>{
                    console.log(resp)
                    if(resp.code === 200){
                        const{list} = resp.body
                        const html = template('category',{list})
                        $('ul').html(html)
                    }
                })
            }
        }
        new List()
    })
})

本次假数据来源于rap2，通过jquery的ajax请求从rap2拿到设定好的假数据，然后使用解构赋值获取假数据，之后再通过之前下载的插件提供的template方法将假数据赋值给之前设定好的script标签，并定义一个变量html将其装起来，最后再使用jquery方法将页面结构设置为html变量。

效果展示

其实我也只是知道大致的使用步骤，具体的原理也不怎么清楚，希望大家不要介意。