天天看點

Javascript設計模式學習(一)封裝和資訊隐藏

Javascript語言在Web2.0時代發揮了越來越重要的作用,這門短小精悍的語言為什麼這麼吸引人呢,我将和您一起探索...

在我們程式設計的過程中,我們應該盡可能的把資料和函數處理資訊隐藏在對象内部,在Javascript中,我們怎樣來做呢?

雖然Javascript中沒有其他面向對象語言的聲明共有和私有的關鍵字,但是我們仍可以通過一些手段來達到這樣的效果。我們可以這樣了解封裝和資訊隐藏,資訊隐藏是我們的目标,因為我們不想太多無關的資訊暴露在對象之外,而封裝就是實作我們目标的方法。封裝就可以被定義為在對象内部隐藏資料表達和具體實作的細節。

下面來學習下怎麼用Javascript來實作接口:

第一種是:Fully Exposed Method

 看例子

Javascript設計模式學習(一)封裝和資訊隐藏
Javascript設計模式學習(一)封裝和資訊隐藏

Code

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 />";

}

 這個中,我們講一個樓房的項目封裝到了一類中,隻是我們對于他的屬性的有效性檢查還不是很完整,而且此時屬性的擷取或者賦予完全是公開的。

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

Javascript設計模式學習(一)封裝和資訊隐藏
Javascript設計模式學習(一)封裝和資訊隐藏

Code

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 />";

    }

    }

繼續閱讀