建立自己的JS库【初始篇】

现在js的库在网上有很多种，使用量最大的可能要属jQuery了。我自己也喜欢用jQuery，JS库使用起来会比原生的JavaScript要方便很多，而且可以减少代码量。

但是个人觉得不能过度依赖于JS库，对于最基本的原生js还是要熟练掌握。

看了JS---创建自己的“JavaScript库”，原来如此简单  的文章，也研究了一些相关的资料，决定自己开始尝试建立自己的JS库。

先尝试着写了三个最基本的功能：通过id、tagName、className来找到节点（元素）。虽然原生的JS里已经有相关的方法如：getElementById();  getElementsByTagName();   如今在DOM3里已经加入了getElementsByClassName这个方法，然而IE9、10以外的其它版本均不支持。

所以防照了jQuery的方法，用$("#idName ")  $("tagName")  $("tagname.className")来实现。比如：

$("#id1 ")   -->  查找id名为id1的元素

$("p")    -->  查找所有标签为p的元素，此时返回的是数组

$("p.class1")  -->  查找标签为p且类名为class1的元素，此时返回的是数组

先看看完整的文件Cu_Yajing.js:

(function(){
    //注册命名空间 'Cuyaj' 到window对象上
    window['Cuyaj']={};
    
    //把函数注册到命名空间：
    window['Cuyaj']['$']=$;
    
    //getElementById:
    function $(sString){
        var reId=/^#(\w+)/;    //id正则表达
        var reTagName=/^(\w+)$/;    //tagName正则表达
        var reClassName=/^(\w+)\.(\w+)$/;    //className正则表达
        //alert(reClassName.test(sString));

        if(reId.test(sString)){
            //通过id名查找
            var sId=sString.replace(reId,function(sMatch){
                return sString.replace(/#/,"");
            });
            var oObject=document.getElementById(sId);
        }else if(reTagName.test(sString)){
            //通过标签名查找
            var oObject=document.getElementsByTagName(sString);
        }else if(reClassName.test(sString)){
            //通过类名查找
            var arr=sString.split(".");
            
            var sParentTag=arr[0];    //对象的标签名
            var sClassName=arr[1];    //对象的类名
            
            var arrObject =document.getElementsByTagName(sParentTag);
            var oObject=[];
            for (var i=0;i<arrObject.length ;i++ )
            {
                if(arrObject[i].className==sClassName){
                    oObject.push(arrObject[i]);
                };
            };
        };
        return oObject;

    };
    
})();

这里首先使用匿名，可以达到不暴露私有成员的目的。（匿名函数的概念可以参考文章最后的参考链接）：

//匿名函数
(function(){
    //code,运行的代码
})();

然后注册命名空间，注册我们要用到的$（）函数：

//注册命名空间 'Cuyaj' 到window对象上
window['Cuyaj']={};

//把函数注册到命名空间：
window['Cuyaj']['$']=$;

最后是$()函数部分，这里我们分成三个部分来看。

一、通过ID名查找：

首先应该确定id的书写规则，这里我们认为id名应该是由字母、数字以及下划线组成。在这个方法里，设定的是通过id名查找，id名前面加“#”，如$("#id1")。所以正则表达式应该为：

var reId=/^#(\w+)/;    //id正则表达

然后剩下的就通过 原生的getElementById()的方法，不过在此之前要先判断用户输入的参数sString是不是匹配id的格式，匹配后用replace（）方法去掉“#”得到真正的id名：

//先判断用户输入的参数sString是不是匹配id的格式:
if(reId.test(sString)){
	//通过id名查找
	var sId=sString.replace(reId,function(sMatch){
                return sString.replace(/#/,"");
	});
	var oObject=document.getElementById(sId);
}

二、通过标签名查找：

同样，确定书写规则;

var reTagName=/^(\w+)$/;    //tagName正则表达

这里需要注意的是用^和$来匹配整个字符串，如果只是以/(\w+)/来匹配字符串，就会使得下面匹配类名（如p.class1）的时候将其归到了这一种情况。

判断用户输入的参数sString是不是匹配标签的格式，然后通过 原生的getElementsByTagName()的方法：

if(reTagName.test(sString)){
	//通过标签名查找
	var oObject=document.getElementsByTagName(sString);
}

这时候返回的会是数组，使用时应该这样：

//不论是否有多个<p />元素，都要访问数组元素才能访问到该节点
var arrP = Cu_Yaj.$("p");
alert(arrP[0].innerHTML);

三、通过类名查找：

var reClassName=/^(\w+)\.(\w+)$/;    //className正则表达

if(reClassName.test(sString)){
            //通过类名查找
            var arr=sString.split(".");
            
            var sParentTag=arr[0];    //对象的标签名
            var sClassName=arr[1];    //对象的类名
            
            var arrObject =document.getElementsByTagName(sParentTag);
            var oObject=[];
            for (var i=0;i<arrObject.length ;i++ )
            {
                if(arrObject[i].className==sClassName){
                    oObject.push(arrObject[i]);
                };
            };
        };

这里先要用split()函数，通过“.”将输入的字符串分成数组，该数组有两个元素：一个是.号前，代表标签名；一个是.号后面的部分，这部分就是类名了。

然后通过getElementsByTagName()方法获取所有的该标签对象，存在数组arrObject[]中。然后遍历，当匹配到类名相同时，就将这个对象添加到结果数组（oObject[]）中。

函数最后：

return oObject;

可以参考一下对javascript匿名函数的理解（透彻版)