在編程中總是會遇見很多動態產生的東西，一般我們都是通過簡單的html拼接起來的
function createHtml(name, phone, addr, email, imageSrc){ var html = ''; html += '<div class=personInfo>' html += '<p>Name: ' + name + '</p>'; html += '<p>Phone: ' + phone + '</p>'; html += '<p>Addr: ' + addr + '</p>'; html += '<p>Email: ' + email + '</p>'; html += '<img src="' + imageSrc + '">'; html += '</div>' return html; }
<script type="template" id="template"> <h2> <a href="{{href}}"> {{title}} </a> </h2> <img src="{{imgSrc}}" alt="{{title}}"></script>
function replace(obj){ var t, key, reg; for(key in obj){ reg = new RegExp('{{' + key + '}}', 'ig'); t = (t || template).replace(reg, obj[key]); } return t; }
<!doctype html><html><head> <meta charset=utf-8> <title>Simple Templating</title></head><body> <div class="result"></div> <script type="template" id="template"> <h2> <a href="{{href}}"> {{title}} </a> </h2> <img src="{{imgSrc}}" alt="{{title}}"></script><script type="text/javascript"> var data = [ { title : 'php web appliaction', href : 'http://www.baidu.com', imgSrc : 'http://www.baidu.com' }, { title : 'js 權威指南', href : 'http://www.qq.com', imgSrc : 'http://www.qq.com' }]; var template = document.querySelector('#template').innerHTML, result = document.querySelector('.result'); function _template(template, data){ var i = 0, len = data.length, fragment = ''; function replace(obj){ var t, key, reg; for(key in obj){ reg = new RegExp('{{' + key + '}}', 'ig'); t = (t || template).replace(reg, obj[key]); } return t; } for(; i < len; i++){ fragment += replace(data[i]); } return fragment; } console.log(_template(template, data));</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
