###
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <!--@2018-6-15号--> <div id="product"> </div> <script> function viewCommand(msg) { var tp1 = { product: [ '<div>', '<img src="{#src#}"/>', '<p>{#text#}</p>', '</div>'].join(''), title: [ '<div class="title">', '<div class="main">', '<h2>{#title#}</h2>', '<p>{#tips#}</p>', '</div>', '</div>'].join('') }; html = ""; function formateString(str, obj) { return str.replace(/{#(w+)#}/g, function (match, key) { return obj[key]; }); }; var Action = { create: function (data, view) { if (data.length) { for (var i = 0, len = data.length; i < len; i++) { html += formateString(tp1[view], data[i]); } } else { html += formateString(tp1[view], data); } }, display: function (container, data, view) { if (data) { this.create(data, view); } document.getElementById(container).innerHTML = html; html = ''; } }; msg.param = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param]; Action[msg.command].apply(Action, msg.param); }; var productData = [ { src: 'command/02.jpg', text: '绽放的桃花' }, { src: 'command/03.jpg', text: '阳光下的温馨' }, { src: 'command/04.jpg', text: '镜头前的绿色' } ], titleData = { title: '夏日的一片温馨', tips: '暖暖的温情带给人们家的感受' }; //viewCommand({ // command: 'create', // param: [{ // src: 'command/01.jpg', // text: '迎着朝阳的野菊花' // }, 'product'] //}); viewCommand({ command: 'display', param: ['product', productData, 'product'] }); </script> </body> </html>