javascript設計模式學習日記--模板方法模式

模板方法模式：

把類似的流程抽象出來做爲一個父類，來封裝好子類的算法框架，而後子類繼承這個父類，而且能夠重寫非公有的方法，來實現本身的業務邏輯。

---

聚個栗子

泡茶泡咖啡是很好的例子，不一樣企業的面試流程也是一個很好的例子
對於不少大型公司，好比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();

運行一下，查看結果，順利完成了全部的流程

經過以上的實驗，漸漸明白了，「別找咱們,咱們找你」這一著名的好萊塢原則描述的反向控制結構。子類放棄了對本身的控制權，而是改成父類通知子類，做爲子類，只負責提供一些設計上的細節。制定算法骨架，讓子類具體實現，這大概就是模板方法模式了吧