创建自己的库 ADS.js(第一版本)

伪命名空间的使用.

在javascript2.0广泛使用之前,这里说的"命名空间"都不是真正的. 只是在脚本内营造一个属于自己的小空间的小技巧而已.

如果你的使用了Prototype库, 同时你又自己写了一个 function $(){} 函数 , 你的$函数就会与 Prototype库的$函数重名,所以我们要使用命名空间, 而且是伪命名空间.

例如:

(function(){//代码})();

//代码处的代码,不能被外面访问,这就是自己的小空间了.

开始写自己的库

只有架子, 没写实现,以后会补全的,这里只是写一个写库的思想

下面是写了实现的库, ADS.js

/* *
* @author 赵磊 2009-04-25
*/
(function (){

    //ADS命名空间 Advanced DOM Scripting
    if(! window.ADS)
    {
        window.ADS= {};
    }
    //确定浏览器是否与整个库兼容
    //例子 alert(ADS.getEvent());
    function isCompatible(other){
        if(other===false
        ||! Array.prototype.push
        ||! Object.hasOwnProperty
        ||! document.createElement
        ||! document.getElementsByTagName
        ){
            return false ;
        }
        return true ;
    }
    window.ADS.isCompatible= isCompatible;
    //依据id取得元素
    //例子 ADS.$('bu1','bu2')
    function $(){
        var elements=new Array();

        //查找作为参数提供的所有元素
        for(var i=0;i<arguments.length;i++ )
        {
            var element= arguments[i];
            //如果该参数是一个字符串,假设它是一个id
            if(typeof element=='string' )
            {
                element= document.getElementById(element);
            }
            //如果只提供了一个参数,则立即返回这个元素
            if(arguments.length==1 )
            {
                return element;
            }
            //否则将它添加进数组
            elements.push(element);
        }

        //返回包含多个被请求元素的数组
        return elements;
    }
    window.ADS.$= $;
    //添加事件
    //例子 ADS.addEvent(window,'load',test6);
    //    ADS.addEvent(window,'load',test5);
    //可以为一个对象添加多个事件
    function addEvent(node,type_,listener){
        //检查兼容性
        if(!isCompatible()){return false ;}

        if(!(node=$(node))){return false ;}

        if (node.addEventListener)
        {
            //W3C的方法
            node.addEventListener(type_,listener,false );
            return true ;
        }else if (node.attachEvent)
        {
            //MS IE的方法
            node['e'+type_]= listener;
            node[type_]=function ()
            {
                node['e'+ type_](window.event);
            }
            node.attachEvent('on'+ type_,node[type_]);
            return true ;
        }
        //若两种方法都不具备
        return false ;
    }
    window.ADS.addEvent= addEvent;
    //删除事件
    //例子 ADS.removeEvent(window,'load',test6);
    function removeEvent(node,type,listener){
        if(!(node=$(node))) {return false ;}

        if (node.removeEventListener)
        {
            //W3C的方法
            node.removeEventListener(type,listener,false );
            return true ;
        }
        else if (node.detachEvent)
        {
            // MS IE 的方法
            node.detachEvent('on'+ type,node[type]);
            node[type]=null ;
            return true ;
        }
        //若两种方法都不具备
        return false ;
    }
    window.ADS.removeEvent= removeEvent;
    //依据className 查找元素(集合)
    //例子 ADS.getElementsByClassName("className","*",document);
    //返回数组
    function getElementsByClassName(className,tag,parent){
        parent=parent|| documetn;
        if(!(parent=$(parent))){return false ;}

        //查找所有匹配的标签
        var allTags=(tag=="*"&&parent.all)? parent.all:parent.getElementsByTagName(tag);
        var matchingElements=new Array();

        //创建一个正则表达示
        className=className.replace(/\-/g,"\\-" );
        var regex=new RegExp("(^|\\s)"+className+"(\\s|$)" );

        var element;
        for(var i=0;i<allTags.length;i++ )
        {
            element= allTags[i];
            if (regex.test(element.className)){
                matchingElements.push(element);
            }
        }
        return matchingElements;
    }
    window.ADS.getElementsByClassName= getElementsByClassName;
    //反复隐显
    //例子 ADS.toggleDisplay('id');
    //    ADS.toggleDisplay('id','block');
    function toggleDisplay(node,value){
        if(!(node=$(node))){return flase;}

        if(node.style.display!='none' ){
            node.style.display='none' ;
        }else {
            node.style.display=value||'' ;
        }
        return true ;
    }
    window.ADS.toggleDisplay= toggleDisplay;
    //在指定元素后面插入一个元素
    //ADS.insertAfter("bu1","bu8")
    //ADS.insertAfter(ADS.$("bu1"),ADS.$("bu8"))
    function insertAfter(node,referenceNode){
        if(!(node=$(node))){return false ;}
        if(!(referenceNode=$(referenceNode))){return false ;}
        return referenceNode.parentNode.insertBefore(node,referenceNode.nextSibling);
    }
    window.ADS.insertAfter= insertAfter;
    //删除指定元素的所有子元素
    function removeChild(parent){
        if(!(parent=$(parent))) return false ;
        while (parent.firstChild){
            parent.firstChild.parentNode.removeChild(parent.firstChild);
        }
        return parent;
    }
    window.ADS.removeChild= removeChild;
    //给指定节点添加子节点,  添加在已有子节点的前面
    //
    function prependChild(parent,newChild){
        if(!(parent=$(parent))) return false ;
        if(!(newChild=$(newChild))) return false ;
        if (parent.firstChild)
        {
            //如果存在一个子节点,则在这个节点之前插入
            parent.insertBefore(newChild,parent.firstChild)
        }else {
            //如果没有子节点,则直接插入
            parent.appendChild(newChild);
        }
        return parent;
    }
    window.ADS.prependChild= prependChild;
    // 获得事件对象
    function getEvent(){
        if (window.event)
                {
                    return window.event;
                }
                var f= getEvent.caller;
                while(f!=null )
                {
                    var e = f.arguments[0 ];
                    if(e && (e.constructor==MouseEvent||e.constructor==Event||e.constructor==KeyboardEvent)) return e;
                    f= f.caller;
                }
    }
    window.ADS.getEvent= getEvent;


})();

转自： http://elf8848.javaeye.com/blog/374788

秒客网

创建自己的库 ADS.js(第一版本)

相关文章