js經常使用設計模式實現（三）建造者模式

時間 2019-11-08

標籤經常使用設計模式實現建造者欄目 JavaScript 简体版

原文原文鏈接

建立型模式

建立型模式是對一個類的實例化過程進行了抽象，把對象的建立和對象的使用進行了分離

關於建立型模式，已經接近尾聲了，還剩下建造者模式和原型模式，這一篇說一說建造者模式ui

建造者模式的定義

將一個複雜對象的構建與它的表示分離，使得一樣的構建過程能夠建立不一樣的表示。

很官方哈，舉個例子，就拿他的名字來講，建房子，你儘管告訴開發商，我有錢我要一個這樣的房子，而後開發商就會去找到工人，而後進行一些列的工做，最後工人幹完以後，你住進去了，不關心過程，只要結果就是建造者模式this

總之建造者模式就是經過一步步構建多個組成部分，直到構建一個對象spa

建造者模式實現

根據上邊的例子來實現一下建造者設計

首先你的需求就是你須要一個你想要的房子，那麼你確定不能本身去建造，首先你會找到開發商code

/**
     * @author: 周靖鬆
     * @information: 開發商
     * @Date: 2019-07-14 10:11:54
     */
    class Developer {
        constructor() {
            this.need = ['臥室', '廚房', '客廳'];
            console.log("我須要這樣的房間");
        }
    
        construct() {
            console.log("開始建造");
            let workerOk=this.need.map(el=>{
                let builder = new CreatDiagram();
                builder.build(el);
                return builder.getResult();
            })
                
            console.log("房子不錯");
            console.log(workerOk);
        }
    }
    // 要求產品
    let home = new Developer();
    // 生成產品
    home.construct();

這是最終的目的，在咱們new這個開發商類的時候，咱們告訴他咱們須要什麼樣的房子，須要有什麼，而後開發商也不是本身去建造，他須要一個設計圖，而且須要一些工人來幫助他實現建造orm

/**
     * @author: 周靖鬆
     * @information: 設計圖抽象類
     * @Date: 2019-07-14 10:11:10
     */
    class Diagram {
        constructor() {
        console.log('拿到圖紙')
        }
    
        build(partName) {
            console.log(`觀察${partName}圖紙`);
        }
    }
    
    /**
     * @author: 周靖鬆
     * @information: 設計圖實現
     * @Date: 2019-07-14 10:11:25
     */
    class CreatDiagram extends Diagram {
        constructor() {
            super();
        }
    
        build(partName) {
            super.build(partName);
            console.log(`建造開始${partName}`);
            this.worker = new worker(partName);
        }
        getResult() {
            console.log('完工');
            return this.worker;
        }
    }

ok 設計圖到手，開始招人幹活對象

/**
     * @author: 周靖鬆
     * @information: 工人類
     * @Date: 2019-07-14 10:11:40
     */
    class worker {
        constructor(material) {
            console.log(`我建造了${material}`);
            this.data = material
        }
    }

最後放一下所有代碼blog

/**
     * @author: 周靖鬆
     * @information: 設計圖抽象類
     * @Date: 2019-07-14 10:11:10
     */
    class Diagram {
        constructor() {
        console.log('拿到圖紙')
        }
    
        build(partName) {
            console.log(`觀察${partName}圖紙`);
        }
    }
    
    /**
     * @author: 周靖鬆
     * @information: 設計圖實現
     * @Date: 2019-07-14 10:11:25
     */
    class CreatDiagram extends Diagram {
        constructor() {
            super();
        }
    
        build(partName) {
            super.build(partName);
            console.log(`建造開始${partName}`);
            this.worker = new worker(partName);
        }
        getResult() {
            console.log('完工');
            return this.worker;
        }
    }
    
    /**
     * @author: 周靖鬆
     * @information: 工人類
     * @Date: 2019-07-14 10:11:40
     */
    class worker {
        constructor(material) {
            console.log(`我建造了${material}`);
            this.data = material
        }
    }
    
    /**
     * @author: 周靖鬆
     * @information: 開發商
     * @Date: 2019-07-14 10:11:54
     */
    class Developer {
        constructor() {
            this.need = ['臥室', '廚房', '客廳'];
            console.log("我須要這樣的房間");
        }
    
        construct() {
            console.log("開始建造");
            let workerOk=this.need.map(el=>{
                let builder = new CreatDiagram();
                builder.build(el);
                return builder.getResult();
            })
                
            console.log("房子不錯");
            console.log(workerOk);
        }
    }
    // 要求產品
    let home = new Developer();
    // 生成產品
    home.construct();

具體打印結果以下圖片