Prototype源碼淺析——元素選取器部分(一)之$

簡述　　

　　$ 方法是 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部分。

轉載請註明來自小西山子【http://www.cnblogs.com/xesam/】
本文地址：http://www.cnblogs.com/xesam/archive/2012/02/03/2336981.html