javaScript设计模式——模板方法模式

模板方法模式是一种只需继承就可以实现的非常简单的模式。模板方法模式由2部分组件:第一部分是抽象父类,第二部分是具体的实现子类。
那么:通常情况下抽象父类封装了子类的算法框架,包括一些公共的方法以及封装了子类中所有方法的执行顺序。子类通过继承这个抽象类,也继承了整个算法的结构,并且可以选择重新写父类的方法。
在模板方法里,子类实现的相同部分可以被移到父类中,而将不同的部分留在子类内部。
如下的代码就是用函数来封装了一个怎么泡咖啡和怎么泡茶的一个父类过程。**子类必须重写brew,pourIncup ,addCondiments函数,如果没有重写可抛出一个异常来解决提示程序员;**并且boilWater函数是共同的方法。
在Beverage类中,其实所谓的模板方法是F函数----F.prototype.init

var Beverage=function(param){
			var boilWater=function(){
				console.log('把水煮沸')
			};
			var brew=param.brew||function(){
				throw new Error('必须传递brew方法')
			};
			var pourIncup =param.pourIncup ||function(){
				throw new Error('必须传递pourIncup方法')
			};
			var addCondiments=param.addCondiments ||function(){
				throw new Error('必须传递addCondiments方法')
			};
			var F=function(){};
			F.prototype.init=function(){
				boilWater();
				brew();
				pourIncup();
				addCondiments();
			}
			return F;
		}

那么模板方法模式的运用场景是在哪呢?在web开发中,其实有很多运用到模板方法模式,比如我们渲染一个UI组件。
1、初始化一个div,
2、获取数据,
3、把数据渲染到div里面,完成组件构造,
4、通知渲染完毕。
其实我们现在的用的vue框架,react框架也是一种模板方法模式的运用。那么可能有人会问,那那些钩子函数如何解释呢?
其实模板方法也可封装这个钩子。比如有人喝咖啡想加糖有人不想加。那么可编写一个hook,放在所谓的模板方法里,然后子类可以重写这个hook。
好莱坞原则:
允许底层组件将自己挂钩到高层组件中,而高层组件会决定什么时候、以何种方式去使用这些底层的组件。模板方法模式就是一种好莱坞原则的典型运用场景。意味着子类放弃对自己的控制权,把控制权交给父类。
1、模板方法模式
2、订阅发布模式
3、回调函数
都是好莱坞原则的典型运用场景,把控制权交给别人,而不是自己本身的函数。可以理解成:
“你别调用,我们会调用你”

猜你喜欢

转载自blog.csdn.net/Miss_hhl/article/details/103703086