【Javascript】Prototype源码浅析—元素选择器部分(一)之$

2012-02-03

简述  

$ 方法是 Prototype 的基础,和jquery中的$作用差不多,不过功能却弱了很多。 因为Prototype中还有一个加了一倍的钱,功能肯定就丰富撒。本文主要是剖析$方法,1.7版本的$$方法使用的是Sizzle引擎,比较复杂,是后面的事情。

基本原理

$ 方法其实比较简单,平时在个人的代码中见得也比较多。 基本原理就是如果传入的是一个字符串,就执行document.getElementById方法,如果是一个DOM元素,就直接返回传入的元素,代码实现:

function _$(element){
    if(typeof element == 'string'){
        element = document.getElementById(element);
    }
    return element;
}

改进版本,如果传入的是多个字符串id:

//如果传入的是多个id,保留上面一个函数
function $(element){
    if(arguments.length > 1){
        for(var i = 0,elements = [],len = arguments.length; i < len; i++){
            if(typeof element == 'string'){
                element = _$(element);
            }
            elements.push(element);
        }
    }
    return elements;
}

由于_$中已经做了类型判断,所以_$1中的还可以换种形式,上面的函数还可以换种形式:

function $(element){
    if(arguments.length > 1){
        for(var i = 0,elements = [],len = arguments.length; i < len; i++){
            elements.push(_$(element));
        }
    }
    return elements;
}

可以组合到一个函数里面:

function $(element){
    if(arguments.length > 1){
        for(var i = 0,elements = [],len = arguments.length; i < len; i++){
            elements.push($(element));
        }
        return elements;
    }
    if(typeof element == 'string'){
        element = document.getElementById(element);
    }
    return element;
    //最后一步,这里返回的是扩展了的Element元素,于是return Element.extend(element);
}

需要说明的一点是,上面只是获取了目标元素,而且返回的结果里面包含的都是原生的DOM元素,相比Prototype的实现,少了一步元素的扩展,这个留到Element部分。

如有问题,请咨询QQ群 723245925


文档信息 by XiaoPingYuan

版权声明:自由转载-非商用-非衍生-保持署名。发表日期:2012-02-03 by XiaoPingYuan(https://xesam.github.io/)