网络编程
位置:首页>> 网络编程>> JavaScript>> 编写一个JS组件来说说call和apply的用法(2)

编写一个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等字段进行赋值,但这样做就不能保证数据的合法性,通过方法来赋值可以先检验数据,这也就是属性的本质作用。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com