js defineSetter -給js的 "class"自動(dòng)增加一個(gè)set的屬性(方法)
更新時(shí)間:2007年06月02日 00:00:00 作者:
寫注釋不是我的強(qiáng)項(xiàng),有什么問題請(qǐng)?jiān)谠u(píng)論中寫出來:D
寫一個(gè)JS class時(shí),如
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
為了容易理解代碼,以及更好的區(qū)分public和private的變量,我通常用set...方法(...為某(些)成員變量)來賦值給類的成員。這些set方法當(dāng)然就是public的。還有一點(diǎn)就是使代碼能夠更規(guī)范一些。
然而問題就出在這里,如果以上代碼不考慮驗(yàn)證有效性(或者只驗(yàn)證簡(jiǎn)單的有效性),那我們就會(huì)多出很多的代碼,試想一個(gè)類有20個(gè)成員(屬性),那么我們就得加20個(gè)set...方法,實(shí)在多余,因此,要想辦法來解決這個(gè)問題。
回憶在Mozilla中,有__defineSetter__和__defineGetter__的方法來給DOM增加成員,給開發(fā)人員帶來很多方便。我們也來仿一個(gè)js版的__defineSetter。
簡(jiǎn)單的思路:
利用JS動(dòng)態(tài)給對(duì)象增加方法(或?qū)傩裕?
但類中方法不必再添加set...此類方法。
非[a-z]區(qū)間的屬性也不再添加set...此類方法。
寫出實(shí)現(xiàn)代碼
基本實(shí)現(xiàn)了_defineSetter,而我們要一個(gè)個(gè)的defineSetter豈不是太麻煩了。既然已經(jīng)實(shí)現(xiàn)了原型,那么用原型來動(dòng)態(tài)綁定到Function對(duì)象上,一行代碼就解決了set..方法了。
Function.prototype.defineAllSetter = function (hdle) {
for (var i in this.prototype)
_defineSetter.apply(this, [this,i,hdle]);
return this;
};
接下來就是再綁定一個(gè)defineSetter給Function對(duì)象。
Function.prototype.defineSetter = function (p, hdle) {
return _defineSetter.apply(this,
[this].concat(Array.prototype.slice.call(arguments,0)));
};
OK!基本完成想要的功能。try it...
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]本例DEMO及全部代碼:
http://www.never-online.net/code/js/defineSetter/
當(dāng)然,我們還可以加入驗(yàn)證~,具體的代碼我就不再多寫了,呵呵,已經(jīng)實(shí)現(xiàn)了,有興趣的朋友也試著玩一下:D。
寫一個(gè)JS class時(shí),如
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
為了容易理解代碼,以及更好的區(qū)分public和private的變量,我通常用set...方法(...為某(些)成員變量)來賦值給類的成員。這些set方法當(dāng)然就是public的。還有一點(diǎn)就是使代碼能夠更規(guī)范一些。
然而問題就出在這里,如果以上代碼不考慮驗(yàn)證有效性(或者只驗(yàn)證簡(jiǎn)單的有效性),那我們就會(huì)多出很多的代碼,試想一個(gè)類有20個(gè)成員(屬性),那么我們就得加20個(gè)set...方法,實(shí)在多余,因此,要想辦法來解決這個(gè)問題。
回憶在Mozilla中,有__defineSetter__和__defineGetter__的方法來給DOM增加成員,給開發(fā)人員帶來很多方便。我們也來仿一個(gè)js版的__defineSetter。
簡(jiǎn)單的思路:
利用JS動(dòng)態(tài)給對(duì)象增加方法(或?qū)傩裕?
但類中方法不必再添加set...此類方法。
非[a-z]區(qū)間的屬性也不再添加set...此類方法。
寫出實(shí)現(xiàn)代碼
基本實(shí)現(xiàn)了_defineSetter,而我們要一個(gè)個(gè)的defineSetter豈不是太麻煩了。既然已經(jīng)實(shí)現(xiàn)了原型,那么用原型來動(dòng)態(tài)綁定到Function對(duì)象上,一行代碼就解決了set..方法了。
Function.prototype.defineAllSetter = function (hdle) {
for (var i in this.prototype)
_defineSetter.apply(this, [this,i,hdle]);
return this;
};
接下來就是再綁定一個(gè)defineSetter給Function對(duì)象。
Function.prototype.defineSetter = function (p, hdle) {
return _defineSetter.apply(this,
[this].concat(Array.prototype.slice.call(arguments,0)));
};
OK!基本完成想要的功能。try it...
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
http://www.never-online.net/code/js/defineSetter/
當(dāng)然,我們還可以加入驗(yàn)證~,具體的代碼我就不再多寫了,呵呵,已經(jīng)實(shí)現(xiàn)了,有興趣的朋友也試著玩一下:D。
相關(guān)文章
使用JS實(shí)現(xiàn)氣泡跟隨鼠標(biāo)移動(dòng)的動(dòng)畫效果
氣泡跟隨鼠標(biāo)移動(dòng),并在每次點(diǎn)擊時(shí)產(chǎn)生不同的變化,效果非常迷人,下面小編給大家?guī)砹?,基于js實(shí)現(xiàn)的氣泡效果實(shí)例代碼,需要的朋友參考下吧2017-09-09JS實(shí)現(xiàn)的數(shù)字格式化功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的數(shù)字格式化功能,結(jié)合實(shí)例形式分析了javascript針對(duì)數(shù)字與字符的相關(guān)運(yùn)算處理技巧,需要的朋友可以參考下2017-02-02基于JavaScript實(shí)現(xiàn)文字超出部分隱藏
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)文字超出部分隱藏 的相關(guān)資料,需要的朋友可以參考下2016-02-02JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼
本篇文章主要是對(duì)JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08JS+CSS簡(jiǎn)單樹形菜單實(shí)現(xiàn)方法
這篇文章主要介紹了JS+CSS簡(jiǎn)單樹形菜單實(shí)現(xiàn)方法,涉及JavaScript結(jié)合css動(dòng)態(tài)操作頁面元素結(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09