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
05 |
<title>Simple Templating</title> |
09 |
<div class="result"></div> |
11 |
<script type="template" id="template"> |
17 |
"{{imgSrc}}" alt="{{title}}"> |
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:
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" |
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" |
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" |
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, |
06 |
for ( ; i < len; i++ ) { |
08 |
.replace( /\{\{title\}\}/, data[i].title ) |
09 |
.replace( /\{\{href\}\}/, data[i].href ) |
10 |
.replace( /\{\{imgSrc\}\}/, data[i].imgSrc ); |
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'), |
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) { |
11 |
// Traverse each item in the dataset and replace it accordingly. |
12 |
function replace(obj) { |
15 |
// Traverse all attributes of the data item, use this attribute as the key value to search for tags, and then replace |
17 |
reg = new RegExp('{{' + key + '}}','ig'); |
18 |
t = (t || template).replace(reg, obj[key]); |
24 |
for (; i < len; i++) { |
25 |
fragment += replace(data[i]); |
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.
