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

This article mainly explains the "web front-end template principle and implementation method is what", the content of the explanation is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "what is the principle and implementation of web front-end template" bar!

The core of what is popular nowadays, such as react, avalon, angular, vue, cannot be separated from the front-end template. Understanding the front-end template is the key to our understanding of MV*.

The most important purpose of the front-end framework is to render the page. The word "render" does not originally belong to the front-end. The front end used to be called cut image, which turns the PSD made by the designer into a static page, and then adds dynamic interaction. But we have a lot of data from the back end, how to add the data to the static page? As a result, another set of processes is called "set of pages". The process of setting up pages is actually to cut static pages into pieces, each of which is a php,jsp or vm file, which are processed by the back-end template engine!

In fact, the template is not limited to the back-end or front-end, the nature of the template is used from the data (variables) to the actual visual representation (HTML code) as a means of implementation. Because the back-end is near the water floor to get the moon first (it is more convenient to get the data), so this technology is first developed in the back-end. These backend template files are active on the server, and then are rendered by the browser after complex processing. The rendering is the process of turning the static text stitched together by the server into a DOM tree.

If you want to implement a front-end implementation of MVC or MVP, those processes must change. The output of static files remains the same, especially in large companies, where the division of labor is fine enough that there are special cutting groups (mostly girls) to work them out. Then comes the set of pages, where the back-end template engine cannot be used, and the front-end template engine needs to be introduced. Because it is too easy to implement a front-end template engine, after years of development, there are many useful wheels:

Https://github.com/janl/musta...

JavaScript-based Logic-less (no logic or light logic) template.

Https://github.com/twitter/ho...

The optimized version above is produced by twitter

Https://github.com/wycats/han...

Fully compatible with mustcache syntax

Https://github.com/paularmstr...

Has more powerful template inheritance and block rewriting functions

Https://github.com/mozilla/nu...

Similar to django's template system, it can be said that the upgraded version of swig is the imperial front-end template of gitbook.

Other recommendations are ejs, which is easy to learn and use, which is very friendly and natural for people who have experience in ASP/PHP/JSP programming, but the disadvantage is that the function is a little simple.

Other doT, xtempalate, Underscore Templates.

The least recommended is jade, which is a little flashy and overdesigned, resulting in heavy workload and poor performance.

Jsx, which is popular in the era of virtual DOM, has no logical template. The main reason for the popularity of illogical or light logical templates is that the cost of modification is relatively small, there are too many self-made syntax sweets like jade, and the html taken from artists needs a lot of work and heart-breaking transformation in order to set up data. For the template, the simplest is to put some variable data in the appropriate place (fill in the blanks), and secondly, you can control the output of this area without input (if instruction), or let its region loop input multiple times (for instruction), more mandatory, to achieve template nesting each other (layout and block). There are two ways to implement if and for, one is a simple region, insert a js statement, there are if statements and for statements, the other is to use syntax sugar, such as ms-for, ms-repeat, ng-if, ng-repeat. The usage of grammatical sugar is simpler than that of using JS sentence directly, but it brings learning cost and extended function. The syntax of each template if, for instruction is different, and you want to do some processing in the loop, such as filtering some data, or suddenly interrupting somewhere, which has to quote some new statements. With the template requirements before and after sharing, there is a transmission cost, writing JS statements directly in the template is certainly no better than syntax sugar. Therefore, for all these reasons, mustache-style templates have become mainstream.

There are now three template styles:

PHP/ASP/JSP style:

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.