js defineSetter -給js的 "class"自動(dòng)增加一個(gè)set的屬性(方法)

2019-11-21 02:03:37

字體：大中小

供稿：網(wǎng)友

寫(xiě)注釋不是我的強(qiáng)項(xiàng)，有什么問(wèn)題請(qǐng)?jiān)谠u(píng)論中寫(xiě)出來(lái):D

寫(xiě)一個(gè)JS class時(shí)，如

為了容易理解代碼，以及更好的區(qū)分public和private的變量，我通常用set...方法(...為某（些）成員變量）來(lái)賦值給類(lèi)的成員。這些set方法當(dāng)然就是public的。還有一點(diǎn)就是使代碼能夠更規(guī)范一些。

然而問(wèn)題就出在這里，如果以上代碼不考慮驗(yàn)證有效性（或者只驗(yàn)證簡(jiǎn)單的有效性），那我們就會(huì)多出很多的代碼，試想一個(gè)類(lèi)有20個(gè)成員（屬性），那么我們就得加20個(gè)set...方法，實(shí)在多余，因此，要想辦法來(lái)解決這個(gè)問(wèn)題。

回憶在Mozilla中，有__defineSetter__和__defineGetter__的方法來(lái)給DOM增加成員，給開(kāi)發(fā)人員帶來(lái)很多方便。我們也來(lái)仿一個(gè)js版的__defineSetter。

簡(jiǎn)單的思路：
利用JS動(dòng)態(tài)給對(duì)象增加方法（或?qū)傩裕?
但類(lèi)中方法不必再添加set...此類(lèi)方法。
非[a-z]區(qū)間的屬性也不再添加set...此類(lèi)方法。

寫(xiě)出實(shí)現(xiàn)代碼

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

基本實(shí)現(xiàn)了_defineSetter，而我們要一個(gè)個(gè)的defineSetter豈不是太麻煩了。既然已經(jīng)實(shí)現(xiàn)了原型，那么用原型來(lái)動(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;

};

接下來(lái)就是再綁定一個(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)證~，具體的代碼我就不再多寫(xiě)了，呵呵，已經(jīng)實(shí)現(xiàn)了，有興趣的朋友也試著玩一下:D。

上一篇：Javascript & DHTML 實(shí)例編程（教程）基礎(chǔ)知識(shí)

下一篇：把JS與CSS寫(xiě)在同一個(gè)文件里的書(shū)寫(xiě)方法