<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <div id='title'></div> <div id='product'></div> </body> <script language="javascript" src="test.js" ></script> </html>
// JavaScript Document var viewCommand= (function(){ var tpl= { product :[ '<div>' , '<img src ="{#src#}"/> ', '<p>{#text#}</p> ', '</div>' ].join(''), title :[ '<div class="main">', '<h2>{#title#}</h2>', '<p>{#tips#}</p>' , '</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(tpl[view],data[i]); } } else { html+=formateString(tpl[view],data ); } }, display : function (container,data,view){ if(data){ this.create(data,view); } document.getElementById(container).innerHTML=html; html=''; } } return function excute(msg){ 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 :'display', param : ['title',titleData,'title'] }) viewCommand({ command :'create', param : [ { src : 'command/01.jpg', text :'01 绿色' },'product'] }) viewCommand({ command :'display', param : ['product',productData,'product'] })
