前端設(shè)計模式

jackzou 發(fā)布于2019-08-23 15:09 / 3106人閱讀

摘要：當(dāng)一個對象的改變需要同時改變其他對象，而且他不知道具體有多少對象需要改變時，此時建議使用訂閱發(fā)布模式。指定發(fā)布者，類似于一個對象表示事件的名稱，是一個數(shù)組發(fā)布消息后，遍歷的數(shù)組，依次執(zhí)行訂閱者的回調(diào)函數(shù)。

1、模塊模式
在立即執(zhí)行函數(shù)表達(dá)式中定義的變量和方法，在該函數(shù)外部是訪問不到的，只能通過該函數(shù)提供的接口，"有限制的"進(jìn)行訪問；通過函數(shù)的作用域，解決了屬性和方法的封裝問題。
最常見的立即執(zhí)行函數(shù)寫法有以下兩種：

(function(){ /* code */ }())
或者
(function(){ /* code */ })()

模塊模式代碼：

    let Person = (function(){
        var age = "12";
        var name = "jerry";
        function getAge(){
            return age;
        }
        function getName(){
            return name;
        }
        return {
            getAge: getAge,
            getName: getName
        }
    })()
    console.log(age, "age"); // 報錯: Uncaught ReferenceError: age is not defined
    console.log(name, "name"); // 空字符串，為啥不報錯？看底部備注
    console.log(Person.age); // undefined
    console.log(Person.name); // undefined
    // 只能通過Person提供的接口訪問相應(yīng)的變量
    console.log(Person.getName()); // jerry
    console.log(Person.getAge()); // 12

2、構(gòu)造函數(shù)模式

    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.printName = function(){
        console.log(this.name)
    }
    Person.prototype.printAge = function(){
        console.log(this.age)
    }
    function Student(name,age){
        // 繼承 Person 的屬性
        Person.call(this,name,age)
    }
    function create(prototype){
        function F(){}
        F.prototype = prototype
        return new F()
    }
    // 讓Student的原型指向一個對象,該對象的原型指向了Person.prototype,通過這種方式繼承 Person 的方法
    Student.prototype = create(Person.prototype)
    Student.prototype.printAge = function(){
        console.log(this.age)
    }
    let student = new Student("jerry",12)
    student.printName() // "jerry"
    student.printAge() // "12"

3、混合模式

    function Person(name,age){
        this.name = name
        this.age = age
    }
    Person.prototype.printName = function(){
        console.log(this.name)
    }
    function Student(name,age){
        // 繼承 Person 的屬性
        Person.call(this, name, age)
    }
    function create(prototype){
        function F(){}
        F.prototype = prototype
        return new F()
    }
    // 讓Student的原型指向一個對象,該對象的原型指向了Person.prototype,通過這種方式繼承 Person 的方法
    Student.prototype = create(Person.prototype)
    Student.prototype.printAge = function(){
        console.log(this.age)
    }
    let student = new Student("jerry", 12)
    student.printName() // "jerry"
    student.printAge() // 12

4、工廠模式

    function Person(name, age){
        let person = new Object()
        person.name = name
        person.age = age
        person.printName = function(){
            console.log(this.name)
        }
        person.printAge = function(){
            console.log(this.age)
        }
        return person
    }
    let person = Person("jerry",12)
    person.printName()
    person.printAge()

5、單例模式

    let Singleton = (function(){
        let instantiated
        function init(){
            /*定義單例代碼*/
            return{
                publicMethod: function(){
                    console.log("Hello World");
                },
                publicProperty: "Test"
            }
        }
        return{
            getInstance: function(){
                if(!instantiated){
                    instantiated = init()
                }
                return instantiated
            }
        }
    }())
    Singleton.getInstance().publicMethod()

單例之間的通訊：
建立兩個獨(dú)立的對象：jim&&lily，兩者之間通過door直接通訊，如果沒有新建door，有直接通訊。代碼如下：

    let jim = (function(argument){
        let door
        let jimHome = function(msg){
            this.doorbell = msg
        }
        let info = {
            sendMessage: function(msg){
                if(!door){
                    door = new jimHome(msg)
                }
                return door
            },
            coming: function(){
                return "來了來了"
            }
        }
        return info
    }())
    let lily = {
        callJim: function(msg){
            let _xw = jim.sendMessage(msg)
            alert(_xw.doorbell)
            console.log(_xw.doorbell)
            _xw = null // 等待垃圾回收
            let coming = jim.coming()
            console.log(coming)
        }
    }
    lily.callJim("叮嚨")

6、發(fā)布-訂閱模式
訂閱發(fā)布模式定義了一種一對多的依賴關(guān)系，讓多個訂閱者對象同時監(jiān)聽某一個主題對象。這個主題對象在自身主題變化時，會通知所有訂閱者對象，使他們能夠自動更新自己的狀態(tài)。
將一個系統(tǒng)分割成一系列相互協(xié)作的類有一個很不好的副作用：需要維護(hù)相應(yīng)對象間的一致性，這樣會給維護(hù)、擴(kuò)展和重用都帶來不便。當(dāng)一個對象的改變需要同時改變其他對象，而且他不知道具體有多少對象需要改變時，此時建議使用訂閱發(fā)布模式。
應(yīng)用場景：
DOM事件。DOM事件是一種典型的發(fā)布-訂閱模式，對一個DOM節(jié)點(diǎn)的DOM事件進(jìn)行監(jiān)聽；當(dāng)操作DOM節(jié)點(diǎn)時，觸發(fā)相應(yīng)的事件并執(zhí)行函數(shù)。
自定義時間。指定發(fā)布者，類似于一個對象(key:value);key表示事件的名稱，value是一個數(shù)組；發(fā)布消息后，遍歷value的數(shù)組，依次執(zhí)行訂閱者的回調(diào)函數(shù)。
應(yīng)用Demo如下：

    let Event = (function(){
        var events = {}
        function on(evt, handler){
            events[evt] = events[evt]||[];
            events[evt].push({
                handler:handler
            })
        }
        function fire(evt,args){
            if(!events[evt]){
                return
            }
            for(var i=0;i
備注：console.log(name, "name")沒有報錯，是因為name是瀏覽器的窗口變量名，已存在于瀏覽器內(nèi)部。