用预置模板降低JS代码与HTML结构的耦合

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



上面这段代码是隐藏的，添加文件时，在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结构和相应的样式即可。