Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to use the front and rear template engine in Web. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Preface

This article was not intended to be written, to be honest, the landlord's understanding of the front-end template is still in a very primary stage, but for the integrity of the entire source code interpretation series, after going deep into the source code of the Underscore _. Template method, I think it is necessary to write down this article, for my own memo or for the introduction of students who have not yet used the front-end template engine.

Back-end MVC

When it comes to template rendering, the first contact 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 transferred to the View layer for rendering (rendering into HTML files), while the View layer generally uses a template engine, such as PHP's smarty template engine used in the main project. Feel free to use 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 model is also very easy to understand, it is recommended to take a look at teacher Ruan Yifeng's talk about MVC mode, and then take a look at the following picture.

Most of the previous WEB projects used this background MVC mode, which is good for SEO, and with less HTTP requests than the front-end request interface, it may load slightly faster in theory. But the disadvantage is also very obvious, the front end to write a static page, to let the background to "set the template", every time the front end slightly changed, the background corresponding template page also needs to change, very troublesome. If there is a complex JS in the page, front-end write or back-end write? If you write at the front end, if you don't have a lot of data, it's not convenient to debug, and if you write at the back end. So the PHPer seen by the landlord is usually JS.

Front-end template

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

Let's assume that the interface data is as follows:

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

Suppose the rendered page is as follows:

Apple orange peach

Before the advent of the front-end template engine, we used to do this:

/ / suppose interface data var data = [{name: "apple"}, {name: "orange"}, {name: "peach"}]; var str = ""; str + =''; for (var I = 0, len = data.length; I < len; I +) {if (I! = len-1) str + = "" + dataI [.name + "; else str + =''+ data [I] .name +";} str + = "" Document.querySelector ("div") [xss_clean] = str

In fact, individual landlords often do this, which looks simple and convenient, but there are obvious drawbacks. HTML code (View layer) and JS code (Controller layer) are mixed together, and UI and logic code are mixed together, which will be very difficult to read. Once the business becomes complex, or multi-person maintenance, it will almost get out of control. And if there are a lot of quotation marks in the HTML code that needs to be concatenated (for example, there are a large number of href attributes, src attributes), then it is very easy to make mistakes (those who have done this should have a lot of experience).

At this point, the front-end template engine appears, and Underscore's _. Template is probably the simplest front-end template engine (maybe not up to the height of the engine, or just a front-end template function). Let's not talk about the implementation of _. Template and rewrite the above code with it.

/ / Simulation data var data = [{name: "apple"}, {name: "orange"}, {name: "peach"}]; var compiled = _ .template (document.getElementById ("tpl") [xss_clean]); var str = compiled (data); document.querySelector ("div") [xss_clean] = str

In this way, if the front end needs to change the HTML code, you only need to change the template. The advantage of this is obvious: the front-end UI and logic code are no longer mixed up, the reading experience is good, and it is much easier to change.

The disadvantage of front-end separation * * may be that the SEO is weak. After all, the crawler only grabs the HTML code and does not render the JS. (PS: now the Google crawler can grab AJAX Making AJAX applications crawlable. The specific effect is unknown)

Node middle layer

Simple back-end template engine (back-end MVC) and front-end template engine have some limitations. The emergence of Node gives us a third choice, let Node as the middle layer.

How to operate it exactly? To put it simply, let a background language (such as Java?PHP?) It simply provides the interface needed to render the page, and the middle layer of Node uses the template engine to render the page to make the page straight out. In this way, the interface provided by the backend can be used not only by the Web side, but also by the APP, and the browser can also call it. At the same time, the straight-out Node of the page will not affect the SEO, and the front and rear ends are separated, which is a more * * solution.

The above is the editor for you to share how to use the front and rear template engine in Web. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.