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

伪命名空间的使用.

  伦理片 http://www.dotdy.com/

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

 

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

 

例如:

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

 

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

 

 

开始写自己的库

 

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

Js代码  

1. (function(){  
2.       
3.     //ADS命名空间 Advanced DOM Scripting  
4.     if(!window.ADS)  
5.     {  
6.         window.ADS={};  
7.     }     
8.     //确定浏览器是否与整个库兼容  
9.     //例子 alert(ADS.getEvent());  
10.     function isCompatible(other){}  
11.     window.ADS.isCompatible=isCompatible;  
12.     //取得元素  
13.     //例子 ADS.$('bu1','bu2')  
14.     function $(){}  
15.     window.ADS.$=$;  
16.     //添加事件  
17.     //例子 ADS.addEvent(window,'load',test6);  
18.     function addEvent(node,type_,listener){}  
19.     window.ADS.addEvent=addEvent;  
20.     //删除事件  
21.     //例子 ADS.removeEvent(window,'load',test6);  
22.     function removeEvent(node,type,listener){}  
23.     window.ADS.removeEvent=removeEvent;  
24.       
25.     function getElementsByClassName(className,tag,parent){}  
26.     window.ADS.getElementsByClassName=getElementsByClassName;  
27.       
28.     function toggleDisplay(node,value){}  
29.     window.ADS.toggleDisplay=toggleDisplay;  
30.       
31.     function removeChild(parent){}  
32.     window.ADS.removeChild=removeChild;  
33.       
34.     function prependChild(parent,newChild){}  
35.     window.ADS.prependChild=prependChild;  
36.     // 获得事件对象  
37.     function getEvent(){}  
38.     window.ADS.getEvent=getEvent;  
39.       
40.       
41. })();  

 

 

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

Js代码  

1. /** 
2.  * @author 赵磊 2009-04-25 
3.  */  
4. (function(){  
5.       
6.     //ADS命名空间 Advanced DOM Scripting  
7.     if(!window.ADS)  
8.     {  
9.         window.ADS={};  
10.     }     
11.     //确定浏览器是否与整个库兼容  
12.     //例子 alert(ADS.getEvent());  
13.     function isCompatible(other){  
14.         if(other===false  
15.         ||!Array.prototype.push  
16.         ||!Object.hasOwnProperty  
17.         ||!document.createElement  
18.         ||!document.getElementsByTagName  
19.         ){  
20.             return false;  
21.         }  
22.         return true;  
23.     }  
24.     window.ADS.isCompatible=isCompatible;  
25.     //依据id取得元素  
26.     //例子 ADS.$('bu1','bu2')  
27.     function $(){  
28.         var elements=new Array();  
29.           
30.         //查找作为参数提供的所有元素  
31.         for(var i=0;i<arguments.length;i++)  
32.         {  
33.             var element=arguments[i];  
34.             //如果该参数是一个字符串,假设它是一个id  
35.             if(typeof element=='string')  
36.             {  
37.                 element=document.getElementById(element);  
38.             }  
39.             //如果只提供了一个参数,则立即返回这个元素  
40.             if(arguments.length==1)  
41.             {  
42.                 return element;  
43.             }  
44.             //否则将它添加进数组  
45.             elements.push(element);  
46.         }  
47.           
48.         //返回包含多个被请求元素的数组  
49.         return elements;  
50.     }  
51.     window.ADS.$=$;  
52.     //添加事件  
53.     //例子 ADS.addEvent(window,'load',test6);  
54.     //    ADS.addEvent(window,'load',test5);  
55.     //可以为一个对象添加多个事件  
56.     function addEvent(node,type_,listener){  
57.         //检查兼容性  
58.         if(!isCompatible()){return false;}        
59.           
60.         if(!(node=$(node))){return false;}  
61.           
62.         if(node.addEventListener)  
63.         {  
64.             //W3C的方法  
65.             node.addEventListener(type_,listener,false);  
66.             return true;  
67.         }else if(node.attachEvent)  
68.         {             
69.             //MS IE的方法  
70.             node['e'+type_]=listener;  
71.             node[type_]=function()  
72.             {                 
73.                 node['e'+type_](window.event);  
74.             }             
75.             node.attachEvent('on'+type_,node[type_]);             
76.             return true;  
77.         }  
78.         //若两种方法都不具备  
79.         return false;  
80.     }  
81.     window.ADS.addEvent=addEvent;  
82.     //删除事件  
83.     //例子 ADS.removeEvent(window,'load',test6);  
84.     function removeEvent(node,type,listener){  
85.         if(!(node=$(node))) {return false;}  
86.           
87.         if(node.removeEventListener)  
88.         {  
89.             //W3C的方法  
90.             node.removeEventListener(type,listener,false);  
91.             return true;  
92.         }  
93.         else if(node.detachEvent)  
94.         {  
95.             // MS IE 的方法  
96.             node.detachEvent('on'+type,node[type]);  
97.             node[type]=null;  
98.             return true;  
99.         }  
100.         //若两种方法都不具备  
101.         return false;  
102.     }  
103.     window.ADS.removeEvent=removeEvent;  
104.     //依据className 查找元素(集合)  
105.     //例子 ADS.getElementsByClassName("className","*",document);  
106.     //返回 数组  
107.     function getElementsByClassName(className,tag,parent){  
108.         parent=parent||documetn;  
109.         if(!(parent=$(parent))){return false;}  
110.           
111.         //查找所有匹配的标签  
112.         var allTags=(tag=="*"&&parent.all)?parent.all:parent.getElementsByTagName(tag);  
113.         var matchingElements=new Array();  
114.           
115.         //创建一个正则表达示  
116.         className=className.replace(/\-/g,"\\-");  
117.         var regex=new RegExp("(^|\\s)"+className+"(\\s|$)");  
118.           
119.         var element;  
120.         for(var i=0;i<allTags.length;i++)  
121.         {  
122.             element=allTags[i];  
123.             if(regex.test(element.className)){  
124.                 matchingElements.push(element);  
125.             }  
126.         }  
127.         return matchingElements;  
128.     }  
129.     window.ADS.getElementsByClassName=getElementsByClassName;  
130.     //反复隐显  
131.     //例子 ADS.toggleDisplay('id');  
132.     //    ADS.toggleDisplay('id','block');  
133.     function toggleDisplay(node,value){  
134.         if(!(node=$(node))){return flase;}  
135.           
136.         if(node.style.display!='none'){  
137.             node.style.display='none';  
138.         }else{  
139.             node.style.display=value||'';  
140.         }  
141.         return true;  
142.     }  
143.     window.ADS.toggleDisplay=toggleDisplay;  
144.     //在指定元素后面插入一个元素  
145.     //ADS.insertAfter("bu1","bu8")  
146.     //ADS.insertAfter(ADS.$("bu1"),ADS.$("bu8"))      
147.     function insertAfter(node,referenceNode){  
148.         if(!(node=$(node))){return false;}  
149.         if(!(referenceNode=$(referenceNode))){return false;}  
150.         return referenceNode.parentNode.insertBefore(node,referenceNode.nextSibling);  
151.     }  
152.     window.ADS.insertAfter=insertAfter;   
153.     //删除指定元素的所有子元素  
154.     function removeChild(parent){  
155.         if(!(parent=$(parent))) return false;  
156.         while(parent.firstChild){  
157.             parent.firstChild.parentNode.removeChild(parent.firstChild);  
158.         }  
159.         return parent;  
160.     }  
161.     window.ADS.removeChild=removeChild;  
162.     //给指定节点添加子节点,  添加在已有子节点的前面  
163.     //  
164.     function prependChild(parent,newChild){  
165.         if(!(parent=$(parent))) return false;  
166.         if(!(newChild=$(newChild))) return false;  
167.         if(parent.firstChild)  
168.         {  
169.             //如果存在一个 子节点,则在这个节点之前插入  
170.             parent.insertBefore(newChild,parent.firstChild)  
171.         }else{  
172.             //如果没有子节点,则直接插入  
173.             parent.appendChild(newChild);  
174.         }  
175.         return parent;  
176.     }  
177.     window.ADS.prependChild=prependChild;  
178.     // 获得事件对象  
179.     function getEvent(){  
180.         if(window.event)  
181.                 {   
182.                     return window.event;  
183.                 }  
184.                 var f=getEvent.caller;  
185.                 while(f!=null)  
186.                 {  
187.                     var e = f.arguments[0];                       
188.                     if(e && (e.constructor==MouseEvent||e.constructor==Event||e.constructor==KeyboardEvent)) return e;                          
189.                     f=f.caller;  
190.                 }  
191.     }  
192.     window.ADS.getEvent=getEvent;  
193.       
194.       
195. })();