Javascript設計模式學習（一）封裝和資訊隱藏

在我們程式設計的過程中，我們應該儘可能的把資料和函式處理資訊隱藏在物件內部，在Javascript中，我們怎樣來做呢？

雖然Javascript中沒有其他面嚮物件語言的宣告共有和私有的關鍵字，但是我們仍可以通過一些手段來達到這樣的效果。我們可以這樣理解封裝和資訊隱藏，資訊隱藏是我們的目標，因為我們不想太多無關的資訊暴露在物件之外，而封裝就是實現我們目標的方法。封裝就可以被定義為在物件內部隱藏資料表達和具體實現的細節。

下面來學習下怎麼用Javascript來實現介面：

 

第一種是：Fully Exposed Method

 

 看例子

var HouseItem = function(hid,hname,address){
    if(hid == undefined) throw new Error('Hid is not defined!')
                
    this.hid = hid;
    this.hname = hname || "暫無";
    this.address = address || "暫無";
}

HouseItem.prototype.display = function(container){
    document.getElementById(container).innerHTML = "樓盤名稱：" + this.hname + "<br />";
}

 這個中，我們講一個樓房的專案封裝到了一類中，只是我們對於他的屬性的有效性檢查還不是很完整，而且此時屬性的獲取或者賦予完全是公開的。

 

 我們可以繼續將這個例子完善為

var HouseItem = function(hid,hname,address){
    this.setHid(hid);
    this.setHname(hname);
    this.setAddress(address);
}

   HouseItem.prototype = {
    getHid: function(){
        return this.hid;
    },
    setHid: function(hid){
        if (!this.isValid(hid)) 
        throw new Error('Hid is not defined!');
        this.hid = hid;
    },
    getHname: function(){
        return this.hname;
    },
    setHname: function(hname){
        this.hname = hname || "暫無";
    },
    getAddress: function(){
        return this.address;
    },
    setAddress: function(address){
        this.address = address || "暫無";
    },
    isValid: function(hid){
        if (hid != null && hid != undefined && hid != "") {
        return true;
        }
        else {
        return false;
        }
    },
    showHouse: function(){
        document.getElementById("container").innerHTML += "樓盤名稱：" + this.hname + "<br />";
    }
    }

 

怎麼樣，現在是不是看起來完善很多了，但這還不是最好的方法，不過這種方法很容易理解，也比較容易上手。