This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Last time we learned how to use Mustache, now let’s look at the underlying principle of Mustache. How does it actually turn data into views?

1. What steps it takes to get from data to view

The template strings are compiled into Tokens, which are then parsed into DOM strings with data

2. The concept of tokens

We know from the steps that Mustache does two things. One is to compile it into Tokens, and then combine the data and parse it into A DOM string. So what are tokens? Tokens are js representations of template strings, which are specifically represented as a JS nested array (essence). Tokens are also abstract Syntax Trees (AST), the originators of virtual nodes.

3. Observe the tokens

After all that, I still don’t see tokens. Now let’s see what Mustache Tokens look like. Modify the source nestTokens method to print out the defined variable nestedTokens before finally returning

Tokens generated from simple data

Const data = {name: name, age: 18} container = document.getelementByID ('container') const templateStr = 'my name is {{name}}, I am {{age}} years old'Copy the code

The generated tokens are as follows:

We can see that this is a nested array. The outer array is a token, and each item inside is also an array (token).

If the template is wrapped in {{}}, the template is divided into five parts. If the template is wrapped in {{}}, the template is divided into five parts. If the template is wrapped in {{}}, the template is divided into five parts. The first token (note: if it’s a tag, it’s also a text, since we’re using a string and not a DOM)

Tokens generated by nested data structures

Const data = {info: [{name: "zhang", like: [" swimming ", "travel"]}, {name: "Bill", like: [" basketball ", "football"]}}] const templateStr = ` {{# info}} < div class = "item_box" > < h2 > name: {{name}}</h2> <ul> {{#like}} <li>{{.}}</li> {{/like}} </ul> </div> {{/info}} `Copy the code

The generated tokens are as follows:

As you can see, text still represents text, but if nested, then {{#key}} to {{/key}} is a token, whose 0th entry is represented by #.

4. Can we use regular expressions to achieve tokens

The answer is no. In the simple case above, we can use regular expressions to achieve the same functionality, but if there is nested or deeper data, then regular expressions will not do the same.

As in the simple example above, we use regular expressions to implement functionality

     function render(templateStr,data) {
       return templateStr.replace(/\{\{(\w+)\}\}/g,function (a,b,c,d) {
         console.log("a",a)
         console.log("b",b)
         console.log("c",c)
         console.log("d",d)
         return data[b]
       });
    }
Copy the code

As we can see, replace takes two arguments, one is the matching data and the other is function. Function takes four arguments. Let’s print them out: **

The first argument is the data found

The second parameter is the data to be replaced

The third argument is the position of the string

The fourth argument is the entire string, which is our parameter templateStr

Let’s look at the results:

You can see that you can do simple Mustache with regular expressions, but Musatche is not done with regular expressions and can’t be done with complex logical regex.