程序博客网 > mac版photoshop cc2015

写一个自己的javascript库

来源：互联网 发布：mac版photoshop cc2015 编辑：程序博客网 时间：2024/05/01 15:19


行文目录：点击对应目录进行跳转

  • 编写JavaScript库要注意的问题
  • 编写JavaScript库的模板代码
  • 编写JavaScript库(实例)
  • 完善JavaScript库(实例)






一.编写JavaScript库要注意的问题


为了让自己的JS库构建的更加优雅、合理，我们编写JS库时要注意两方面的内容：

1.不要使用版本检测，而要使用能力检测

由于浏览器的类型和版本太多，以及不断的新的浏览器出现，我们不可能投入大量的时间和成本去实践检测各种版本的浏览器。"浏览器检测"也叫"版本检测"通常被认为是一种错误的做法，浏览器检测的最佳实践是能力检测，通常也被称为对象检测，指的是在代码执行之前检测某个脚本对象or方法是否存在，而不是依赖于你对哪个浏览器具有哪些特定的了解。如果必须的对象和方法存在，那么说明浏览器能够使用它，而且代码也可以按照预期执行。能力检测使用<if(xxx.xxxx)>的方式

[javascript] view plaincopyprint?
  1. // JavaScript Document 
  2. if(document.body && document.body.getElementsByTagName){ 
  3.     //使用document.body.getElementsByTagName的代码 
  4.     } 
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. // JavaScript Document 
  2. if(document.body && document.body.getElementsByTagName){ 
  3.     //使用document.body.getElementsByTagName的代码 
  4.     } 

2.使用命名空间

当使用多个js库文件时，为了避免在调用时不同js库文件的同名函数的冲突，一般会使用命名空间来解决。JavaScript支持同名函数，但只使用最后一个加载的函数（不支持重载，不会考虑参数，只看函数名字）， 哪一个最后被加载，哪一个就会被调用到。所以不使用命名空间的话，就很容易遇到同名函数冲突的问题。

      使用命名空间的两点原则：唯一性，不共享。

唯一性：挑选一个独一无二的命名空间的名字（如Google Maps在所有的标识符中都添加了G前缀），注意js是大小写敏感的。

不共享：不共享意味着什么都不共享；当你创建自己的$函数时你可能会与著名的库(如Prototype)中的$函数发生冲突而导致Prototype中的$无法使用，为了不与著名的一些库（jQuery、prototype）或者其他已有的一些函数冲突，使用匿名函数来实现代码的不共享。如：要保证只有你自己使用这个$()函数，你可以使用一个JS小技巧。

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

注意：()在JavaScript中有两种含义：一是运算符；二是分隔符。
上面匿名函数需要说明两点：
     ①红色括号里是一个匿名函数，红色括号代表分割，表示里面的函数是一个部分；
     ②绿色括号表示一个运算符，表示红色括号里面的函数要运行；相当于定义完一个匿名函数后就让它直接运行。


二.编写JavaScript库模板


1.可以使用下面的模板来编写自己的JavaScript库

[javascript] view plaincopyprint?
  1. <SPAN style="FONT-FAMILY: FangSong_GB2312">//JavaScript库模板代码 
  2.     (function (){ 
  3.         function $(){ 
  4.             alert("被调用到喽！");  
  5.             /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
  6.             其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
  7.             所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/  
  8.             } 
  9.            
  10.           //注册命名空间 'myNameSpace' 到window对象上  
  11.             window['myNameSpace'] = {}   
  12.            
  13.           //把$函数注册到 'myNameSpace'命名空间中 
  14.           window['myNameSpace']['$']=$; 
  15.            
  16.         })();</SPAN> 
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <span style="font-family: FangSong_GB2312;">//JavaScript库模板代码 
  2.     (function (){ 
  3.         function $(){ 
  4.             alert("被调用到喽！");  
  5.             /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
  6.             其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
  7.             所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/  
  8.             } 
  9.            
  10.           //注册命名空间 'myNameSpace' 到window对象上   
  11.             window['myNameSpace'] = {}   
  12.            
  13.           //把$函数注册到 'myNameSpace'命名空间中 
  14.           window['myNameSpace']['$']=$; 
  15.            
  16.         })();</span> 


2.在HTML页面上引用自己JS库中的函数方式：

首先，执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入到HTML文件标题下方，例如

[javascript] view plaincopyprint?
  1. <SPAN style="FONT-SIZE: 18px"><SPAN style="FONT-FAMILY: FangSong_GB2312"><title>ICTest</title> 
  2. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  3. <script language="JavaScript" type="text/javascript" src="IC.js"></script> 
  4. </SPAN></SPAN> 
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size: 18px;"><span style="font-family: FangSong_GB2312;"><title>ICTest</title> 
  2. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  3. <script language="JavaScript" type="text/javascript" src="IC.js"></script> 
  4. </span></span> 

然后，在body属性中调用JS库中的函数，两种方式

①<body onload="myNameSpace.$()"></body>   //myNameSpace为定义的命名空间，可以调用自己构建的JS库文件中到函数了

②<body onload="window.myNameSpace.$()"></body> //在命名空间前加上window也可实现调用JS库中的函数


三.编写自己的JavaScript库(实例)


实现一个在网页加载时弹出对话框的简单实例，本实例我们采用编程软件Dreamweaver 8。


1.创建自己的JS库，此处命名空间我命名为WALY.js。

  注意：大家可以使用自己喜欢的名字作为命名空间的名字，这样使得即使一起使用其他人编写的库时也不会发生相互干扰的情况。

[javascript] view plaincopyprint?
  1. <SPAN style="FONT-SIZE: 18px"><SPAN style="FONT-FAMILY: FangSong_GB2312">//ZAJ.js库代码 
  2.     (function (){ 
  3.         function $(){ 
  4.             alert("AZJ.js库被调用到喽！");  
  5.             } 
  6.            
  7.           //注册命名空间 'AZJ' 到window对象上  
  8.             window['AZJ'] = {}   
  9.            
  10.           //把$函数注册到 'AZJ'命名空间中 
  11.           window['AZJ']['$']=$; 
  12.            
  13.         })();</SPAN></SPAN> 
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size: 18px;"><span style="font-family: FangSong_GB2312;">//ZAJ.js库代码 
  2.     (function (){ 
  3.         function $(){ 
  4.             alert("AZJ.js库被调用到喽！");  
  5.             } 
  6.            
  7.           //注册命名空间 'AZJ' 到window对象上   
  8.             window['AZJ'] = {}   
  9.            
  10.           //把$函数注册到 'AZJ'命名空间中 
  11.           window['AZJ']['$']=$; 
  12.            
  13.         })();</span></span> 

2.在HTML页面代码中调用JS库，进行验证是否调用到WALY.js中的函数。HTML文件名为WALYTest.html

[html] view plaincopyprint?
  1. <SPANstyle="FONT-SIZE: 18px"><SPANstyle="FONT-FAMILY: FangSong_GB2312"><head> 
  2. <metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/> 
  3. <title>调用js库测试</title> 
  4. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  5. <scriptlanguage="JavaScript"type="text/javascript"src="AZJ.js"></script> 
  6.  
  7. </head> 
  8. <bodyonload="AZJ.$();"><!--在页面加载时，调用AZJ.js库中的函数；这里也可使用<body onload="window.AZJ.$();">--> 
  9. </body></SPAN></SPAN> 
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <spanstyle="font-size: 18px;"><spanstyle="font-family: FangSong_GB2312;"><head> 
  2. <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> 
  3. <title>调用js库测试</title> 
  4. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  5. <scriptlanguage="JavaScript"type="text/javascript"src="AZJ.js"></script> 
  6.  
  7. </head> 
  8. <body onload="AZJ.$();"><!--在页面加载时，调用AZJ.js库中的函数；这里也可使用<body onload="window.AZJ.$();">--> 
  9. </body></span></span> 

3.运行网页，运行结果如图



四.完善JavaScript库


这里主要在JS库匿名函数中编写两个常用的方法：

1.$()方法

2.getElementsByClassName()方法


实例初探:js库中只编写$()方法

1.建立"AZJ.js"库，编写$()方法,代码如下

[javascript] view plaincopyprint?
  1. <SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px">//ZAJ.js库代码 
  2.     (function (){ 
  3.         //注册命名空间 'AZJ' 到window对象上  
  4.         window['AZJ'] = {}  
  5.          
  6.         //$函数等同于getElementByID； 
  7.         function $(){ 
  8.             var elements=new Array();  
  9.             //将传来的参数进行遍历 
  10.             for(var i=0;i<arguments.length;i++){ 
  11.                 var element=arguments[i]; 
  12.                 //若参数为字符串类型，则取得该参数的id 
  13.                 if(typeof element=='string'){ 
  14.                     element=document.getElementById(element); 
  15.                     } 
  16.                 //若参数长度为1，即只传递进来一个参数，则直接返回 
  17.                 if(arguments.length==1){ 
  18.                     return element; 
  19.                     } 
  20.                 //若有多个参数传递进来，则将处理后的值压入elements数组中 
  21.                 elements.push(element); 
  22.                 } 
  23.                 //返回处理后的参数 
  24.                 return elements; 
  25.             } 
  26.            
  27.            
  28.           //把创建的函数$注册到 'window.AZJ'命名空间中 
  29.           window['AZJ']['$']=$; 
  30.            
  31.         })();</SPAN> 
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <span style="font-family: FangSong_GB2312; font-size: 18px;">//ZAJ.js库代码 
  2.     (function (){ 
  3.         //注册命名空间 'AZJ' 到window对象上   
  4.         window['AZJ'] = {}  
  5.          
  6.         //$函数等同于getElementByID； 
  7.         function $(){ 
  8.             var elements=new Array();  
  9.             //将传来的参数进行遍历 
  10.             for(var i=0;i<arguments.length;i++){ 
  11.                 var element=arguments[i]; 
  12.                 //若参数为字符串类型，则取得该参数的id 
  13.                 if(typeof element=='string'){ 
  14.                     element=document.getElementById(element); 
  15.                     } 
  16.                 //若参数长度为1，即只传递进来一个参数，则直接返回 
  17.                 if(arguments.length==1){ 
  18.                     return element; 
  19.                     } 
  20.                 //若有多个参数传递进来，则将处理后的值压入elements数组中 
  21.                 elements.push(element); 
  22.                 } 
  23.                 //返回处理后的参数 
  24.                 return elements; 
  25.             } 
  26.            
  27.            
  28.           //把创建的函数$注册到 'window.AZJ'命名空间中 
  29.           window['AZJ']['$']=$; 
  30.            
  31.         })();</span> 

2.在HTML页面进行测试

当从界面只传递一个参数时，代码设计

[html] view plaincopyprint?
  1. <SPANstyle="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>调用js库测试</title> 
  2. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  3. <scriptlanguage="JavaScript"type="text/javascript"src="AZJ.js"></script> 
  4. <scriptlanguage="JavaScript"type="text/javascript"> 
  5.     function testClick(){ 
  6.         var testInput=AZJ.$("testID"); 
  7.         alert(testInput.value); 
  8.     } 
  9. </script> 
  10. </head> 
  11. <body> 
  12. <inputtype="text"value="AZJtest"id="testID"/> 
  13. <inputtype="button"value="Click Me"onclick="testClick()"/> 
  14. </body></SPAN> 
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <spanstyle="font-family: FangSong_GB2312; font-size: 18px;"><title>调用js库测试</title> 
  2. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  3. <scriptlanguage="JavaScript"type="text/javascript"src="AZJ.js"></script> 
  4. <script language="JavaScript"type="text/javascript"> 
  5.     function testClick(){ 
  6.         var testInput=AZJ.$("testID"); 
  7.         alert(testInput.value); 
  8.     } 
  9. </script> 
  10. </head> 
  11. <body> 
  12. <input type="text"value="AZJtest"id="testID"/> 
  13. <inputtype="button"value="Click Me"onclick="testClick()"/> 
  14. </body></span> 

运行结果为：点击"Click Me"按钮，弹出网页消息：AZJtest



当从界面传递两个参数时，代码设计

[html] view plaincopyprint?
  1. <SPANstyle="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>调用js库测试</title> 
  2. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  3. <scriptlanguage="JavaScript"type="text/javascript"src="AZJ.js"></script> 
  4. <scriptlanguage="JavaScript"type="text/javascript"> 
  5.     function testClick(){ 
  6.         var testInput=AZJ.$("testID","testID2"); 
  7.         //由于这里是两个参数，所以用for语句遍历两个参数，分别显示出来 
  8.         for(var i=0;i<testInput.length;i++){ 
  9.         alert(testInput[i].value); 
  10.         } 
  11.          
  12.     } 
  13. </script> 
  14. </head> 
  15. <body> 
  16. <inputtype="text"value="AZJtest"id="testID"/> 
  17. <inputtype="text"value="AZJtest2"id="testID2"/> 
  18. <inputtype="button"value="Click Me"onclick="testClick()"/> 
  19. </body></SPAN> 
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <spanstyle="font-family: FangSong_GB2312; font-size: 18px;"><title>调用js库测试</title> 
  2. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  3. <scriptlanguage="JavaScript"type="text/javascript"src="AZJ.js"></script> 
  4. <script language="JavaScript"type="text/javascript"> 
  5.     function testClick(){ 
  6.         var testInput=AZJ.$("testID","testID2"); 
  7.         //由于这里是两个参数，所以用for语句遍历两个参数，分别显示出来 
  8.         for(var i=0;i<testInput.length;i++){ 
  9.         alert(testInput[i].value); 
  10.         } 
  11.          
  12.     } 
  13. </script> 
  14. </head> 
  15. <body> 
  16. <input type="text"value="AZJtest"id="testID"/> 
  17. <inputtype="text"value="AZJtest2"id="testID2"/> 
  18. <input type="button"value="Click Me"onclick="testClick()"/> 
  19. </body></span> 

运行结果，单击"Click Me"按钮,先弹出AZJtest，再弹出AZJtest2




实例深入：编写getElementByClassName()方法

1.在"AZJ.js"库中编写getElementByClassName()方法，代码设计如下

[javascript] view plaincopyprint?
  1. <SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px">//ZAJ.js库代码 
  2.     (function (){ 
  3.         //注册命名空间 'AZJ' 到window对象上  
  4.         window['AZJ'] = {}  
  5.          
  6.           //getElementsByClassName包含两个参数：类名，标签名 
  7.           function getElementsByClassName(className,tag){ 
  8.               //对tag进行过滤，取出所有对象，如取出所有input类型对象。 
  9.               var allTags=document.getElementsByTagName(tag); 
  10.               var matchingElements=new Array(); 
  11.                
  12.               //正则表达式 
  13.               className = className.replace(/\-/g,"\\-"); 
  14.               var regex =new RegExp("(^|\\s)" +className+"(\\s|$)"); 
  15.                
  16.               var element; 
  17.                
  18.               //将取出的tag对象存入数组中。 
  19.               for(var i=0;i<allTags.length;i++){ 
  20.                   element =allTags[i]; 
  21.                   if(regex.test(element.className)){ 
  22.                       matchingElements.push(element); 
  23.                       } 
  24.                   } 
  25.               return matchingElements; 
  26.               } 
  27.           //把创建的函数getElementsByClassName注册到 'window.AZJ'命名空间中 
  28.           window['AZJ']['getElementsByClassName']=getElementsByClassName; 
  29.         })();</SPAN> 
[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <span style="font-family: FangSong_GB2312; font-size: 18px;">//ZAJ.js库代码 
  2.     (function (){ 
  3.         //注册命名空间 'AZJ' 到window对象上   
  4.         window['AZJ'] = {}  
  5.          
  6.           //getElementsByClassName包含两个参数：类名，标签名 
  7.           function getElementsByClassName(className,tag){ 
  8.               //对tag进行过滤，取出所有对象，如取出所有input类型对象。 
  9.               var allTags=document.getElementsByTagName(tag); 
  10.               var matchingElements=new Array(); 
  11.                
  12.               //正则表达式 
  13.               className = className.replace(/\-/g,"\\-"); 
  14.               var regex = new RegExp("(^|\\s)" +className+"(\\s|$)"); 
  15.                
  16.               var element; 
  17.                
  18.               //将取出的tag对象存入数组中。 
  19.               for(var i=0;i<allTags.length;i++){ 
  20.                   element =allTags[i]; 
  21.                   if(regex.test(element.className)){ 
  22.                       matchingElements.push(element); 
  23.                       } 
  24.                   } 
  25.               return matchingElements; 
  26.               } 
  27.           //把创建的函数getElementsByClassName注册到 'window.AZJ'命名空间中 
  28.           window['AZJ']['getElementsByClassName']=getElementsByClassName; 
  29.         })();</span> 

2.在HTML页面进行测试

测试方式同上面传递两个参数的方式，代码设计如下

[html] view plaincopyprint?
  1. <SPANstyle="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>调用js库测试</title> 
  2. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  3. <scriptlanguage="JavaScript"type="text/javascript"src="AZJ.js"></script> 
  4. <scriptlanguage="JavaScript"type="text/javascript"> 
  5.     function testClick(){ 
  6.         var testInput=AZJ.getElementsByClassName("testme","input"); 
  7.         //由于这里是两个参数，所以用for语句遍历两个参数，分别显示出来 
  8.         for(var i=0;i<testInput.length;i++){ 
  9.         alert(testInput[i].value); 
  10.         } 
  11.          
  12.     } 
  13. </script> 
  14. </head> 
  15. <body> 
  16. <inputtype="text"value="AZJtest"class ="testme"id="testID"/> 
  17. <inputtype="text"value="AZJtest2"class="testme"id="testID2"/> 
  18. <inputtype="button"value="Click Me"onclick="testClick()"/> 
  19. </body></SPAN> 
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <spanstyle="font-family: FangSong_GB2312; font-size: 18px;"><title>调用js库测试</title> 
  2. <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> 
  3. <scriptlanguage="JavaScript"type="text/javascript"src="AZJ.js"></script> 
  4. <script language="JavaScript"type="text/javascript"> 
  5.     function testClick(){ 
  6.         var testInput=AZJ.getElementsByClassName("testme","input"); 
  7.         //由于这里是两个参数，所以用for语句遍历两个参数，分别显示出来 
  8.         for(var i=0;i<testInput.length;i++){ 
  9.         alert(testInput[i].value); 
  10.         } 
  11.          
  12.     } 
  13. </script> 
  14. </head> 
  15. <body> 
  16. <input type="text"value="AZJtest"class ="testme"id="testID"/> 
  17. <inputtype="text"value="AZJtest2"class="testme"id="testID2"/> 
  18. <input type="button"value="Click Me"onclick="testClick()"/> 
  19. </body></span> 

运行结果，同上述方法中传递两个参数的情况。

文章写到这里，相信您也会编写简单的js库文件了吧，编写js库文件是不是很简单呢

0 0
mac版photoshop cc2015 mac版photoshop cc2015
原创粉丝点击
热门IT博客
钢轨轨道数据钢轨轨道数据
linux写c程序linux写c程序
真好用饲料配方软件
上海证券下载软件
ipad下载软件助手
阿里云邮箱管理员账号
火星时代unity3d学费
以父之名 知乎
嘉艺云管理平台软件
圣书阁淘宝
Mac退出无线诊断
怎样才能看网络直播
龙之谷网络传输异常
装修抢单软件
家用网络存储
网络错误651是什么意思
梦里花落知多少张俪
广场舞网络一线牵
sms软件
java 中argc
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 江阴家政 濮阳家政 福州家政 韩漫家政妇1到34话免费阅读 巨胸家政女妇 彭家政书法家 新都母乳家政 菏泽家政职业学院 波多野吉衣家政 调养家政妇免费阅读 巨胸家政女妇喷汗 菏泽家政学院 巨胸家政女妇成宫晴明 家政打扫卫生多少钱 家政大扫除一次多少钱 剧情演绎家政 西安家政公司 家政是什么工作 惠州家政公司 西安家政服务价格表 家政公司招聘 附近的家政公司在哪里 北京家政服务 北京家政公司排名 杭州家政服务 沈阳家政服务 家政服务网站 家政服务价格表2017 上海家政小时工 松江家政服务公司 长春家政公司排名 福州家政保洁 家政服务信息 佛山家政服务公司 家政服务项目 乌鲁木齐家政公司 家政护理老人 上海家政公司电话 家政服务行业 家政服务内容 哈尔滨家政保姆

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里