巧用模板引擎事半功倍

目录

一，前言

二，对比一般渲染数据方式及缺点

三，模板引擎

模板引擎的本质，优点

模板引擎artTemplate的下载地址

artTemplate使用步骤   

 易出错的地方

 四，更多学习资源

---

一，前言

不论是使用Ajax获取同源策略下的数据,还是跨域获取数据，获取数据之后将前端界面进行渲染。怎么渲染前端界面呢?

---

 

二，对比一般渲染数据方式及缺点

• 前端界面都是由标签构成的,所以前端界面的渲染主要做的就是生成html标签。一般我们插入html标签都是通过创建，复制，插入，再用字符串连接这几个步骤实现将html标签渲染到页面

•        缺点：这种方式在标签结构比较复杂的情况之下很不好操作和后期的维护,并且容易出错，因此更好的模板引擎技术应运而生。

                 	var liTag = "";
                	for(var i=0;i<data.s.length;i++){
                		var temp = data.s[i];

                		liTag += "<li>"+temp+"</li>";
                	}

                	var ulTag = document.querySelector("ul");
                	ulTag.innerHTML = liTag;

---

 

三，模板引擎

• 模板引擎的本质，优点

模板引擎的本质:将数据和模板结合起来生成html片段。所以模板引擎需要两个组成部分:模板和数据，通过数据，将模板指定的标签动态生成，方便维护。

• 模板引擎artTemplate的下载地址

常见的模板引擎有很多，常用的模板引擎有tpl.js、baiduTemplate、doT.js、art-template等等这里介绍效率最高的模板引擎            下面是各类模板引擎速度对比       artTemplate下载地址

• artTemplate使用步骤   

第一步：引入js文件

 <script type="text/javascript" src="template.js"></script>

第二步：编写HTML模板 

    <script type="text/html" id='templatebook'>
        <!--只能用id命名-->
    </script>

第三步：向模板插入数据（模拟后端传入的数据），并输出到页面

    <script type="text/javascript">
        window.onload = function() {
            var data = {
                title: '这是title',
                books: ['百事可乐', '可口可乐', '雪碧', '芬达']
            };
            var html = template('templatebook', data);
            //不需要加#
            var div = document.querySelector('#container');
            div.innerHTML = html;
        }
    </script>

第四步：将html片段渲染到页面 

    <script type="text/html" id='templatebook'>
        <h4>{{title}}</h4>
        <ul>
            {{each books as value i}}
            <li>{{value}}</li>
            {{/each}}
        </ul>
    </script>

• 常见语法

1,输出表达式： 对内容编码输出： {{content}}     不编码输出： {{#content}} 

 <script id="test" type="text/html">
        {{msg}}
        <!--不识别html代码-->
        {{#msg}}
        <!--识别html代码-->
    </script>

    <script>
        window.onload = function() {
            var obj = {};
            obj.msg = '<h2 style="color:red">一些文字</h2>';
            var html = template('test', obj);
            document.querySelector('#content').innerHTML = html;

        }
    </script>

2,遍历表达式 ：each 循环传进来数据里面的数组，要是传进来数据本身就是数组就要进行简单处理，value是值，i是索引

    <script id="test" type="text/html">
        <ul>
            {{each arr as value i}}
            <li>{{value}}</li>
            {{/each}}
        </ul>
    </script>

    <script>
        window.onload = function() {
            var data = ['百事可乐', '可口可乐', '雪碧', '芬达'];
            var obj = {};
            obj.arr = data; //data数据复制到arr中
            var html = template('test', obj); //直接下data话 传过去的数值就是data.data会报错
            //定义个对象 将数据放到对象里进行简单处理
            document.querySelector('#content').innerHTML = html;
        }
    </script>

3，判断语句 

    <script type="text/html" id='text'>
        {{if isFlag}}
        <!--如果是true才会生成html片段-->
        <h1>
            {{title}}
        </h1>
        <ul>
            {{each list as value i}}
            <li>索引：{{i}} 值：{{value}}</li>
            <!--循环遍历data中的数组，循环几次产生几个li-->
            {{/each}}
        </ul>
        {{/if}} {{if !isFlag}}
        <h1>没有数据</h1>
        {{/if}}
    </script>

    <script>
        window.onload = function() {
            var data = {
                title: '条件判断',
                isFlag: true,
                list: ['百事可乐', '可口可乐', '雪碧', '芬达']
            };
            var html = template('text', data);
            document.querySelector("#content").innerHTML = html;
        }
    </script>

•  易出错的地方

分享一下我在学习过程中出错的地方

1.  编写html模板的时候一定是 type="text/html" 不要写成了 <script type="text/javascript">
2. 给html模板命名的时候用id来命名，在template()函数中，不需要#
3. 如果传入的数据data仅仅是,就是一个数组，那么在html模块中用 {{each data as value}} 报错，因为他默认回去data             里面找data数组来遍历，所以这里要进行简单的数据处理，在上面的语法中的遍历代码将的就是这个问题
4. each中html元素才是要循环多次生成的，如上面语法中第3点  我只要一个ul，需要循环产生多个li，就不要把ul也放到            each中了，而是放在外面

---

 四，更多学习资源

1.  art-template中文文档
2. art-template完整文档