编写一个JS组件来说说call和apply的用法(2)
作者:ComPhilip 来源:经典论坛 发布时间:2008-11-23 17:11:00
标签:call,apply,组件,函数,用户
现在让我们一点点分析代码:首先是两个数组扩展函数
Array.prototype.Add = function(item){
for(var i=0;i<this.length;i++)
if (this[i]==item)
return;
this.push(item);
}
Array.prototype.Remove = function(item){
for(var i=0;i<this.length;i++)
if (this[i]==item){
this.splice(i,1);
break;
}
}
我们为Array类添加两个方法,这样做是为了方便后面操作数组.Add方法检查数组是含有item,如果有,什么都不操作,若没有,则添加item到数组中。Remove方法检查数组是否含有item,若有则从数组删除item,没有则什么都不做。这两个方法实际上是实现集合的添加元素和删除元素的操作,要保证集合中元素的唯一性。
对JS内置类的扩展在许多JS库中都有,如ASP.NET Ajax,对JS内置类进行丰富的扩展,开发起来极其方便和高效率。
接着看看我们的主角:NumTextBox类,它的构造器如下:
function NumTextBox(controlId,min,max){
if (!controlId || typeof(controlId)!='string')
throw new Error('参数controlId为空或不是字符串类型');
if (isNaN(min))
throw new Error('参数min必须为数字');
if (isNaN(max))
throw new Error('参数max必须为数字');
min = min*1; //如果 min = '123',转化为数字类型
max = max*1;
if (min>max)
throw new Error('min不能大于max');
this._dom = null; //组件的DOM对象
this._invalidTypeHandler = []; //数据类型不正确时调用的函数数组
this._overflowHandler = []; //数据超出范围时调用的函数数组
this._min = min; //最小值
this._max = max; //最大值
this._init(); //初始化
}
controlId为组件的标识ID,待会会看到它的作用。min和max分别赋于最大值和最小值。构造器会对参数的数据合法性进行判断,如果不合法会抛出错误。
接着看看这个类的原型(prototype)的内容。
getValue : function(){ //获取当前值
return this._dom.value*1;
},
setValue : function(value){ //设置当前值
if (isNaN(value))
throw new Error('参数value必须为数字');
value = value*1;
if (value<this._min || value>this._max)
throw new Error('数据不合法');//数据不合法
this._dom.value = value;
},
getMin : function(){ //获取最小值
return this._min;
},
setMin : function(value){//设置最小值
if (isNaN(value) || value*1 > this._max)
throw new Error('参数value不是数字或大于max');
this._min = value*1;
},
getMax : function(){//获取最大值
return this._max;
},
setMax : function(value){//设置最大值
if (isNaN(value) || value*1 < this._min)
throw new Error('参数value不是数字或大于max');
this._max = value;
},
对于getValue, setValue, getMin, setMin, getMax, setMax这样的方法实际上是提供属性。因为JS不支持属性,所以我采用这样的命名方式。在ASP.NET Ajax中,也采用类似的方式。我们也可以直接调用类的 _min,_max等字段进行赋值,但这样做就不能保证数据的合法性,通过方法来赋值可以先检验数据,这也就是属性的本质作用。


猜你喜欢
- 本文实例讲述了微信小程序学习笔记之文件上传、下载操作。分享给大家供大家参考,具体如下:前面介绍了微信小程序登录API与获取用户信息操作。这里
- 写在前面:在做表格的时候,难免会碰到做统计的时候。由于在项目中涉及到做统计的功能比较简单,之后也就没有过多的去研究更复杂的,这里简单记录下。
- 引言:本人从小白自学python,为了测试基础学习效果,增加一定的促进,想通过参加全国计算机等级考试二级python来检验基础学习情况。在学
- 1. 引言词云图可以让我们方便地识别出文本中的关键词,其中单词的大小代表它们的频率。有了这个,我们甚至在阅读之前就可以很好地了解文本的内容。
- 什么是Flyway?转载:https://blog.waterstrong.me/flyway-in-practice/Flyway is
- 很长时间以来,一直想将自己的一些零碎的想法总结下,给自己一个完整的思维,也算是做个存档。一家之言,绝不敢说对别人会有什么帮助,对外人的层面上
- mysql5.7版本:方法1: 用SET PASSWORD命令 格式:mysql> set password f
- 因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函
- 如何用眼睛来控制鼠标?一种基于单一前向视角的机器学习眼睛姿态估计方法。在此项目中,每次单击鼠标时,我们都会编写代码来裁剪你们的眼睛图像。使用
- Flappy Bird是前段时间(好像一年or两年前....)特别火的有一个小游戏,相信大家都玩过。Flappy Bird操作简单,通过点击
- 数据结构&Series:'''series {索引 + 数据} 形式索引是自动生成的''
- 1. 引言本文是数独游戏问题求解的第二篇,在前文中我们使用回溯算法实现了最简单版本的数独游戏求解方案。本文主要在前文解决方案的基础上,来思考
- 最近做网站期间遇到个问题,就是用到比较流行的lightbox效果,就是点击链接后会弹出个固定大小窗口,弹出后窗口下面的内容是被遮罩掉的,最近
- 本文实例为大家分享了python发邮件精简代码,供大家参考,具体内容如下import smtplibfrom email.mime.text
- 在查询凭证、审核凭证时出现“列前缀tempdb.无效: 未指定表名”的错误提示,怎么解决?原因:是因为SQL2000无法识别计算机名称中”-
- 最近去公司,连续几天被保安查健康码,觉得他们效率有点慢,排了长队,回到家就来兴致,写了个简易的健康码识别系统(主要是针对上海的健康码 随申码
- 前言:大家都知道python项目中需要导入各种包(这里的包引鉴于java中的),官话来讲就是Module。而什么又是Module呢,通俗来讲
- 什么是事件委托/事件代理利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素的相关行为都会被触发),如果一个容器中有很多元素都要
- 首先,创建一个存储过程 get_clob: t_name:要查询的表名;f_name:要查询的字段名;u_id:表的主键,查询条件;l_po
- 因为有把python程序打包成exe的需求,所以,有了如下的代码import timeclass LoopOver(Exception):