资讯专栏INFORMATION COLUMN

javascript设计模式学习日记--模板方法模式

jsdt / 2531人阅读

摘要:是模板方法,他封装了子类中算法框架,它作为一个算法的模板,去指导子类以什么样的顺序去执行代码。制定算法骨架,让子类具体实现,这大概就是模板方法模式了吧

模板方法模式:

把相似的流程抽象出来作为一个父类,来封装好子类的算法框架,然后子类继承这个父类,并且可以重写非公有的方法,来实现自己的业务逻辑。

聚个栗子

泡茶泡咖啡是很好的例子,不同企业的面试流程也是一个很好的例子
对于很多大型公司,比如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...

    warkiz 评论0 收藏0
  • 我的前端面试日记(一)

    摘要:组件化编码的一切都是基于组件的。属性返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点,将返回属性是一个只读属性。而当变量离开环境时,则将其标记为离开环境。 第一次写面试经历,虽然之前有过一些电话面试经历,但相对而言感觉此次的经历对自己收获还是比较大,这里留下面经当作日记吧!(面试时间:2018-6-12 下午2:10;时长:50min;公司:*) 1、说说Rea...

    zhunjiee 评论0 收藏0
  • Vue学习日记(一)——Vue介绍

    摘要:的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架,只是和他旁边的生态环境组成了一个框架,下面,贴一个官方的渐进式框架介绍图吧,方便理解。 前言 本人学习了一段时间的vue,并尝试写了一些小Demo之后,将vue投入了几个项目之后,一直在边学习边使用,经过看了vue,vuex,vue-route...

    王晗 评论0 收藏0
  • Vue学习日记(一)——Vue介绍

    摘要:的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架,只是和他旁边的生态环境组成了一个框架,下面,贴一个官方的渐进式框架介绍图吧,方便理解。 前言 本人学习了一段时间的vue,并尝试写了一些小Demo之后,将vue投入了几个项目之后,一直在边学习边使用,经过看了vue,vuex,vue-route...

    MasonEast 评论0 收藏0

发表评论

0条评论

jsdt

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<