ajax项目冲刺01

1、模板引擎

1)模板+数据=>静态页面片段

2)art-template性能较好

分支语法：

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

循环语法：

{{each target}}
    {{$index}} {{$value}}
{{/each}}

3）在script标签内书写模板引擎代码，type='text/html'，可给定id

模板的作用就是把模板和数据一起生成一个静态的HTML片段，其使用步骤是

<script type="text/html" id="temp"><!--假数据-->
        <h1>{{title}}</h1>
        {{if menus}}
        {{each menus as value i}}
        <div>{{value}}==={{i}}</div>
        {{/each}}
        {{/if}}
    </script>
    <script>
        var data = {
            title: '美食信息',
            menus: ['鸡肉饭', '猪扒包', '鸡丝面', '凉拌牛腩']
        }
        var html=template('temp',data)//模板名，数据
        document.write(html)
    </script>

4)不想让浏览器解析标签可使用转义符#

如

{{#value}}

5）在js中存放模板

我们可以把模板以字符串的形式拼接后存起来。利用

template.compile(模板字符串变量名)进行渲染后返回的结果是

一个函数，我们传参后进行调用就可以进行使用了

 <script type="text/javascript" id="temp">
        var tep = "<h1>" + "{{title}}" + "</h1>" +
            "{{if menus}}" + "{{each menus as value i}}" +
            "<div>" + "{{value}}" + "===" + "{{i}}" + "</div>" +
            "{{/each}}" +
            "{{/if}}"
    </script>
    <script>
        var data = {
            title: '美食信息',
            menus: ['鸡肉饭', '猪扒包', '鸡丝面', '凉拌牛腩']
        }
        var render = template.compile(tep)
        var html=render(data)
        document.write(html)
    </script>