artTemplate（艺术模板）的学习与感悟

学习必要： 在目前的技术能力范围内，从服务器返回的数据进行前台渲染的时候，用的是字符串拼接的办法，这个办法不仅麻烦，且极其容易出错。所以，学习一个便捷，高效的模板引擎成了必要。
artTemplate.js的优势: artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。除了性能优势外，调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。
问答版的案例使用字符串拼接代码

  function allMessage() {
        var xhr = new XMLHttpRequest();
        xhr.open('get', '/allMessage');
        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                var allMessage = JSON.parse(xhr.responseText);
                var ques = '';
                for (var index = 0; index < allMessage.length; index++) {
                    var b = allMessage[index].returnMessage
                    ques +=
                        `
                    <div class="centers" id="center">
                    <div class="panel panel-danger"><div class="panel-heading">
                    <h3 class="panel-title">${allMessage[index].userName}
                    '&nbsp;&nbsp;&nbsp;
                    <img class="header" src="${allMessage[index].hearderUrl}">
                    &nbsp;&nbsp;&nbsp;${allMessage[index].date} </h3></div>
                    <div class="panel-body">${allMessage[index].message}
                        <a name='${index}'>
                    <button class="btn btn-default" type="submit" id='${index}'  onclick='addCookie(${index})' style="float:right"' value='${index}'>点击回复</button>
                    </a><div id='content'></div>
                    </div></div> </div>
                    `
                    var answer = '';
                    for (var a = 0; a < b.length; a++) {
                        console.log(b);
                        answer +=
                            `
                    <div class="panel panel-warning">
                    <div class="panel-heading">
                    <h3 class="panel-title right" >
                        ${b[a].name}
                        ${b[a].date}
                        <img src='${b[a].header}' class='header'>
                        </h3>
                    </div>
                    <div class="panel-body right" >
                        ${b[a].message}
                    </div>
                       </div>
                    `
                    }
                    ques = ques + answer;
                }
                document.getElementById('text').innerHTML = ques
            }
        }
    }
    allMessage()

而使用模板引擎后，代码变得极其简单，代码如下：

<script id="returnMessage" type="text/html">

    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title right">
                {{name}}
                {{date}}
                <img src={{header}} class='header'>
            </h3>
        </div>
        <div class="panel-body right">
            {{message}}
        </div>
    </div>
</script>

<script id="allMessage" type="text/html">
   <div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">
             {{userName}}
             {{date}}
             <img src={{hearderUrl}} class='header'>
            
        </h3>
    </div>
    <div class="panel-body">
        {{message}}
    </div>
    {{each returnMessage returnMessage index}}
    <button class="btn btn-default"  type="button" onclick="addCookie('{{index}}')"  style="float:right">点击回复</button>
     {{include 'returnMessage' returnMessage}}
    {{/each}}
   
</div>

</script>
<script>
    $.ajax({
        url:'/allMessage',
        success(res){
            console.log(res[0]);
            var html=''
            for(var index=0;index<res.length;index++){  
              html+=template('allMessage',res[index])

            }
            $(text).html(html)
        }
    })
</script>

效果：

总结： 通过对比不难发现使用模板引擎后，代码整体上简洁了很多，且更容易上手。而artTemplate.js不依赖于JQuery，对整个案例的大小也不会过多占用。这对我以后的前端渲染有了更大的信心。

Ajax数据请求

1：ajax(阿贾克斯) 是jquery当中所包含的数据请求
2: ajax数据请求核心 是xhr (XMLHttpRequest())

  function sendGet() {
            // 参数1:请求接口地址
            // 参数2：请求参数（对象类型）可选 
            // 参数3: 回调函数（服务器返回内容）
            $.get('/getInfo', {name:"TK" ,sex:'男'},function(res){
                console.log(res);
            })
        }

        function sendPost(){
            $.post('/postInfo' , {name:"TK" ,sex:'男'},function(res){
                console.log(res);
            })
        }

        function sendAjax(){
            $.ajax({
                // 请求地址
                url:"/postInfo", 
                // 请求方式  默认get 
                method:"post" , 
                // 参数 
                data:{
                   name:"TK" 
                },
                // 超时
                timeout:30000,
                // 请求头信息
                header:{
                    // ContentType:"application/x-www-form-urlencoded   /  text-html  / text-json "
                },
                // 成功回调 
                success(res){
                    console.log(res);
                },
                // 失败回调
                fail(err){
                    console.log(err);
                },
                complete(){
                    console.log('完成');
                }
            })
        }

邮件激活流程图

又是充实的一天，又是脱离小白的一天。