js设计模式-(模版方法模式)

js设计模式-(模版方法模式)

有些时候我们会感叹日子过的多么平淡无奇，就像pm瑞瑞一样总觉得每天要做的需求都是repeat～。在js中如果我们也遇到了这样的问题，那你该注意了，很通俗的一句话来说，就是避免不必要的资源开销与资源浪费，把共性与异同区别开来，实现代码的简易管理方式。哈哈，这个就是我们今天要看的模版方法模式的自我评价。定义如下

模版方法模式：（Template Method），父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。

我们总是会选择最简单的方式去理解一个问题的本质。所以呢，我们的pm瑞瑞来了。首先恭喜瑞瑞晋升为m级的高级产品经理，现在有了5个中级pm作为他团队中的一部分，今天是团队成立的第一天，pm特意搞了个仪式，叫做相知，也就是认识认识团队中的人嘛。流程是这样的，先跟他说“瑞瑞你好”，然后跟组员说“＊＊你好”，酱紫。代码如下：

;(function(window,undefined){
	var OrgTpl = {
		pmRui : function(){
			console.log('文瑞哥哥好');
		},
		pmPartner : function(){
			throw new Error('请重写该方法～');
		},
		init : function(){
			this.pmRui();
			this.pmPartner();
		}	
	};
	window.OrgTpl = OrgTpl;
})(window);

我们定义了一个原始模版，拥有向文瑞问好和向组员问好的方法，接下来我们看看组员1该怎么写，代码如下：

var PartnerOne = function(){
	OrgTpl.pmPartner=function(){
		console.log('**你好')
	}
	OrgTpl.init();

};

执行看看效果：

PartnerOne();
//文瑞哥哥好
//**你好

哈哈，所谓老大控制方向，小弟做好本职～，接下来我们看看这个例子。

我们都会写导航什么的，这里我们就可以用到模版方法处理。首先基础代码如下：

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

var Nav = function(data){
	var _this = this;
	_this.item = '<li><a href="{#hrefUrl#}" title="{#title#}" {#sign#}>{#content#}</a></li>';
	_this.html = '<ul>';
	for(var i=0,l=data.length;i<l;i++){
		_this.html += formateStr(_this.item,data[i]);
	}
	_this.html+='</ul>';
	return _this.html;
}

我们定义了一个转换字符串的函数formateStr，然后在Nav中的item中定义了我们的data的key值有，hrefUrl，title，sign和content，然后我们组装输出。然后我们在页面使用一下，代码如下：

var objNav = document.getElementById('nav');
objNav.innerHTML = Nav([
	{
		hrefUrl : 'http://www.baidu.com',
		content : '百度一下'
	},
	{
		hrefUrl : 'http://www.zhihu.com',
		content : '知乎一下'
	}
]);

页面输出后，html结构如下图：

接下来我们要做一个带提示消息的导航，我们可以这么写，代码如下：

var infoNav = function(data){
	var _this = this;
	_this.info = '<i>{#num#}</i>';
	for(var i=data.length-1;i>=0;i--){
		data[i].content += formateStr(_this.info,data[i]);
	};
	return Nav.call(this,data);
};

这里我们给data又定义了一个属性num，重新组装了content内容后返回给Nav去执行最后模版组装操作，使用方式如下：

var objNav = document.getElementById('nav');
objNav.innerHTML = infoNav([
	{
		hrefUrl : 'http://www.baidu.com',
		content : '百度一下',
		title : '百度',
		num : '10',
		sign : 'sign="1"'
	},
	{
		hrefUrl : 'http://www.zhihu.com',
		content : '知乎一下',
		title : '知乎',
		num : '10',
		sign : 'sign="2"'
	}
]);

此时页面输出html如下图：

就酱紫我们完成了对基础导航的二次改装，但是所需要的代码量明显减少，只是针对之前的基础导航做了数据调整。

让我们在想想这个模式，父类中定义算法骨架，子类中实现和改变一些算法～。我的理解就是去掉累赘的代码，不是把父类抽象，而是把它当作实际需求中的原始需求处理～，这样说貌似就好理解了。哈哈，收尾的时候我们再把pm瑞瑞的属性改一改，叫做中级产品经理可好，哈哈～

来源：转载。