JavaScript 設(shè)計(jì)模式

JayChen 發(fā)布于2019-08-21 11:36 / 1994人閱讀

摘要：應(yīng)用場景一個的構(gòu)造函數(shù)，提供創(chuàng)建不同類型汽車的方法。優(yōu)點(diǎn)保護(hù)全局命名空間免受污染，能很快地找到相應(yīng)的構(gòu)造函數(shù)。如果構(gòu)造函數(shù)不存在，報(bào)錯原型繼承父類，且只繼承一次迭代器模式定義按順序訪問一個聚合對象中各個元素。

1. 單例模式

定義：一個特定類僅有一個實(shí)例

應(yīng)用場景：一個遮罩層

實(shí)現(xiàn)方式

每個對象都是一個單體，因?yàn)樗麄兊囊梦恢貌灰粯樱?/p>

使用new操作符

將首次生成的對象存儲在全局變量中。缺點(diǎn)：全局變量易被覆蓋。可以使用閉包來存儲這個變量，參見一個遮罩層。

在構(gòu)造函數(shù)的屬性中存儲該實(shí)例。缺點(diǎn)：構(gòu)造函數(shù)的屬性也容易被修改。

        function Universe() {
            if (typeof Universe.instance === "object") {
                return Universe.instance
            }

            this.start_time = 0;
            this.bang = "Big";

            Universe.instance = this;
        }

        var uni1 = new Universe();
        var uni2 = new Universe();

        console.log(uni1 === uni2); // true

    - 重寫構(gòu)造函數(shù)，使用閉包來儲存這個實(shí)例。缺點(diǎn)：

//缺點(diǎn)： 這種方式會丟掉初始實(shí)例與重寫構(gòu)造函數(shù)之間的關(guān)系，因此后面再向重寫的構(gòu)造函數(shù)原型中添加屬性時，并不會添加到初始實(shí)例中去。
        function Universe() {
            var instance = this;
            this.start_time = 0;
            this.bang = "Big";

            Universe = function Universe() {
                return instance;
            }
        }

        Universe.prototype.nothing = true;
        var uni1 = new Universe();

        Universe.prototype.everything = true;
        var uni2 = new Universe();

        console.log(uni1 === uni2); //true
        console.log(uni1.nothing); //true
        console.log(uni2.nothing); //true
        console.log(uni1.everything); //undefined
        console.log(uni2.everything); //undefined    
        console.log(uni1.constructor === Universe); //false

因此，我們需要先重寫構(gòu)造函數(shù)、保留原型屬性、生成實(shí)例，返回實(shí)例。

        function Universe() {
            var instance;
            
            Universe = function () {
                return instance;
            }

            Universe.prototype = this;

            instance = new Universe();
            instance.constructor = Universe;

            this.start_time = 0;
            this.bang = "big";

            return instance;
        }

        Universe.prototype.nothing = true;
        var uni1 = new Universe();

        Universe.prototype.everything = true;
        var uni2 = new Universe();

        console.log(uni1 === uni2); //true
        console.log(uni1.nothing); //true
        console.log(uni2.nothing); //true
        console.log(uni1.everything); //true
        console.log(uni2.everything); //true
        console.log(uni1.constructor === Universe); //true

- 還有一種就是使用即時函數(shù)

        var Universe;
        (function () {
            var instance;
            Universe =     function () {
                if (instance) {
                    return instance;
                }

                instance = this;
                this.start_time = 0;
                this.bang = "big";
            }
        })();

        Universe.prototype.nothing = true;
        var uni1 = new Universe();

        Universe.prototype.everything = true;
        var uni2 = new Universe();

        console.log(uni1 === uni2); //true
        console.log(uni1.nothing); //true
        console.log(uni2.nothing); //true
        console.log(uni1.everything); //true
        console.log(uni2.everything); //true
        console.log(uni1.constructor === Universe); //true

2. 工廠模式

定義：提供創(chuàng)建相似對象的可重用方法。在不確定的情況下，提前提供一種創(chuàng)建某類的方法。總-分模式。

應(yīng)用場景：一個CarMaker的構(gòu)造函數(shù)，提供創(chuàng)建不同類型汽車的factory方法。

實(shí)現(xiàn)方式。優(yōu)點(diǎn)：保護(hù)全局命名空間免受污染，能很快地找到相應(yīng)的構(gòu)造函數(shù)。

        function CarMaker() {}
        
        CarMaker.prototype.getPrice =     function () {
            console.log("Price:", this.price);
        }

        CarMaker.factory = function (type) {
            var newcar;
            //如果構(gòu)造函數(shù)不存在，報(bào)錯
            if (typeof CarMaker[type] !== "function") {
                throw {
                    name: "Error",
                    message: type + " dosen"t exist"
                }
            }

            //原型繼承父類，且只繼承一次
            if (typeof CarMaker[type].prototype.getPrice !== "function") {
                CarMaker[type].prototype = new CarMaker();
            }

            newcar = new CarMaker[type]();
            return newcar;
        }

        CarMaker.SUV = function () {
            this.price = 100;
        }

        CarMaker.Compat = function () {
            this.price = 50;
        }

        var a = CarMaker.factory("SUV");
        var b = CarMaker.factory("Compat");

        a.getPrice(); //Price: 100
        b.getPrice(); //Price: 100

3. 迭代器模式

定義：按順序訪問一個聚合對象中各個元素。通常包含next(獲取下一個元素), hasNext(是否到末尾)，rewind(重置初始位置), current(當(dāng)前元素)集中方法。

應(yīng)用場景：需要按照順序，以不同的間隔獲取集合中的元素。

實(shí)現(xiàn)方法：

function iterator (data = [], gap = 1) {
         var index = 0, //記錄當(dāng)前位置
                 length = data.length; //數(shù)據(jù)總長度
         return {
             next() {
                 var element;
                 if (!this.hasNext()) {
                     return null;
                 }
                 element = data[index];
                 index += gap;
                 return element;
             },
             hasNext() {
                 return index < length;
             },
             rewind() {
                 index = 0;
             },
             current() {
                 return data[index];
             }
         }
     }

     var arrIterator = iterator([1, 2, 3, 4, 5]);

     while(arrIterator.hasNext()) {
         console.log(arrIterator.next());
     }

     arrIterator.rewind();
     console.log(arrIterator.current());

4. 裝飾者模式

定義：在運(yùn)行時動態(tài)添加附加功能到對象中。

應(yīng)用場景：購買某種東西時，隨著添加不同的裝備，價(jià)格也不一樣。最后需要根據(jù)添加的設(shè)備計(jì)算總價(jià)。

實(shí)現(xiàn)方法：要注意的是，各裝飾器需要提供原型方法的接口。另一種實(shí)現(xiàn)方式

        function Sale(price = 100) {
            this.price = price;
            this.decorators_list = [];
        }

        //裝飾器
        Sale.decorators = {};
        Sale.decorators.pack = {
            getPrice(price) {
                return price + 20;
            }
        }
        Sale.decorators.mail = {
            getPrice(price) {
                return price + 10;
            }
        }

        Sale.prototype.decorate = function (decorator) {
            this.decorators_list.push(decorator);
        }

        Sale.prototype.getPrice = function () {
            let price = this.price;
            //調(diào)用各裝飾器的接口
            for (let i = 0, len = this.decorators_list.length; i < len; i++) {
                name = this.decorators_list[i];
                price = Sale.decorators[name].getPrice(price);
            }
            return price;
        }

        var sale = new Sale();
        sale.decorate("pack");
        sale.decorate("mail");
        console.log(sale.getPrice()); //130

5. 策略者模式

定義：在運(yùn)行時可以選擇算法。

應(yīng)用場景：表單驗(yàn)證。

實(shí)現(xiàn)方式：一個含有config(配置驗(yàn)證規(guī)則), types(驗(yàn)證類型), validate(驗(yàn)證方法), message(結(jié)果消息數(shù)組), hasErrors(最后結(jié)構(gòu))幾個屬性的validator對象。

6. 外觀模式

定義：提供一個高級接口，調(diào)用經(jīng)常需要同時使用的幾個基礎(chǔ)方法。

應(yīng)用場景：將stopPropagation與peventDefault包裝在stop這個高級接口中。

飯?zhí)玫某床藥煾挡粫驗(yàn)槟泐A(yù)定了一份燒鴨和一份白菜就把這兩樣菜炒在一個鍋里。他更愿意給你提供一個燒鴨飯?zhí)撞汀Ｍ瑯釉诔绦蛟O(shè)計(jì)中，我們需要保證函數(shù)或者對象盡可能的處在一個合理粒度，畢竟不是每個人喜歡吃燒鴨的同時又剛好喜歡吃白菜。
外觀模式還有一個好處是可以對用戶隱藏真正的實(shí)現(xiàn)細(xì)節(jié)，用戶只關(guān)心最高層的接口。比如在燒鴨飯?zhí)撞偷墓适轮校悴⒉魂P(guān)心師傅是先做燒鴨還是先炒白菜，你也不關(guān)心那只鴨子是在哪里成長的。

7. 代理模式

定義：介于對象和對象的客戶端之間，對對象本體起保護(hù)作用，使本體對象做盡可能少的工作。目的是解決性能問題。

應(yīng)用場景：

初始化本體對象消耗非常大，但是在初始化該對象的之后并未使用。此時可使用代理模式，接收初始化請求，返回ok，等真正用到本體對象時再初始化。

發(fā)起Http請求會消耗性能，最好的方法就是使用代理合并Http請求，比如將50ms內(nèi)的發(fā)起的請求合并為一個請求。

為了減少性能消耗，還可給代理設(shè)置一個緩存，緩存結(jié)果。

fragment應(yīng)該就算一個代理模式吧，緩存了對DOM的操作。

實(shí)現(xiàn)方法：對象客戶端調(diào)用代理提供的方法，代理對客戶端的請求進(jìn)行處理后調(diào)用對象本體方法。

8. 中介者模式

定義：一個程序中有很多對象，這些對象之間會相互通信。但是如果修改其中一個對象，則必然會牽涉到其他和他通信的對象，造成緊耦合。中介者模式就是提出一個中間對象來實(shí)現(xiàn)對象間的松耦合通信。通信的對象不用知道對方是誰，只要有變動就通知給這個中介者，中介者知道所有的對象并且負(fù)責(zé)聯(lián)系相應(yīng)的對象做出處理。

應(yīng)用場景：MVC中的Controller

實(shí)現(xiàn)方法：http://www.jspatterns.com/boo...

9. 觀察者模式

定義：該模式的目的也是為了形成松耦合。對象之間不直接調(diào)用彼此的方法，而是采取訂閱的模式，訂閱者訂閱發(fā)布者的事件，并向發(fā)布者提供一個事件發(fā)生時調(diào)用的方法。中介者模式中的mediator需要知道所有其他對象，而該模式并不需要知道，只要訂閱事件即可。

應(yīng)用場景：DOM中的事件。

實(shí)現(xiàn)方法：
發(fā)布者需要：訂閱者的列表{type: []}，訂閱方法，取消訂閱，發(fā)布消息幾種方法。http://www.jspatterns.com/boo...