摘要:是模板方法,他封装了子类中算法框架,它作为一个算法的模板,去指导子类以什么样的顺序去执行代码。制定算法骨架,让子类具体实现,这大概就是模板方法模式了吧
模板方法模式:
把相似的流程抽象出来作为一个父类,来封装好子类的算法框架,然后子类继承这个父类,并且可以重写非公有的方法,来实现自己的业务逻辑。
聚个栗子
泡茶泡咖啡是很好的例子,不同企业的面试流程也是一个很好的例子
对于很多大型公司,比如BATTMD ,面试过程类似,先来简单假设一下面试过程:
笔试
技术面试
HR面试
等通知
那么假如不久的将来我就要去面试了,拿即将上市的小米来举个例子(小白也有一个大厂梦啊),在JavaScript代码中意淫一下小米的面试流程
首先,定义一个小米面试的构造函数
var XiaomiInterview = function () {}
接下来,把面试的流程封装成它的方法
1.笔试
XiaomiInterview.prototype.writtenTest=function(){ console.log("看到小米的笔试题,紧张,激动~"); }
2.技术面
XiaomiInterview.prototype.technicalInterview=function(){ console.log("我是小米的前端技术负责人......"); }
3.HR面
XiaomiInterview.prototype.HRInterview = function (){ console.log("小米的HR小姐姐来面试我了,扑腾扑腾~"); }
4.等通知
XiaomiInterview.prototype.waitNotice=function(){ console.log("等得花儿都谢了,是不是凉凉了~"); }
现在代码的基本结构已经有了,再来为它初始化一个方法
XiaomiInterview.prototype.init=function(){ this.writtenTest(); this.technicalInterview(); this.HRInterview(); this.waitNotice(); }
实现它
var xiaomiInterview = new XiaomiInterview(); xiaomiInterview.init();
小米面试的基本流程如上面的代码,不管是BATTMD面试流程应该都跟这个类似,只是步骤的内容不一样,就不一一枚举了
那么不妨把流程抽象出来
接下来,就来改写一下前面的代码
首先定义一个类,就叫Interview
var Interview = function () {} //面试类
再抽象出方法
Interview.prototype.writtenTest=function(){ console.log("终于看到XX的笔试题了~"); } Interview.prototype.technicalInterview=function(){ console.log("你好,我是XX的前端技术负责人"); } Interview.prototype.HRInterview=function(){ console.log("XXHR来面试我了"); } Interview.prototype.waitNotice=function(){ console.log("到现在都不给我通知,是不是凉凉了~"); } Interview.prototype.init=function(){ this.writtenTest(); this.technicalInterview(); this.HRInterview(); this.waitNotice(); }
现在,创建一个XiaomiInterview子类来继承父类的算法框架
var XiaomiInterview = function () {} XiaomiInterview.prototype = new Interview();
发现不管面哪一家,只有“等通知,凉凉”这一步是可以复用的T.T,所以我们需要重写子类不能复用的方法
XiaomiInterview.prototype.writtenTest=function(){ console.log("看到小米的笔试题,紧张,激动~"); } XiaomiInterview.prototype.technicalInterview=function(){ console.log("我是小米的前端技术负责人......"); } XiaomiInterview.prototype.HRInterview=function(){ console.log("小米的HR小姐姐来面试我了,扑腾扑腾~"); }
现在来实例化子类的对像
var xiaomiInterview = new XiaomiInterview(); xiaomiInterview.init();
抽象出来的模板类和子类已经完成了,这里直接调用xiaomiInterview.init()方法,xiaomiInterview本身并没有init()方法,但是它继承了父类,会迎着原型链到父类中查找。
如果还想继承其他子类,比如BAT面试类代码也是一样的。Interview.prototype.init() 是模板方法,他封装了子类中算法框架,它作为一个算法的模板,去指导子类以什么样的顺序去执行代码。
回顾一下刚才的代码,这是类式写法,在JavaScript中,可以写的更佳优雅
接下来,用js风格来表示上述的模板方法模式
创建Interview函数对象作为模板方法,它能接受一个JSON对象(传入子类需要重写的方法),创建一个F函数并给F函数添加init方法调用模板中的流程,最后返回F
var Interview = function (param) { var writtenTest = param.writtenTest || function() { throw new Error("必须传writtenTest方法"); } var technicalInterview = param.technicalInterview || function() { throw new Error("必须传technicalInterview方法"); } var HRInterview = param.HRInterview || function() { throw new Error("必须传HRInterview方法"); } var waitNotice = function() { console.log("到现在都不给我通知,是不是凉凉了~"); } var F = function () {} F.prototype.init = function () { writtenTest(); technicalInterview(); HRInterview(); waitNotice(); } return F; }
重写XiaomiInterview无法复用的方法并传入到模板方法,来实现继承
var XiaomiInterview = Interview({ writtenTest:function(){ console.log("看到小米的笔试题,紧张,激动~"); }, technicalInterview:function(){ console.log("我是小米的前端技术负责人......"); }, HRInterview:function(){ console.log("小米的HR小姐姐来面试我了,扑腾扑腾~"); } });
最后一步,完成xiaomiInterview
var xiaomiInterview = new XiaomiInterview(); xiaomiInterview.init();
完整的js风格代码
var Interview = function (param) { var writtenTest = param.writtenTest || function() { throw new Error("必须传writtenTest方法"); } var technicalInterview = param.technicalInterview || function() { throw new Error("必须传technicalInterview方法"); } var HRInterview = param.HRInterview || function() { throw new Error("必须传HRInterview方法"); } var waitNotice = function() { console.log("到现在都不给我通知,是不是凉凉了~"); } var F = function () {} F.prototype.init = function () { writtenTest(); technicalInterview(); HRInterview(); waitNotice(); } return F; } var XiaomiInterview = Interview({ writtenTest:function(){ console.log("看到小米的笔试题,紧张,激动~"); }, technicalInterview:function(){ console.log("我是小米的前端技术负责人......"); }, HRInterview:function(){ console.log("小米的HR小姐姐来面试我了,扑腾扑腾~"); } }); var xiaomiInterview = new XiaomiInterview(); xiaomiInterview.init();
运行一下,查看结果,顺利完成了所有的流程
通过以上的实验,渐渐明白了,“别找我们,我们找你”这一著名的好莱坞原则描述的反向控制结构。子类放弃了对自己的控制权,而是改为父类通知子类,作为子类,只负责提供一些设计上的细节。制定算法骨架,让子类具体实现,这大概就是模板方法模式了吧
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94711.html
摘要:组件化编码的一切都是基于组件的。属性返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点,将返回属性是一个只读属性。而当变量离开环境时,则将其标记为离开环境。 第一次写面试经历,虽然之前有过一些电话面试经历,但相对而言感觉此次的经历对自己收获还是比较大,这里留下面经当作日记吧!(面试时间:2018-6-12 下午2:10;时长:50min;公司:*) 1、说说Rea...
摘要:组件化编码的一切都是基于组件的。属性返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点,将返回属性是一个只读属性。而当变量离开环境时,则将其标记为离开环境。 第一次写面试经历,虽然之前有过一些电话面试经历,但相对而言感觉此次的经历对自己收获还是比较大,这里留下面经当作日记吧!(面试时间:2018-6-12 下午2:10;时长:50min;公司:*) 1、说说Rea...
摘要:的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架,只是和他旁边的生态环境组成了一个框架,下面,贴一个官方的渐进式框架介绍图吧,方便理解。 前言 本人学习了一段时间的vue,并尝试写了一些小Demo之后,将vue投入了几个项目之后,一直在边学习边使用,经过看了vue,vuex,vue-route...
摘要:的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架,只是和他旁边的生态环境组成了一个框架,下面,贴一个官方的渐进式框架介绍图吧,方便理解。 前言 本人学习了一段时间的vue,并尝试写了一些小Demo之后,将vue投入了几个项目之后,一直在边学习边使用,经过看了vue,vuex,vue-route...
阅读 3048·2023-04-25 18:54
阅读 2569·2021-11-02 14:40
阅读 3141·2021-09-23 11:58
阅读 2407·2019-08-30 13:50
阅读 1190·2019-08-29 12:46
阅读 3100·2019-08-28 17:51
阅读 649·2019-08-26 11:47
阅读 865·2019-08-23 16:17