巧妙的使用模板字符串生成dom元素

通常，我们拼接dom元素字符串是这样的...

function createDOM(option) {
	var dom = '<div class="preview-modal"><div class="preview-header">' 
			+ option.title + '<a href="javascript:void(0)" class="preview-btn-close" title="' + option.title + '"/>'
			+ '<a href="javascript:void(0)" class="preview-btn-close" title="' + option.title + '"/>'
			+ '</div><div class="preview-stage"><img src="' + option.src + '" alt="' + option.alt + '" class="preview-image"></div></div>';
	
	return dom;
}	

看起来似乎没有什么毛病，挺好的，但是，一旦这个dom元素数据庞大复杂一些，这种方式看起来就好比看天书...

来看看优化方案

function createDOM(option) {
	// 使用数组方式拆分标签元素并适当缩进进行格式化，看起来结构非常清晰
	var dom = [
		'<div class="preview-modal">',
			'<div class="preview-header">',
				'{#title#}',
				'<a href="javascript:void(0)" class="preview-btn-close" title="{#title#}"/>',
			'</div>',
			'<div class="preview-stage"><img src="{#src#}" alt="{#alt#}" class="preview-image"></div>',
		'</div>'
	].join(''); // [].join('')将数组进行拼接
	
	// 将title替换模板中的{#title#}
	return formateString(dom, option);
}

// 将data中的数据替换模板中的{#内容#}
function formateString(str, data) {
	return str.replace(/\{#(\w+)#\}/g, function(match, key) {
		return typeof data[key] === undefined ? '' : data[key]
	})
}

测试

createDOM({title: '标题', src: 'http://xx/xx/xx.com', alt: '提示'})

输出结果