Preface

The article did not intend to write, to be honest landlord knowledge of front-end template is still in a very early stage, but to the entire source code reading series integrity, in-depth Underscore _.template source method, think it is necessary remember The following article, for the sake of your own memo, or for the introduction of students who have not used the front-end template engine. (If you are familiar with the template engine, you can help the host to see if there are any BUGs in the text..)

Backend MVC

Speaking of template rendering, the first thing the landlord touches is not the front-end template engine, but the back-end. In the back-end MVC mode, data is generally read from the Model layer, and then passed to the View layer for rendering (rendered into HTML files), while the View layer generally uses a template engine, such as the PHP used in the host s project smarty template engine. Feel free to feel the code above.

  

    {{foreach from=$pageArray.result item=leftMenu key=key name=leftMenu}}
      
{{$key}}
      {{foreach from=$leftMenu key=key2 item=item2}}
        
{{$key2}}
      {{/foreach}}
    {{/foreach}}
  
 

What is passed into the View layer is actually a JSON data called $pageArray . The MVC pattern is also very easy to understand, look Ruan Yifeng recommended teacher to talk about the MVC pattern , then look at this picture below.

Most of the previous WEB projects will adopt this background MVC mode, which is conducive to SEO, and compared with the front-end request interface, there are fewer HTTP requests, and theoretically the loading speed may be slightly faster. But the shortcomings are also very obvious. After the front end writes the static page, the back end needs to "set the template". Every time the front end changes slightly, the corresponding template page in the back end also needs to be changed, which is very troublesome. If there is complex JS in the page, should it be written on the front end or on the back end? If you write on the front-end, there is not a lot of data, and it is not convenient to debug. If you write on the back-end... So the PHPer that the host sees is usually JS.

Front-end template

The emergence of AJAX makes it possible to separate the front and back ends. The back-end focuses on business logic and provides interfaces for the front-end, while the front-end requests data from the back-end through AJAX, and then dynamically renders the page.

We assume that the interface data is as follows:

 [{name: "apple"}, {name: "orange"}, {name: "peach"}]
 

  

    
apple
    
orange
    
peach
  
 

__JJ_LT_JJ__/div__JJ_GT_JJ__
__JJ_LT_JJ__script__JJ_GT_JJ__
// 
var data = [{name: "apple"}, {name: "orange"}, {name: "peach"}];

var str = "";
str += '__JJ_LT_JJ__ul class="list"__JJ_GT_JJ__';

for (var i = 0, len = data.length; i __JJ_LT_JJ__ len; i++) {
  if (i !== len - 1)
    str += "__JJ_LT_JJ__li__JJ_GT_JJ__" + data[i].name + "__JJ_LT_JJ__/li__JJ_GT_JJ__";
  else
    str += '__JJ_LT_JJ__li class="last-item"__JJ_GT_JJ__'  + data[i].name + "__JJ_LT_JJ__/li__JJ_GT_JJ__";
}

str += "__JJ_LT_JJ__/ul__JJ_GT_JJ__";
document.querySelector("div").innerHTML = str;
__JJ_LT_JJ__/script__JJ_GT_JJ__
__JJ_LT_JJ__/code__JJ_LT_JJ__div__JJ_GT_JJ____JJ_LT_JJ__/pre__JJ_GT_JJ____JJ_LT_JJ__/div__JJ_GT_JJ__

__JJ_LT_JJ__p__JJ_GT_JJ__  HTML  View   JS  Controller  UI   HTML   href  src  __JJ_LT_JJ__/p__JJ_GT_JJ__

__JJ_LT_JJ__p__JJ_GT_JJ__ Underscore   _.template   _.template  __JJ_LT_JJ__/p__JJ_GT_JJ__

__JJ_LT_JJ__div__JJ_GT_JJ____JJ_LT_JJ__pre__JJ_GT_JJ____JJ_LT_JJ__code__JJ_GT_JJ____JJ_LT_JJ__div__JJ_GT_JJ____JJ_LT_JJ__/div__JJ_GT_JJ__
__JJ_LT_JJ__script src="//cdn.bootcss.com/underscore.js/1.8.3/underscore.js"__JJ_GT_JJ____JJ_LT_JJ__/script__JJ_GT_JJ__
__JJ_LT_JJ__script type="text/template" id="tpl"__JJ_GT_JJ__
  __JJ_LT_JJ__ul class="list"__JJ_GT_JJ__
    __JJ_LT_JJ__%_.each(obj, function(e, i, a){%__JJ_GT_JJ__
      __JJ_LT_JJ__% if (i === a.length - 1) %__JJ_GT_JJ__
        __JJ_LT_JJ__li class="last-item"__JJ_GT_JJ____JJ_LT_JJ__%=e.name%__JJ_GT_JJ____JJ_LT_JJ__/li__JJ_GT_JJ__
      __JJ_LT_JJ__% else %__JJ_GT_JJ__
        __JJ_LT_JJ__li__JJ_GT_JJ____JJ_LT_JJ__%=e.name%__JJ_GT_JJ____JJ_LT_JJ__/li__JJ_GT_JJ__
    __JJ_LT_JJ__%})%__JJ_GT_JJ__
  __JJ_LT_JJ__/ul__JJ_GT_JJ__
__JJ_LT_JJ__/script__JJ_GT_JJ__

__JJ_LT_JJ__script__JJ_GT_JJ__
// 
var data = [{name: "apple"}, {name: "orange"}, {name: "peach"}];

var compiled = _.template(document.getElementById("tpl").innerHTML);
var str = compiled(data);
document.querySelector("div").innerHTML = str;
__JJ_LT_JJ__/script__JJ_GT_JJ__