JavaScript Simple Implementation Template engine example

I. BACKGROUND

There are two major projects from the RD side of the migration, because the initial project FE unmanned follow-up, so are the backend students directly with Smarty to complete the front-end part; So considering the cost of migration and solution, simply upgrade the current JS template engine.
II. General Programme

Support Extends tags

Support Block Tags

1. Label syntax

In order to facilitate template lexical analysis, after the template left delimiter plus @ to identify, the label name replaced by the property set, such as extends tag:

<%@ extends= "layout/layout.html"%>

2, extends implementation plan

Replaces the entire extends label with the contents of its specified parent template

3. Block Implementation Plan

First of all understand the concept of block: In the parent template layout.html dug in advance of the pit, the child template to block implementation, like Radish, the last rendering, is a radish a pit fill.

This makes things much better, you can compile the definition of block into a call to a JS function, assuming that the definition of block in the parent template is:
<%@ block= "Block_header"%>
It can eventually be compiled into:
Block_header ();
4, Block advanced: The parent template supports default content

Block in Smarty is supported by default content, such as: (In order to Smarty and JS template engine area, the following with <& and &> respectively to identify the smarty delimiter)
<&block name= "Block_header" &>
<div class= "X-header" >
...
</div>
<&/block&>

Then, we can correspond in the JS template engine support the following format:

<% block= "Block_header" {%>
<div class= "X-header" >
...
</div>
<%}%>

Yes, with a relatively speculative {and} enclosing the block default, compile, compile the block_header into a function, to avoid naming conflicts with the block implementation (also a function) in the child template. So add a parent ID to the block name definition in the parent template, such as:
function Block_header__parent_ () {
__html + = ' <div class= ' x-header ' >\n ';
__html + = ' \t...\n ';
__html + = ' </div\n> ';
}
Thus, if the block's (function) is not implemented in the child template, then this blockx__parent method can be executed directly. The final look is almost like this:
Block_header__parent_ ();
function Block_header__parent_ () {
__html + = ' <div class= ' x-header ' >\n ';
__html + = ' \t...\n ';
__html + = ' </div\n> ';
}

5, Block Advanced: Sub-template has block implementation, and even set prepend, append mode

The title, assuming that the child template has the implementation of the block, you can use function to solve, such as:

<%function Block_header () {%>
I'm the header.
<%}%>
Then, according to Smarty's understanding, the block of the parent template should be overridden by the block in the child template, so the definition of the parent template block can be compiled as:

Block_header ();
function Block_header__parent_ () {
__html + = ' <div class= ' x-header ' >\n ';
__html + = ' \t...\n ';
__html + = ' </div\n> ';
}

For the prepend schema defined in Smarty, the block is inherited, such as:

<&block name= "Block_header" prepend &>
I'm the header.
<&/block&>
We can simply simulate this:
<%function Block_header (prepend) {%>
I'm the header.
<%}%>

Yes, it is solved by adding prepend parameters to Block_header. For this form, the definition of a parent block can be compiled as:

Block_header ();
Block_header__parent_ ();
function Block_header__parent_ () {
__html + = ' <div class= ' x-header ' >\n ';
__html + = ' \t...\n ';
__html + = ' </div\n> ';
}

Similarly, for Append mode, we can compile it into:

Block_header__parent_ ();
Block_header ();
function Block_header__parent_ () {
__html + = ' <div class= ' x-header ' >\n ';
__html + = ' \t...\n ';
__html + = ' </div\n> ';
}

6, Block advanced: Multilevel Inheritance (layout.html←middle.html←child.html)

Progressive prepend or append seemingly not good whole, but can be transformed under the idea, using the block in the Smarty form, such as:
<&block name= "Block_header" &>
I'm the header.

<&block name= "Block_header_inner" &>
I'm inner.
<&/block&>
<&/block&>

Therefore, in the middle.html, you can first realize Block_header, and then continue to dig within its definition block_header_inner, such as:

<%function Block_header () {%>
I'm the header.
<%@ block= "Block_header_inner"%>
<%}%>
In this way, only the Block_header_inner in the middle.html can be implemented in the child.html of the child template:
<%function Block_header_inner () {%>
I'm a inner in a child template.
<%}%>

7, how to ensure that the child template does not appear in the parent template undefined things?

This is a must to ensure that this can be done simply: in the place where the extends label is replaced, Force plus:
return __html;

Third, practice

1, layout.html

<!doctype html>
             <meta charset= "UTF-8"
        <title>Document< /title>
        <body>
                     <%@ block= "Block_header"%>
       

<section>
<%@ block= "Block_content" {%>
<div>
This is the content of the parent layout.
</div>
<%}%>
</section>

<footer>
<%@ block= "Block_footer"%>
</footer>
</body>

2, child.html

<%@ extends= "layout.html"%>

<%function block_content (prepend) {%>
I am the content of the child template
<%}%>

<%function Block_footer () {%>
I'm a footer in a child template.
<%}%>

I'm the extra content in the sub template
3, the intermediate file after compiling

/*--/users/zhaoxianlie/sourcecode/biz/trunk/demo/views/child.html--*/
exports.html = function ($_ROOT) {
    return function ($_data) {
        var __html = ';
         __html + = ';
        __html + = ' <!doctype html>             ' <meta charset= "UTF-8" > <title> Document</title> ' +
            '

        __html + = '         block_content ();
        Block_content__parent_ ();
        function Block_content__parent_ () {
             __html + = ' <div> Here is the contents of the parent layout </div> ';
       }
        __html + = ' </section> <footer> ';
        Block_footer ();
        __html + = ' </footer> </body>         return __html;

In fact, the story here is over ...
__html + = ';
function Block_content (prepend) {
__html = ' I am the content of the child template ';
}
__html + = ';
function Block_footer () {
__html = ' I am the superfluous content in the child template ';
}
__html + = ' haha ';
return __html;
};
};
4, after the operation

I am the content of the child template
This is the content of the parent layout.
I'm a footer in a child template.

This is almost the same thing, so the principle, after the Smarty project will be good migration.