JavaScript設計模式-建造者模式

CompileYouth 發布于2019-08-23 12:11 / 1004人閱讀

摘要：建造者模式建造者模式將一個復雜對象的構建層與其表示層相互分離，同樣的構建過程可采用不同的表示。工廠模式主要是為了創建對象實例或者類簇抽象工廠，關心的是最終產出創建的是什么，而不關心創建的過程。

建造者模式

建造者模式將一個復雜對象的構建層與其表示層相互分離，同樣的構建過程可采用不同的表示。
工廠模式主要是為了創建對象實例或者類簇（抽象工廠），關心的是最終產出(創建)的是什么，而不關心創建的過程。而建造者模式關心的是創建這個對象的整個過程，甚至于創建對象的每一個細節。
以下以創建應聘者為例：應聘者有興趣愛好，姓名和期望的職位等等

//創建一位人類
var Human = function (param) {
    //技能
    this.skill = param && param.skill || "保密";//如果存在param參數，并且param擁有skill屬性，就用這個屬性賦值給this的skill屬性，否則將yoga默認值保密來設置
    this.hobby = param && param.hobby || "保密";
}
//類原型方法
Human.prototype = {
    getSkill : function () {
        return this.skill;
    },
    getHobby :function () {
        return this.hobby;
    }
}

應聘者有姓名和工作，先實例化其姓名類和工作類

//實例化姓名類
var Named = function (name) {
    var that = this;
    //構造器
    //構造函數解析姓名的姓和名
    (function (name, that) {
        that.wholeName = name;
        if(name.indexOf("") > -1){
            that.FirstName = name.slice(0,name.indexOf(" "));
            that.secondName = name.slice(name.indexOf(" "));
        }
    })(name,that);
}
//實例化職位類
var Work = function (work) {
    var that = this;
    //構造器
    //構造函數中通過傳入的職位特征來設置相應職位以及描述
    (function (work,that) {
        switch(work){
            case "code":that.work ="工程師";
                        that.workDescript ="每天沉醉于編程";
                        break;
            case "UI":
            case "UE":that.work = "設計師";
                        that.workDescript = "設計更似一種藝術";
                        break;
            case "teach":that.work ="教師";
                         that.workDescript = "分享也是一種快樂";
                         break;
            default:that.work = work;
                    that.workDescript = "對不起，我們還不清楚您所選擇職位的相關描述";
        }
    })(work,that);
}
//更換期望的職位
Work.prototype.changeWork = function (work) {
    this.work = work;
}
//添加對職位的描述
Work.prototype.changeDescript = function (sentence) {
    this.workDescript = sentence;
}

這樣就創建了抽象出來的3個類：應聘者類，姓名解析類和期望職位類。可以通過對這三個類的組合調用，寫一個建造者類來創建出一個完整的應聘對象。

/**
 *應聘者建造類
 * 參數name:姓名（全名）
 * 參數work：期望職位
 */
var Person = function (name,work) {
    //創建應聘者緩存對象
    var _person = new Human();
    //創建應聘者姓名解析對象
    _person.name = new Named(name);
    _person.work = new Work(work);
    //將創建的應聘者對象返回
    return _person;
}

創建一位建造者緩存對象測試：

//測試
var person = new Person("xiao ming","code");
console.log(person.skill);//保密
console.log(person.name.FirstName);//xiao
console.log(person.name.secondName);//ming
console.log(person.work.work);//工程師
console.log(person.work.workDescript);//每天沉醉于代碼
person.work.changeDescript("更改描述！");
console.log(person.work.workDescript);//更改描述！

通過觀察可以發現，建造者模式和工廠模式是有所不同的，建造者模式不僅可以得到創建的結果，而且參與了創建的具體過程，也干涉了創建的具體實現的細節。

云服務器 GPU云服務器建造者模式建造者設計模式 android建造者模式策略者模式

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98063.html

JavaScript設計模式系列三：建造者模式

摘要：優點建造者模式的封裝性很好，對象本身與構建過程解耦。建造者模式很容易進行擴展。適用場景需要生成的對象具有復雜得內部結構且內部屬性本身相互依賴建造者模式的代碼實現建造者模式主要有個部分產品類建造者類指揮者類客戶。建造者完成相應的部分。建造者模式建造者模式（builder pattern）比較簡單，它屬于創建型模式的一種，將一個復雜的對象分解成多個簡單的對象來進行構建，將復雜的構建層與...

CloudDeveloper 2019-08-22 15:56 評論0 收藏0
從ES6重新認識JavaScript設計模式(三): 建造者模式

摘要：書籍建造者類調用建造者高效能人士的七個習慣史蒂芬柯維勵志上面的這個類和第一個例子的效果一樣，但是長度確減少不少，在有更多屬性的時候，減少的代碼量會更為明顯。參考內容設計模式張容銘 showImg(https://segmentfault.com/img/remote/1460000015147692); 1 什么是建造者模式? 建造者模式(Builder)是將一個復雜對象的構建層與其表...

hatlonely 2019-08-29 15:35 評論0 收藏0
從ES6重新認識JavaScript設計模式(三): 建造者模式

摘要：書籍建造者類調用建造者高效能人士的七個習慣史蒂芬柯維勵志上面的這個類和第一個例子的效果一樣，但是長度確減少不少，在有更多屬性的時候，減少的代碼量會更為明顯。參考內容設計模式張容銘 showImg(https://segmentfault.com/img/remote/1460000015147692); 1 什么是建造者模式? 建造者模式(Builder)是將一個復雜對象的構建層與其表...

yuanxin 2019-08-26 11:57 評論0 收藏0
細談JavaScript中的一些設計模式

摘要：注意事項聲明函數時候處理業務邏輯區分和單例的區別，配合單例實現初始化構造函數大寫字母開頭推薦注意的成本。簡單工廠模式使用一個類通常為單體來生成實例。 @(書籍閱讀)[JavaScript, 設計模式] 常見設計模式一直對設計模式不太懂，花了一下午加一晚上的時間，好好的看了看各種設計模式，并總結了一下。設計模式簡介設計模式概念解讀設計模式的發展與在JavaScript中的應用 ...

30e8336b8229 2019-08-19 17:47 評論0 收藏0