如何应用模板模式在现有的代码中

先上代码

var formatString = function(str,data){
				return str.replace(/\{#(\w+)#\}/g,function(match,key){
					return typeof data[key] === undefined ?  '' : data[key]
				});
			}



			self.each(function(){
				_this = $(this);
				//_html = '<div class="'+iset.iSelectBox+'"><div class="'+iset.iSelectCurrent+'" style="width:'+iset.width+'px">'+self.find('option:selected').text()+'</div><dl class="'+iset.iSelectOption+'" style="display:none; z-index:9999; width:'+iset.width+'px;">';
				//模板模式start
				var tpl = {
					d : [
						'<div class="{#iselectbox#}">',
							'<div class="{#iselectcurrent#}" style="width:{#width#}px">',
								'{#text#}',
							'</div>',
							'<dl class="{#iselectoption#}" style="display:none; z-index:9999; width:{#width#}px;">'

					].join('')
				}
				var idata = {
					iselectbox:iset.iSelectBox,
					iselectcurrent:iset.iSelectCurrent,
					width:iset.width,
					text:self.find('option:selected').text(),
					iselectoption:iset.iSelectOption
				}
				console.log(idata);
				_html += formatString(tpl['d'],idata);
				//模板模式end

 主要应用在字符串拼接的应用中，这样可以减少以前经常出现的拼接错误，格式比较清晰吧。

 

示例二

var viewCommand = (function(){
    var tpl = {
        product:[
            '<div>',
                '<img src="{#src#}">',
                '<p>{#text#}</p>',
            '</div>'
        ].join(''),
        title:[
            '<div class="title">',
                '<div class="main">',
                    '<h2>[#title#]</h2>',
                    '<p>[#tips#]</p>',
                '</div>',
            '</div>'
        ].join('')
    }
    var html = '';

    var formatString = function(str,data){
        return str.replace(/\{#(\w+)#\}/g,function(match,key){
            return typeof data[key] === undefined ?  '' : data[key]
        });
    }

    var ss = formatString(tpl['product'],{src:'www.baidu.com',text:'aaaaa'});
    //alert(ss);


    //方法集合
    var Action = {
        create:function(){

        },
        display:function(){

        }
    }
    return function excute(){

    }

})();