オリジナルhtml要素セレクタの実装、jqueryセレクタに類似

フロントエンドを作るには、要素を選ぶ必要があります.jqueryと各jsライブラリが車輪を作ってくれたとはいえ、自分で一つ実現してみたいです.ちょうどプロジェクトも忙しくなく、ちょうど自分のjsファイルに入っています.次は実装コードです.$g(「#content.op」)というフォーマットで呼び出すことができ、jquery$()のパラメータと同じ:開発効率を500%向上させるフロントエンドUIフレームワーク！

function $findChilds(parentNode, text) 
{ 
    //          ，   body 
    if(parentNode == undefined) 
        parentNode = document.body; 
    var childNodes = parentNode.childNodes; 
    var results = []; 
    //          
    if(childNodes.length > 0) 
    { 
        var length = childNodes.length; 
        //      text    
        for(var i=0;i<length;++i) 
        { 
            //    ，className，id， tagName 
            switch(text.substr(0, 1)) 
            { 
            case '.': 
                //   :parentNode.getElementsByClassName,parentNode.all 
//       ，              ，          
                if(parentNode.getElementsByClassName) 
                    return parentNode.getElementsByClassName(text.substr(1)); 
                else if(parentNode.all) 
                { 
                    var finded = []; 
                    var jlength = parentNode.all.length; 
                    for(var j=0;j<jlength;++j) 
                        if(parentNode.all[j].className == text.substr(1)) 
                            finded.push(parentNode.all[j]); 
                    return finded; 
                } 
                //          ，     
                if(childNodes[i].className == text.substr(1)) 
                    results.push(childNodes[i]); 
                break; 
            case '#': 
                return [document.getElementById(text.substr(1))]; 
            default: 
                return parentNode.getElementsByTagName(text); 
            } 
            //    ，            $findChilds      ，                
            results = results.concat($findChilds(childNodes[i], text)); 
        } 
    } 
    return results; 
}   
   
String.prototype.vtrim = function() { 
      return this.replace(/^\s+|\s+$/g, ''); 
}   
   
function $g(text) 
{ 
    //         
    var values = text.vtrim().split(" "); 
    var length = values.length; 
    //            ，     dom      。 
    if(length == 1) 
        switch(values[0].substr(0, 1)) 
        { 
        case "#": 
            return document.getElementById(values[0].substr(1)); 
        case ".": 
            if(document.getElementsByClassName) 
                return document.getElementsByClassName(values[0].substr(1)); 
        default: 
            return document.getElementsByTagName(values[0]); 
        } 
    //                   ,          parentNodes，        body 
    var parentNodes = [document.body]; 
    //               
    for(var i = 0; i < length; ++i) 
    { 
        var jlength = parentNodes.length; 
        var results = []; 
        //    values       ， 
        //          ， 
        //  :$g("      .content");                  
        var tmpValue = values[i].vtrim(); 
        if(tmpValue.length <= 0) 
            continue; 
        //             ， 
        //                 。      body 
        for(var j=0;j<jlength;++j) 
        { 
            //$findChilds         ，              
            var result = $findChilds(parentNodes[j], values[i].vtrim()); 
            var rlength = result.length; 
            //         html  ，       concat      ，       ，            
            for (var k = 0; k < rlength; ++k) 
                results.push(result[k]); 
        } 
        //    ，    undefined 
        if(results == undefined || results.length <= 0) 
            return undefined; 
        //               ，               id  ，           dom    
        if (i == length - 1) 
        { 
            if (values[i].substr(0, 1) == "#") 
                return results[0]; 
            return results; 
        } 
        parentNodes = results; 
    } 
}

 
 
ff ie 6でのテストを経て単純にidを選択するのはjqueryよりずっと速く、他の部分の選択モードは私がテストした少数はjqueryより速い.開発効率を500%向上させるフロントエンドUIフレームワーク！もちろんテストは全面的に不可能であり、バグもある可能性があり、類似をサポートしていない.content:first-childのような擬似クラス選択.