建立優美的物件導向JS程式設計風格

2021-05-10 01:44:12 字數 1971 閱讀 9373

由於js語言自身語法的靈活性,使得在js程式中出現了各種各樣的**風格,但也正因為如此,導致了**的可讀性和可維護性大大降低,特別隨著專案的不斷更新,js**的不斷增多,到後期維護時甚至連自己寫的**都不知所以然了,因此確定一種好的**風格是很有必要的。

近兩年隨著ajax的興起,js變得越來越受「重用」,js開始在web開發中中充當著非常重要的角色,因此也開始遇到了各種各樣的問題。於是很多牛人們就提出了js的物件導向程式設計方法。

使用物件導向的程式設計思想實現js**其實也並不難,實現方法也又多種,比如prototype原型,new object()等方法。前面的每個方法都有其自己的優缺點,但都存在乙個問題,那就是對於js變數作用域的控制。如果不能很好控制js變數作用域,就可能導致物件內部變數被外部肆意修改,從而導致程式被破壞,不便於程式的維護,物件的封裝特性和程式健壯性都大打折扣。被由於js本身沒有很好的對變數範圍的定義(public/private等限定符),因此在js的物件導向程式設計中也就遇到了變數的控制問題,特別是對於物件內部的公有變數在prototype原型方法中都很難實現。

如下面一段程式:

function

testcls(a)

testcls.prototype.alerta

=function

()var

test

=new

testcls(5);

test.alerta();  

//彈出5

alert(test.a);  

//同樣彈出5

要在其方法alerta中顯示物件的內部公用變數a的值就必須在建構函式中通過this賦值,然後在方法中通過this引用。這樣本身是沒有什麼問題,但這樣a變數其實就成了乙個全域性變數,任何testcls的物件都可以直接引用到a,如上例中通過test.a獲取到a的值。但很多時候我們並不希望一些物件變數對外公開,即不允許外部程式訪問。這應該如何實現呢?如何才能實現一種更好的物件導向程式設計方式呢?

當然我們可能都會想到這種方式:

vartestcls

=function

(arg1)

this.c=

5;this

.seta

=function

(v);

this

.alerta

=function

();this

.alertb

=function()}

vartest

=new

testcls(4);

test.seta(6);

test.alerta();

test.alertb();

這樣其實也很好解決了上面提到的問題,但是總又點**觀,所有變數和方式都混雜在一起看起來很難區分哪些是可以公開訪問哪些是不允許公開訪問的,哪些是物件的私有變數和公開變數。這樣在可讀性上就有點差強人意了,我們可以去尋找一種更為雅觀的實現方式。

其實只要利用js的閉包特性這個問題就很好搞定了,這也是俺從ext的原始碼中學習到的。

示例**如下:

vartestcls

=function

(arg1)

//外部可訪問區域

return

,alerta:

function

(),alertb:

function()}

};var

test

=new

testcls(4);

test.seta(6);

test.alerta();

test.alertb();

同樣的實現上面的功能,而且將物件私有變數和公有變數完全分開區域,一目了然,很容易區分出哪些是私有變數哪些是公有變數,這樣程式的可讀性就得到了大大的提高,而且對物件變數也得到了很好的控制。

如此優美的實現方法,真的讓我們不得不嘆服js的偉大,當然也要贊一下extjs的開發者們。

物件導向程式設計風格 基於物件程式設計風格

本文主要通過實現thread 類來展現兩種程式設計風格的不同點。很多人沒有區分 物件導向 和 基於物件 兩個不同的概念。物件導向的三大特點 封裝,繼承,多型 缺一不可。通常 基於物件 是使用物件,但是無法利用現有的物件模板產生新的物件型別,繼而產生新的物件,也就是說 基於物件 沒有繼承的特點。而 多...

JS物件導向程式設計之建立物件模式

function createperson name,age,job return o var person1 createperson nicholas 29,software engineer var person2 createperson greg 27,doctor 優點 抽象了建立具體物...

JS物件導向程式設計 物件

一般面向過程的寫法都是寫很多function,壞處 1.復用不好 2.函式名稱容易重複衝突 下面介紹物件導向的寫法 在js中每個函式function都是乙個物件。比如,下面這個就是乙個物件,我們在使用的時候就可以當作物件來使用。function helloworld 使用下面測試函式 呼叫該函式就會...