js defineSetter -给js的 "class"自动增加一个set的属性(方法)

写注释不是我的强项，有什么问题请在评论中写出来:D

写一个JS class时，如

function jsclass() {};

jsclass.prototype = {

value: "never-online", //属性1

URL: "www.url.net", //属性2

setValue: function (v) { //set方法
this.value = v;
},

setURL: function (v) { //set方法
if (/^www\.[a-z]|\-{2,}\.net|com$/i.test(v)) {
this.URL = v;
}
},

print: function () { //打印
alert(this.value);
alert(this.URL);
}
}

var o = new jsclass();
o.setValue("never-online'blog");
o.setURL("www.never-online.net");
o.print()

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

为了容易理解代码，以及更好的区分public和private的变量，我通常用set...方法(...为某（些）成员变量）来赋值给类的成员。这些set方法当然就是public的。还有一点就是使代码能够更规范一些。

然而问题就出在这里，如果以上代码不考虑验证有效性（或者只验证简单的有效性），那我们就会多出很多的代码，试想一个类有20个成员（属性），那么我们就得加20个set...方法，实在多余，因此，要想办法来解决这个问题。

回忆在Mozilla中，有__defineSetter__和__defineGetter__的方法来给DOM增加成员，给开发人员带来很多方便。我们也来仿一个js版的__defineSetter。

简单的思路：
利用JS动态给对象增加方法（或属性）
但类中方法不必再添加set...此类方法。
非[a-z]区间的属性也不再添加set...此类方法。

写出实现代码


var _defineSetter = function (self, p, hdle) {
//如果属性为空或js中认为是false的值，则返回
if (!p || !self || "function"!=typeof self)
return null;
//强制转型，并将self置为该Function(即class)的引用，当然你也可以添加类中属性set方法，而非prototype属性的set方法
p = String(p); self = self.prototype;
//如果该成员不是一个方法(function)，则添加set..方法
if ("function"!=typeof self[p]) {
var n = (function _n (n) {
n = String(n); for (var i=0; i
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

基本实现了_defineSetter，而我们要一个个的defineSetter岂不是太麻烦了。既然已经实现了原型，那么用原型来动态绑定到Function对象上，一行代码就解决了set..方法了。
Function.prototype.defineAllSetter = function (hdle) {

for (var i in this.prototype)
  _defineSetter.apply(this, [this,i,hdle]);

return this;

};

接下来就是再绑定一个defineSetter给Function对象。

Function.prototype.defineSetter = function (p, hdle) {

return _defineSetter.apply(this, 
  [this].concat(Array.prototype.slice.call(arguments,0)));

};

OK!基本完成想要的功能。try it...

//http://www.never-online.net");
o.setName("never-online");
o.setBlog("never-online's blog");
o.println();
//]]>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

本例DEMO及全部代码:
http://www.never-online.net/code/js/defineSetter/

当然，我们还可以加入验证~，具体的代码我就不再多写了，呵呵，已经实现了，有兴趣的朋友也试着玩一下:D。

赞 (0)

相关推荐

  • javascript中的__defineGetter__和__defineSetter__介绍

    Getter是一种获取一个属性的值的方法,Setter是一种设置一个属性的值的方法.可以为任何预定义的核心对象或用户自定义对象定义getter和setter方法,从而为现有的对象添加新的属性. 有两种方法来定义Getter或Setter方法: 1.在对象初始化时定义 2.在对象定义后通过Object的__defineGetter__.__defineSetter__方法来追加定义 在使用对象初始化过程来定义Getter和Setter方法时唯一要做的事情就是在getter方法前面加上"get&qu

  • JavaScript之Getters和Setters 平台支持等详细介绍

    来自John Resig早年的文章,大致翻译了一下,以作备忘. 令人高兴的是,我想我终于可以说,"现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关".靠,我为了说这句话已经等了很久了. 首先,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters. Getters和Setters Getters和Setters使你可以快速获

  • JavaScript中setter和getter方法介绍

    javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

  • js defineSetter -给js的 "class"自动增加一个set的属性(方法)

    写注释不是我的强项,有什么问题请在评论中写出来:D 写一个JS class时,如 function jsclass() {}; jsclass.prototype = { value: "never-online", //属性1 URL: "www.url.net", //属性2 setValue: function (v) { //set方法 this.value = v; }, setURL: function (v) { //set方法 if (/^www\.

  • JS实现点击按钮自动增加一个单元格的方法

    本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个单元格 复制代码 代码如下: <HTML> <HEAD> <TITLE>js动态生成表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-

  • js实现点击切换和自动播放的轮播图

    js实现点击切换和自动播放的轮播图

    本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下 轮播图案例 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0"&

  • js实现加载页面就自动触发超链接的示例

    js实现加载页面就自动触发超链接的示例

    如下所示: 以上这篇js实现加载页面就自动触发超链接的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JS字符串长度判断,超出进行自动截取的实例(支持中文)

    JS字符串长度判断,超出进行自动截取的实例(支持中文)

    今天一个小弟问我的问题,在文本框中输入字符,如果超出指定长度,就把它截取,要求中文等于两个字符的长度,我找一下资料,把这个功能实现了, 下面是JS代码: <html> <script src="http://jb51.net/script/jquery.js" type="text/javascript"></script> <body> <input type="text" name=&qu

  • JS输入用户名自动显示邮箱后缀列表的方法

    本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

  • JS实现先显示大图后自动收起显示小图的广告代码

    JS实现先显示大图后自动收起显示小图的广告代码

    本文实例讲述了JS实现先显示大图后自动收起显示小图的广告代码.分享给大家供大家参考.具体如下: 这是一个非常不错的JavaScript图片特效,当最初打开网页的时候,显示的是大图片,就像遮屏广告一样,停留一会后,自动缓慢收起,这时由JS控制更换广告图片,始终显示在网页顶部,在一些大门户网站我们经常见到这种效果,个人感觉挺酷哦! 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-big-to-small-pic-adv-codes/ 具体代

  • js实现固定显示区域内自动缩放图片的方法

    本文实例讲述了js实现固定显示区域内自动缩放图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • 页面加载完后自动执行一个方法的js代码

    1.在body中用onload: <body onload="myfunction()"> 2.在脚本中用window.onload: <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号 </scr

  • JS实现超过长度限制后自动跳转下一款文本框的方法

    本文实例讲述了JS实现超过长度限制后自动跳转下一款文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

随机推荐