快捷導(dǎo)航

JavaScript設(shè)計(jì)模式之外觀模式介紹

更新時(shí)間：2014年12月28日 09:23:38 投稿：junjie

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之外觀模式介紹,外觀模式是用于由于子系統(tǒng)或程序組成較復(fù)雜而提供的一個(gè)高層界面接口,使用客戶端更容易訪問(wèn)底層的程序或系統(tǒng)接口,需要的朋友可以參考下

外觀模式說(shuō)明

說(shuō)明：外觀模式是用于由于子系統(tǒng)或程序組成較復(fù)雜而提供的一個(gè)高層界面接口，使用客戶端更容易訪問(wèn)底層的程序或系統(tǒng)接口;

外觀模式是我們經(jīng)常使用遇到的模式，我們經(jīng)常涉及到的功能，可能需要涉及到幾個(gè)子接口或子系統(tǒng)，而我們的某個(gè)功能，可能只需要這向個(gè)多個(gè)子接口中的一個(gè)或幾個(gè)組成的順序封裝。如果是業(yè)務(wù)功能直接對(duì)應(yīng)子接口或子系統(tǒng)的，可能要求開(kāi)發(fā)人員對(duì)內(nèi)部需要相當(dāng)?shù)牧私?；你可能需要去了解業(yè)務(wù)流程是怎么走，他的順序是什么，等等。這即需要開(kāi)發(fā)員了解業(yè)務(wù)，也使得客戶端編程變得相當(dāng)?shù)膹?fù)雜；

這里如果有一層，或是一個(gè)類，專門提供好封裝好我們要使用的方法，客戶端功能只需要與這個(gè)中間層類交互，中間層類的相應(yīng)方法有了解業(yè)務(wù)的相關(guān)開(kāi)發(fā)人員組織封裝，那么程序?qū)⒆兊梅浅５暮?jiǎn)單，程序員只需要知道他這個(gè)功能所需要對(duì)應(yīng)方法是哪個(gè)即可，也不用知道內(nèi)部的邏輯。

這個(gè)中間層類就是我們說(shuō)的外觀類，這就是外觀模式的思想。

場(chǎng)景實(shí)例:

1>. 比如總開(kāi)關(guān)的例子，這個(gè)總開(kāi)關(guān)，可以控制家里的大門的一盞燈，大廳的幾盞燈，并控制著家電視機(jī)，電冰箱等的供電，你把哪個(gè)小按鈕按上“ON”，哪個(gè)就有了電，甚至直接發(fā)光輸熱，你不必知道，這總開(kāi)關(guān)上的按鈕是怎么出來(lái)電的，或是怎么按制到相關(guān)電器的，反正直接壓上就來(lái)電了。

這些個(gè)電燈，電視機(jī)等就是我們要使用的接口，小系統(tǒng)；這個(gè)總開(kāi)關(guān)就是我們的外觀類，我們直接面對(duì)它操作即可。

2>. 還好比一個(gè)公司，有好幾個(gè)職能部門，老板哪一天需要各方面工作的執(zhí)行情況了，他就跑去一個(gè)個(gè)部門內(nèi)部，問(wèn)個(gè)員工說(shuō)這個(gè)某某事情辦得怎么樣了，如果問(wèn)對(duì)人了能直接給老板答案，要是不是這個(gè)人負(fù)責(zé)的，他還會(huì)跟老板說(shuō)，哦，這事是誰(shuí)誰(shuí)負(fù)責(zé)的，老板還得跑去問(wèn)下那人，多麻煩。

如果每個(gè)職能部門設(shè)個(gè)主管負(fù)責(zé)人，老板直接去找它了解情況就可以了，老板也不用關(guān)心這個(gè)負(fù)責(zé)人是怎么知道這些的，他只要想了解的這么1,2,3件事情的情況跟進(jìn)展即可。

實(shí)例源碼

現(xiàn)在按第二個(gè)實(shí)例場(chǎng)景實(shí)現(xiàn)源碼：

1. 幾個(gè)部門職能類:

部門1 (業(yè)務(wù)部門):

復(fù)制代碼代碼如下:

function BusinessDept() {

  this.manager = '陳經(jīng)理'; //負(fù)責(zé)人

}

BusinessDept.prototype = {

  MonthSales: function() {

    console.log(this.manager + '說(shuō)：這個(gè)月銷售額是xxx');

  },

  NextPlan: function() {

    console.log(this.manager + '說(shuō)：接下來(lái)的計(jì)劃是這樣的,xxxx');

  }

}

部門2(研發(fā)部門):

復(fù)制代碼代碼如下:

function RDdept() {

  this.manager = '黃經(jīng)理';

}

RDdept.prototype = {

  progress: function() {

    console.log(this.manager + '說(shuō)：目前的項(xiàng)目情況跟進(jìn)展是這樣的xxx');

  },

  deptPlan: function() {

    console.log(this.manager + '說(shuō)：接下來(lái)的部門規(guī)劃是這樣的xxx');

  }

}

以上是各部門主管所要回答老板的問(wèn)題;

接下來(lái)建立外觀類，用于組織老板想問(wèn)的問(wèn)題；

復(fù)制代碼代碼如下:

function Facade() {

  this.business = new BusinessDept() ;

  this.rddept = new RDdept();

}

Facade.prototype = {

  DeptSituation: function() {

    this.business.MonthSales(); //銷售部經(jīng)理先說(shuō);

    this.rddept.progress();

  },

  deptPlan: function() {

    this.business.NextPlan(); //報(bào)告接下來(lái)計(jì)劃;

    this.rddept.deptPlan();

  }

}

接下來(lái)老板把兩位經(jīng)理叫到面前，開(kāi)始問(wèn)話了:

復(fù)制代碼代碼如下:

var facade = new Facade();

console.log('老板問(wèn)：現(xiàn)在介紹下自己部門的情況?');

facade.DeptSituation();

console.log('老板問(wèn)：接下來(lái)有什么規(guī)劃?');

facade.deptPlan();

其他說(shuō)明

使用外觀模式，可以使得接口或類之間解耦，使得類之間不必產(chǎn)生依賴，不必要使用時(shí)得A包含B，或是B一定得包含A，這違反了關(guān)閉修改原則，使用中間層外觀類包裝，可以使得接口調(diào)用變得簡(jiǎn)單，使用子接口或子系統(tǒng)對(duì)象調(diào)用變得更加自由可組織。

外觀模式經(jīng)常出現(xiàn)我們的編程中，外觀模式經(jīng)常使用在架構(gòu)系統(tǒng)的模式定義中出現(xiàn)，我們的系統(tǒng)要使用第三方的接口服務(wù)，也經(jīng)常再加層外觀層用于組織可用的業(yè)務(wù)接口;

您可能感興趣的文章: