1. 程式人生 > >JavaScript高階程式設計之設計模式

JavaScript高階程式設計之設計模式

工廠模式:

此種模式是軟體工程領域中的一個廣為認知的設計模式,抽象了建立具體物件的過程,利用函式來封裝以特定介面建立物件的細節。通過多次傳參呼叫函式來建立具有多個屬性和方法的物件。

1.優點:解決了建立多個相似物件的問題,操作簡單

2.缺點:沒有解決物件具體識別的問題,這是簡單地識別為object型別,並沒有具體化

例程式碼如下:

    function createPerson(name,age,job){
        var o=new Object();
        o.name=name;
        o.age=age;
        o.job=job;
        o.sayName=function(){
            alert(this.name);
        };
        return o;
    }
    var person1=createPerson("mimi",18,"Software Engineer");
    var person2=createPerson("nene",28,"Doctor");


建構函式:

1.優點:可以建立特定型別的物件,沒有顯示建立物件,不用return返回值,操作簡單方便,只要利用new操作符即可

2.缺點:每個方法都要在每一個例項上建立一遍,這樣會導致當物件之間存在過多相同屬性和方法時,存在大量的程式碼冗餘。

例程式碼如下:

    function createPerson(name,age,job){
        this.name=name;
        this.age=age;
        this.job=job;
        this.sayName=function(){
            alert(this.name);
        };
    }
    var person1=new Person("mimi",18,"Software Engineer");
    var person2=new Person("nene",28,"Doctor");

原型模式:

1.優點:此模式最大的優點就是完美解決了第二種模式中的缺點:可以讓所有物件例項共享它包含的屬性和方法,不必在建構函式中定義物件市裡的資訊,而是將這些資訊直接新增到原型物件中

2.缺點:它的缺點正好也是由於它的優點導致的,它將所有資訊都進行了共享,但實際上我們在開發過程,並不是希望所有資訊都是共享的,有一部分共享,有一部分屬於自己的獨特的屬性。

所以我們可以將第二種和第三種模式結合起來,解決此種問題,得到第四種設計模式。

 function Person(){
        
    }
    Person.prototype.name="mimi";
    Person.prototype.age="15";
    Person.prototype.job="Doctor";
    Person.prototype.sayName=function(){
        alert(this.name);
    };
    var person1=new Person();
    person1.sayName();//mimi
    var person2=new Person();
    person2.sayName();//mimi

組合使用建構函式模式和原型模式:

每一個例項都會有自己的一份例項屬性的副本,但同時又共享著對方法的引用,最大限度的節省了記憶體,此種模式還支援傳遞引數。所以此種模式也是ECMAScript使用最廣泛、認同度最高的一種建立自定義型別的方法。

例如下程式碼:

    //利用建構函式新增各自的屬性,保持自己的獨立性
    function Person(name,age,job){
        this.name=name;
        this.age=age;
        this.job=job;
        this.friends=["Shelby","Court"];
    }

    //利用原型共享彼此資訊,保證資訊共享
    Person.prototype={
        constructor:Person,
        sayName:function(){
            alert(this.name);
        }
    }
    var person1=new Person("Nicholas","29","Software Engineer");
    var person2=new Person("Greg","27","Doctor");
    person1.friends.push("Van");
    console.log(person1.friends);
    console.log(person2.friends);
    console.log(person1.sayName);
    console.log(person2.sayName);
    console.log(person1.friends === person2.friends);
    console.log(person1.sayName === person2.sayName);