Test JavaScript template mustache

Night to deep, people are not sleeping, should have fallen asleep, but every weekend, boring, so this essay sent time -----------

A few days ago, I was bored. I tried the mustache template of the Javascript version and said it was a test. In fact, the main purpose is to read and learn its source code. If you just want to learn how to use it, I believe that in addition to some help for your actual development, writing a few small demos should be meaningless (although I am doing this now. PS: Okay, I am wrong ). To put it bluntly, it was previously called the Javascript version because it must have other versions. If you want to know other language versions, click here at http://mustache.github.com/ to transfer you over.

Today, other versions will not be studied. Just try the Javascript version. You may wonder, what is this template? Don't worry. Please read it slowly.

I. Why templates are required at the front end?

As the Internet front-end pages become more complex and interactive, the requirements for front-end pages become increasingly high. Of course, this article mainly refers to the front-end JavaScript. XX years ago, I remember when I was still at school. At that time, JavaScript was like a toy. I was warned more than once that JavaScript only adds special effects to webpages, and many browsers didn't support it enough, I still don't know the specifics. It is to persuade people not to spend too much time on it. At that time, it was true. How can we know that the world has changed so fast? Does JavaScript develop so far? I accidentally pulled it far again. Hey hey, come back. In fact, if you are developing a page, you need to load something through Ajax, for example, a list of user information sent from the background. Assume the structure is as follows:

1 {"users":[{"name":"sam","age":14},{"name":"jack","age":24},{"name":"lucy","age":19}]}

 

In the past, we used to parse the JSON object sent from the background. For example, we used to iterate every item in the user list, and then splice and add the required tags and styles through JS strings, finally, add it to the page dynamically. This is certainly not a problem, but it is a bit difficult to write, because you have to spell strings once, but in fact this is not the focus, the most important thing is that maintenance is inconvenient. If you need to change the display format, you have to change the labels and splice them one by one, every time I see a bunch of JavaScript code mixed with HTML, I feel dizzy. To solve this problem, a large number of templates emerged. Typical examples are jquery's template plugin, kissytemplate, arttemplate, and mustache. We will not discuss the advantages and disadvantages among them. If you are interested, you can test the performance by yourself. Since the template can make it easy to solve the above problems, how can mustache be handled and how can it be used?

Ii. How to Use mustache

First, download mustache and execute NPM install mustache (node. js and NPM must be installed on the computer. If you do not want to download and install mustache, go to https://github.com/janl/mustache.jsdownload)

After the download is complete, open and check the mustache. js file. There are about 600 lines of code, which is quite concise. The starting part of the screenshot is as follows:

After reading it, the header obviously supports the commonjs and AMD specifications. That is to say, node. js can also use it as a template engine, which is great, although it has not been tried yet.

After reading the official website, the main feature of mustache is logic less templates, which means that there is no logic or few logic in the template. After all, the template is just a view and does not require too much logic code. It mainly transmits variables through the {} symbol (this may not be scientific, but it is generally understandable ). Let's take a look at a simple example:

There is a people object, which has three attributes, one of which is a function. The use of mustache is very simple, and only mustache is needed for calling. you can use the render (temp, OBJ) function. The first parameter is the template you wrote, and the second parameter is the object you need to render to the template. Finally, the rendered string is returned. Here, we finally write it into the DIV tag of the HTML document.

When you see this, you should be able to understand the template rendering object, extract the attribute value and render it to a specific position of the template. It can be understood as: {key }}= "value.

Here is just a simple rendering of an object. What should I do for the list object proposed at the beginning of the article? Example:

Using {# listkey} in the template }}

{/Listkey }}

Key of each item in the intermediate package list

{{# Listkey }{{# itemkey }}{{/listkey }}

In this way, the template engine automatically iterates each item and renders it to the template. Isn't it easy. Of course, the above is only the most basic usage. The more complex usage and its internal mechanism will not be written today. It is too late to write that the sky is shining, or you should first go to bed zzz.