最近在做一个多文件上传的东东，于是研究了下Flickr的图片上传，发现一段有意思的代码：

flickr_uploader_tmpl.png
上面这段代码是隐藏的，添加文件时，在JS中可以当作模板来用：

var tmplItem = Dom.get('tmpl-upload-item'); var html = tmplItem.innerHTML.replace('%filename', file.name); html = html.replace('%filesize', getFileSize(file.size)); var newItem = document.createElement('li'); newItem.id = file.id; newItem.innerHTML = html; uploadList.appendChild(newItem);

上面的代码，仅需知道%filename和%filesize，对具体的HTML结构是完全未知的。

按照传统的处理方式，可能得这么写：

var newItem = document.createElement('li'); newItem.id = file.id; var nameEl = document.createElement('div'); nameEl.appendChild(document.createTextNode(file.name)); Dom.addClass(nameEl, 'name'); newItem.appendChild(nameEl); var sizeEl = document.createElement('div'); ... newItem.appendChild(sizeEl); uploadList.appendChild(newItem);

与传统的处理方式相比，预置模板好处很明显：JS代码不需要知道具体的HTML结构，耦合性更低。当不涉及功能性的界面改变，仅需改变预置模板的HTML结构和相应的样式即可。