This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

At the beginning of learning VUE, I have been thinking why in<span> Message: {{ msg }} </span>{{}} (MSG) {{}} (MSG); What is the underlying principle? Why do you need this syntax? After all, Vue’s website simply states that textual interpolation using Mustache grammar (double braces). So I went to look up Mustache grammar and found that Mustache is not vue’s exclusive grammar, it predates Vue.js, and there are other frameworks that use Mustache grammar

1. What is a template engine

The JavaScript template engine is the most elegant solution for turning data into views without separating the data from the interface (so far, remind me of any better ones in the comment section below 😂)

2. Introduction of Mustache

Mustache translates to Mustache in Chinese, only because {{}} looks a lot like a human beard (I stayed 😱). It is a template syntax with no logic. It has only tags and no logic (light logic), including if else judgments or for loops. Because it is a template engine based on javascript implementation, you can use the Mustache template engine where you can use javascript. This includes a Web browser, a server environment (node). There are also many frames that use Mustache (e.g. Vue.js) and package it optimizes (e.g. V-for in Vue.js, you can’t use the for loop in Mustache)

3. Historical change: a plan to turn data into views

As the saying goes no contrast no harm, since we say Mustache is good, so what is it really good about? Let’s compare it with the previous scheme, 🌰, to achieve the following effect

1. Pure DOM method

Try writing it once in a pure DOM way (it’s a long code, so bear with me).

<div id="container">< div> <script> const data = [{title: '英 文 ', name:' 英 文 ', address: '英 文 ', passive: },{title: 'Blind Monk introduction ', name:' Li Qing ', address: 'Ionia ', passive: '40% Attack Speed bonus ', qSkill:' Soundwave/Echo ', wSkill: 'Camellia/Iron ', eSkill:' Thunder/Bone ', rSkill: }] const container = document.getelementById ('container') const len = data.length for (let I = 0; i < len; i++) { const item = data[i] const item1 = document.createElement('div') item1.className = 'item_box' const info1 = document.createElement('h1') info1.innerText = item.title const hName = document.createElement('h2') hName.innerText = +item.name const aName = document.createElement('h2') aname.innertext = 'location: '+item.address const UI1 = document.createElement(' UI ') const qli1 = document.createElement('li') qli1. InnerText =' passive: '+item.passive const qli2 = document.createElement('li') qli2. InnerHTML = 'q: '+ item.qskill const qli3 = document.createElement('li') qli3. InnerText = 'w: '+ item.wskill const qli4 = document.createElement('li') qli4. InnerText = 'e: '+ item.eskill const qli5 = document.createElement('li') qli5. InnerText = 'r: '+item.rSkill item1.appendChild(info1 ) item1.appendChild(hName ) item1.appendChild(aName ) ui1.appendChild(qli1) ui1.appendChild(qli2) ui1.appendChild(qli3) ui1.appendChild(qli4) ui1.appendChild(qli5) item1.appendChild(ui1) container.appendChild(item1) } </script>Copy the code

As you can see, we need to get the DOM nodes by id, create a for loop that corresponds to each node with the data, and then pass+Cut off the connection data, the created nodes are orphan nodes, we also need to manually append to the parent node.

2. Array join method

<script> const container = document.getElementById('container') const len = data.length for (let i = 0; i < len; i++) { const item = data[i]; Container. InnerHTML + = [' < div class = "item_box" > ', '< h1 >' + item. The title + '< / h1 >', '< h2 > name: + item. The name +' < / h2 > ', '< h2 > location: '+ item. The address +' < / h2 > < ul > ', ' ', '< li > passive:' + item. Passive + '< / li >', '< li > q:' + item. QSkill + '< / li >', '< li > w: '+ item. WSkill +' < / li > ', '< li > e:' + item. ESkill + '< / li >', '< li > r: '+item.rSkill+'</li>', '</ul>', '</div>', ].join('') } </script>Copy the code

Since double quotes are not newlines, we treat each line as if it were an item in the array and then join it to form a string. And in each of these terms we can pass+“Method to cut links to the content we need to fill in. It’s much simpler than a pure DOM approach

3. Es6 backquotes

In ES6, we added a new backquote, which is a newline so we don’t have to put it in an array and then convert it to a string. And with the addition of the ${} syntax sugar, we can also break connection strings without +.

for (let i = 0; i < len; <h1>${item.title}</h1> <h2> . ${item name} < / h2 > < h2 > location: ${item. The address} < / h2 > < ul > < li > passive: ${item. Passive} < / li > < li > q: ${item. QSkill} < / li > < li > w: The ${item. WSkill} < / li > < li > e: ${item. ESkill} < / li > < li > r: ${item. RSkill} < / li > < / ul > < / div > `}Copy the code

4. Let’s summarize some of the methods that have been used to convert data into views, and you can see that the amount of code for developers is gradually decreasing:

1. The need to create a pure DOM method and appended to the parent node (optimal performance, because the join in the middle of an array or backquotes method after parsing is complete or DOM manipulation is required, but too much trouble for developers, the performance difference is not particularly big, or unnecessary to this performance and spend a lot of time in operating the DOM)

2. Because the innerHTML property sets or returns the HTML between the start and end tags of a table row, the HTML must be of string type. We write directly, if it is a more complex structure we have to write in a line, so can’t see the structure is unfavorable to development, why can’t break but the array of double quotation marks can, and can be converted to a string array through the join method, thus the problem solved the double quotation marks, string and can get through it+Concatenation, so we concatenate the HTML string in the loop (appellate example)

Figure 1: Line breaks in double quotes we can see an obvious error message:

Figure 2: Newlines through an array

3. The new backquotes in ES6 can be newlines, so we don’t need to convert to strings through arrays, andThe ${}Can replace+Break the connection string

Figure 3: Backquote wrapping: