Build your own small JavaScript template engine and javascript Template

Source: Internet
Author: User
Tags php development environment

Build your own small JavaScript template engine and javascript Template

Sometimes, we don't need a JavaScript template engine that is too powerful (such as jQuery tmpl or handlebarsjs). We just need to bind some very simple fields to a simple template, this article will use very simple tips to help you implement this small feature.

First, let's define the template we need. In the script block with id as template: frontend UI sharing

01 <!doctype html>
02
03
04    <meta charset=utf-8>
05    <title>Simple Templating</title>
06
07 <body>
08    
09   <div class="result"></div>
10    
11   <script type="template" id="template">
12     
13       <a href="{{href}}">
14         {{title}}
15       </a>
16     
17     "{{imgSrc}}" alt="{{title}}">
18   </script>
19    
20 </body>
21

Then, we need to use Ajax and other methods to obtain the required data. Here we use our own defined array for ease of display:

01 var data = [
02 {
03 title:"Knockout Application Development Guide",
04 href:"http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
05 imgSrc:"http://www.jcodecraeer.com"
06 },
07 {
08 title:"Microsoft ASP. NET site deployment guide",
09 href:"http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
10 imgSrc:"http://www.jcodecraeer.com"
11 },
12 {
13 title:"HTML5 learning notes simplified version",
14 href:"http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
15 imgSrc:"http://www.jcodecraeer.com"
16 }
17 ],

 

There are two ways to bind the data to the template. The first is a very simple hardcode method, and the second is to automatically identify variables.

First, let's look at the first method, which is to replace the value in curly braces with the value corresponding to the data to achieve the goal: front-end UI sharing

01 template = document.querySelector('#template').innerHTML,
02 result = document.querySelector('.result'),
03 i = 0, len = data.length,
04 fragment = '';
05    
06 for ( ; i < len; i++ ) {
07     fragment += template
08       .replace( /\{\{title\}\}/, data[i].title )
09       .replace( /\{\{href\}\}/, data[i].href )
10       .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
11 }
12    
13 result.innerHTML = fragment;

The second method is more flexible. It uses regular expressions to replace the values of all curly brackets without having to replace them one by one. This method is relatively flexible, however, note that the template tag may not exist in the data:

01 template = document.querySelector('#template').innerHTML,
02 result = document.querySelector('.result'),
03 attachTemplateToData;
04    
05 // Use the template and data as parameters and replace the values with the tags of the template through all the items in the data (note that the template tag is not traversed because the tag may not exist in the data ).
06 attachTemplateToData = function(template, data) {
07         var i = 0,
08             len = data.length,
09             fragment = '';
10    
11         // Traverse each item in the dataset and replace it accordingly.
12         function replace(obj) {
13             var t, key, reg;
14        
15        // Traverse all attributes of the data item, use this attribute as the key value to search for tags, and then replace
16             for (keyin obj) {
17                 reg = new RegExp('{{' + key + '}}','ig');
18                 t = (t || template).replace(reg, obj[key]);
19             }
20    
21             return t;
22         }
23    
24         for (; i < len; i++) {
25             fragment += replace(data[i]);
26         }
27    
28         return fragment;
29     };
30    
31 result.innerHTML = attachTemplateToData(template, data);

In this way, we can define the label and item attributes without restriction, without modifying JS Code.


I want to build my own php development environment. What is the common framework + template engine in the industry?

Mysql + php + apache, the template is smarty, simple and easy to use.

Open source javascript Game Engine

Game engines are divided into many types.
After HTML5 Canvas was launched on JS, many game engines, such as QuarkJS made in China, emerged one after another.
Some well-known game engines have also released JS versions, such as Box2D Web, Cocos2D, and Oak3D.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.