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

伪命名空间的使用.

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

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

例如:

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

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

开始写自己的库

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

(function(){
	
	//ADS命名空间 Advanced DOM Scripting
	if(!window.ADS)
	{
		window.ADS={};
	}	
	//确定浏览器是否与整个库兼容
	//例子 alert(ADS.getEvent());
	function isCompatible(other){}
	window.ADS.isCompatible=isCompatible;
	//取得元素
	//例子 ADS.$('bu1','bu2')
	function $(){}
	window.ADS.$=$;
	//添加事件
	//例子 ADS.addEvent(window,'load',test6);
	function addEvent(node,type_,listener){}
	window.ADS.addEvent=addEvent;
	//删除事件
	//例子 ADS.removeEvent(window,'load',test6);
	function removeEvent(node,type,listener){}
	window.ADS.removeEvent=removeEvent;
	
	function getElementsByClassName(className,tag,parent){}
	window.ADS.getElementsByClassName=getElementsByClassName;
	
	function toggleDisplay(node,value){}
	window.ADS.toggleDisplay=toggleDisplay;
	
	function removeChild(parent){}
	window.ADS.removeChild=removeChild;
	
	function prependChild(parent,newChild){}
	window.ADS.prependChild=prependChild;
	// 获得事件对象
	function getEvent(){}
	window.ADS.getEvent=getEvent;
	
	
})();

下面是写了实现的 库, 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;
	
	
})();

你可能感兴趣的:(js)