Mustache is “mustache” because its embedded tag {{}} spins around like a mustache, and the {{}} syntax in Vue also references mustache, which is what I’ve been learning more about.

The original JS mode transforms data into views

< ul id = "list" > < / ul > < script > var arr = [{" name ":" zhang ", "age" : 12, "sex", "male"}, {" name ":" bill ", "age" : 13, "sex" : "f"}, {" name ":" detective ", "age" : 14, "sex" : "f"}, {" name ":" Daisy ", "age" : 15, "sex", "male"},] var list = document. The getElementById (' list '); For (let I = 0; for(let I = 0; i<arr.length; I++) {list. InnerHTML + = [' < li > ', '< div class = "hd" >' + arr [I] name + '< / div >', '< div class = "bd" >', '< p > name: '+ arr [I] name +' < / p > < p > ', 'age:' + arr [I] the age + '< / p >', '< p > gender: '+ arr [I] sex +' < / p > ', '< / div >', '< / li >']. Join (' ')} / / the quotes laws - traverse array arr, each traverse a, will be added to the list for the HTML string (let I = 0; i<arr.length; I++) {list. InnerHTML + = ` < li > < div class = "hd" > ${arr [I] name} < / div > < div class = "bd" > < p > name: ${arr [I] name} < / p > < p > age: The ${arr [I]. Age} < / p > < p > gender: ${arr [I] sex} < / p > < / div < / li > `; } </script>Copy the code

The underlying principle of Mustache

To achieve this:

< script > / var/template templateStr = '< h1 > today I bought a {{thing}}, {{money}} W, is {{mood}} < / h1 >'; Var data = {thing: 'lamborghini ', money: 50, mood:' happy '}; // replace(/ you /g,' I ') with 'I' // console.log(' you are handsome, you are rich '. Replace () : $1; replace() : $1; $1 function render(templateStr, data){return templateStr. Replace (/{{(\w+)}}/g,function(findStr, $1){ return data[$1]; }); } var result = render(templateStr, data); console.log(result); </script>Copy the code

Mustache. Render (templateStr, data); TemplateStr template string, data data, render returns the populated DOM string.

The first step is to compile the tokens into template strings. The second step is to combine tokens with data and parse into DOM strings.

What is the tokens?

A nested array of JS, the JS representation of a template string.

{{thing}},{{money}}W

Tokens

[[" text ", "< h1 > I bought a"], [" name ", "thing", "text", ", "], [" name ", "money"], [" text ", "W < / h1 >"],]Copy the code

Implementation ideas: using the “data structure” stack principle, encountered # into the stack, encountered/line out of the stack; Tokens need to recursively handle small arrays of tokens with subscript 2. Go through each token of incoming tokens. If the first token is # and /, do it separately. The general idea is that when the first token iterated is #, each token iterated until the matching/is encountered is placed in a collector, which is placed in the current token as the third element.

// nestTokens.js export default (tokens) => { const nestTokens = [] const stack = [] let collector = nestTokens // ForEach (token => {switch (token[0]) {case '#': Stack. Push (token) collector. Push (token) collector = token[2] = [] // assign case break case '/': stack.pop(token) collector = stack.length > 0 ? stack[stack.length-1][2] : nestTokens break; default: collector.push(token) break } }) return nestTokens }Copy the code

Reference: juejin. Cn/post / 695424…