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

小鱼儿 2023-03-14 08:04 13阅读 0赞

通常，我们拼接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: '提示'})

输出结果

![20200516163832180.png][]

[20200516163832180.png]: /images/20230312/7a19ae0b293c4c1fa6cf2003ef132113.png