快捷導(dǎo)航

JavaScript設(shè)計(jì)模式之建造者模式實(shí)例教程

更新時(shí)間：2018年07月02日 12:06:54 作者：CangoWu

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之建造者模式,結(jié)合實(shí)例形式分析了設(shè)計(jì)模式中建造者模式的概念、功能及JavaScript實(shí)現(xiàn)與使用建造者模式的相關(guān)操作技巧,需要的朋友可以參考下

一、建造者模式模式概念

建造者模式可以將一個(gè)復(fù)雜的對(duì)象的構(gòu)建與其表示相分離，使得同樣的構(gòu)建過(guò)程可以創(chuàng)建不同的表示。也就是說(shuō)如果我們用了建造者模式，那么用戶就需要指定需要建造的類型就可以得到它們，而具體建造的過(guò)程和細(xì)節(jié)就不需要知道了。建造者模式實(shí)際就是一個(gè)指揮者，一個(gè)建造者，一個(gè)使用指揮者調(diào)用具體建造者工作得出結(jié)果的客戶。

建造者模式主要用于“分步驟構(gòu)建一個(gè)復(fù)雜的對(duì)象”，在這其中“分步驟”是一個(gè)穩(wěn)定的算法，而復(fù)雜對(duì)象的各個(gè)部分則經(jīng)常變化。

通俗的說(shuō)：就是一個(gè)白富美需要建一個(gè)別墅，然后直接找包工頭，包工頭再找工人把別墅建好。這其中白富美不用直接一個(gè)一個(gè)工人的去找。而且包工頭知道白富美的需求，知道哪里可以找到工人，工人可以干活，中間節(jié)省了白富美的和工人之間溝通的成本，白富美也不需要知道房子具體怎么建，最后能拿到房就可以了。

二、建造者模式的作用和注意事項(xiàng)

模式作用：

1.分步創(chuàng)建一個(gè)復(fù)雜的對(duì)象

2.解耦封裝過(guò)程和具體創(chuàng)建組件

3.無(wú)需關(guān)心組件如何組裝

注意事項(xiàng)：

1.一定要一個(gè)穩(wěn)定的算法進(jìn)行支持

2.加工工藝是暴露的--白富美不用關(guān)心如何建房子，但可以隨時(shí)去看房子建得怎么樣

三、建造者模式代碼和實(shí)戰(zhàn)總結(jié)

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>建造者模式</title>
</head>
<body>
<script>
 //1.產(chǎn)出東西是房子
 //2.包工頭調(diào)用工人進(jìn)行開(kāi)工 而且他要很清楚工人們具體的某一個(gè)大項(xiàng)
 //3.工人是蓋房子的 工人可以建臥室 建客廳 建廚房
 //4.包工頭只是一個(gè)接口而已 他不干活 他只對(duì)外說(shuō)我能建房子
 function Fangzi(){//Fangzi可以理解為單例模式
  if(!(this instanceof Fangzi)){
   return new Fangzi();
  }
  this.woshi = "";
  this.keting = "";
  this.chufang = "";
 }
 function Baogongtou(){
  if(!(this instanceof Baogongtou)){
   return new Baogongtou();
  }
  this.jianfangzi = function(gongren){
   gongren.jian_chufang();
   gongren.jian_keting();
   gongren.jian_woshi();
  }
 }
 function Gongren(){
  if(!(this instanceof Gongren)){
   return new Gongren();
  }
  this.jian_woshi = function(){
   console.log("建臥室");
  }
  this.jian_keting = function(){
   console.log("建客廳");
  }
  this.jian_chufang = function(){
   console.log("建廚房");
  }
  this.jiaofang = function(){
   var _fangzi = new Fangzi();
   _fangzi.woshi = "ok";
   _fangzi.keting = "ok";
   _fangzi.chufang = "ok";
   return _fangzi;
  }
 }
 var gongren = new Gongren();
 var baogongtou = new Baogongtou();
 baogongtou.jianfangzi(gongren);
 var myfangzi = gongren.jiaofang();
 console.log(myfangzi);
</script>
</body>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行效果如下：