The study and comprehension of artTemplate

What to learn: To the extent that the current technology is available, the foreground rendering of data returned from the server is done using string concatenation, which is cumbersome and extremely error-prone. Therefore, it is necessary to learn a convenient and efficient template engine. Advantages of artTemplate. Js: artTemplate is a new generation of javascript template engine, which uses precompilation to make a qualitative leap in performance, and makes full use of javascript engine characteristics, making its performance both in the front end and the back end have extremely excellent performance. In addition to the performance benefits, debugging capabilities are also worth mentioning. The template debugger can pinpoint the template statement that caused the rendering error, eliminating the pain of not being able to debug during template writing, making development more efficient, and avoiding the whole application crashing due to a single template error. The q&A version of the case uses string concatenation code

  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}Reply '> click < / 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()
Copy the code

Using the template engine, the code is extremely simple and looks like this:

<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" </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>Copy the code

Effect:

Conclusion:By comparison, the overall code is much cleaner and easier to use with the template engine. Arttemplate.js does not rely on JQuery and does not take up too much of the size of the entire case. This gave me more confidence in my future front-end rendering.

Ajax data request

2. Ajax data request core is XHR (XMLHttpRequest()).

  function sendGet() {
            // Parameter 1: request interface address
            // Parameter 2: Request parameter (object type) Optional
            // Parameter 3: callback function (server returns content)
            $.get('/getInfo', {name:"TK" ,sex:'male'},function(res){
                console.log(res); })}function sendPost(){
            $.post('/postInfo' , {name:"TK" ,sex:'male'},function(res){
                console.log(res); })}function sendAjax(){
            $.ajax({
                // Request an address
                url:"/postInfo".// The request mode defaults to get
                method:"post" , 
                / / parameters
                data: {name:"TK" 
                },
                / / timeout
                timeout:30000.// Request header information
                header: {// ContentType:"application/x-www-form-urlencoded / text-html / text-json "
                },
                // Successful callback
                success(res){
                    console.log(res);
                },
                // Failed callback
                fail(err){
                    console.log(err);
                },
                complete(){
                    console.log('complete'); }})}Copy the code

Email Activation Flowchart

Another day of enrichment, another day of freedom.