国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

jsdt / 2573人閱讀

摘要:是模板方法,他封裝了子類中算法框架,它作為一個算法的模板,去指導子類以什么樣的順序去執行代碼。制定算法骨架,讓子類具體實現,這大概就是模板方法模式了吧

模板方法模式:

把相似的流程抽象出來作為一個父類,來封裝好子類的算法框架,然后子類繼承這個父類,并且可以重寫非公有的方法,來實現自己的業務邏輯。

聚個栗子

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

運行一下,查看結果,順利完成了所有的流程

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/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元查看
<