创建自己的库 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

posted on 2009-07-26 23:28 钱途无梁阅读(554) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

公告