JS設計模式之--建造者模式

1、建造者模式（Builder）的定義

建造者模式是相對比較簡單的一種設計模式，屬於建立型模式的一種；定義：將一個複雜的對象分解成多個簡單的對象來進行構建，將複雜的構建層與表現層分離，使相同的構建過程能夠建立不一樣的表示模式。html

簡單例子來講：當咱們在外面飯店吃飯時，好比點個水煮肉片，這家店可能會辣一點、那家店可能會鹹一點、對面那家可能放青菜、隔壁那家可能放菠菜，每家店作出來的都不同，明明都是水煮肉片卻有不一樣的作法，若是都同樣就不會說這家難吃那家好吃了。那再看KFC，咱們點個漢堡，全部人無論在哪一個城市哪家店，作法、味道都是同樣的，爲何呢，由於它用料、時間、溫度等等都是嚴格規定的，咱們只須要下訂單就好了，這就是一個建造者模式。ajax

2、模式的結構

建造者模式的主要角色以下：設計模式

產品角色（Product）：它是包含多個組成部件的複雜對象，由具體建造者來建立其各個零部件。
抽象建造者（Builder）：它是一個包含建立產品各個子部件的抽象方法的接口，一般還包含一個返回複雜產品的方法 getResult()。
具體建造者(Concrete Builder）：實現 Builder 接口，完成複雜產品的各個部件的具體建立方法。
指揮者（Director）：它調用建造者對象中的部件構造與裝配方法完成複雜對象的建立，在指揮者中不涉及具體產品的信息。

建造者模式結構圖以下：markdown

3、模式的實現

1. 建造者模式咱們在代碼中常常用到，好比Jquery中的ajax請求：ui

//1 用戶發送一個請求
//2 $.ajax建造者模式（指揮者） 
//3 具體實現 （建造者）  
$.ajax({
    url:'www.juejin.cn',    
    success:function(argument){    }  
});
複製代碼

2.其中主要流程實現：this

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>    
        </head>    
<body>    
</body>    
<script>        
    //商店：Director指揮者類        
    function KFCShop() {
        this.construct = function(builder) {   
            builder.step1();                
            builder.step2();                
            return builder.get();            
    }}        
    //漢堡包製做：建造者類        
    function HamburgerBuilder() {            
        this.bread = null;            
        this.step1 = function() {              
            this.bread = new Hamburger();            
        };            
        this.step2 = function() {              
            this.bread.addQuantity();            
        };            
        this.get = function() {                
            return this.bread;            
        };        
    }        
    //薯條製做：建造者類        
    function FrenchFriesBuilder() {            
        this.fries = null;            
        this.step1 = function() {              
            this.fries = new FrenchFries();            
        };              
        this.step2 = function() {              
            this.fries.addQuantity();            
        };              
        this.get = function() {                
            return this.fries;            
        };        
    }                
    //產品類：漢堡包        
    function Hamburger() {            
        this.quantity = 1;              
        this.addQuantity = function() {              
            this.quantity = 6;              
        };             
        this.say = function() {                
            log.add("我要" + this.quantity + "個漢堡包！");            
        };        
    }        
    //產品類：薯條        
    function FrenchFries() {          
        this.quantity = 1;          
        this.addQuantity = function() {            
            this.quantity = 2;            
        };           
        this.say = function() {              
            log.add("我要" + this.quantity + "份薯條！");          
        };        
    }        
    // 日誌打印        
    var log = (function() {            
        var log = "";            
        return {                
            add: function(msg) {                    
                log += msg + "\n";                
            },                
            show: function() {                    
                alert(log);                    
                log = "";                
            }            
        }        
     })();                
    //運行程序        
    function run() {          
        var shop = new KFCShop();          
        var hamBuilder = new HamburgerBuilder();          
        var friesBuilder = new FrenchFriesBuilder();          
        //顧客經過向商店下訂不一樣的飲食套餐，獲得不一樣的美食          
        var hamburgerOrder = shop.construct(hamBuilder);          
        var friesOrder = shop.construct(friesBuilder);          
        hamburgerOrder.say();          
        friesOrder.say();          
        log.show();        
     }        
     run();    
</script>
</html>
複製代碼

3、模式的應用url

使用場景

須要生成的對象具備複雜的內部結構時。
相同的方法，不一樣的執行順序，產生不一樣的結果。
多個部件或零件，均可以裝配到一個對象中，可是產生的結果又不相同。

2.優勢 spa

封裝性。是客戶端沒必要知道產品內部組成的細節。
建造者獨立，易擴展。
便於控制細節風險。能夠對建造過程逐步細化，而不對其餘模塊產生任何影響。

3.缺點設計

產品必須有共同點，範圍有限制。
若是內部變化複雜，會有不少建造類。