自建JavaScript函数库

前段时间学JavaScript，最先学的就是如何建立自己的JavaScript函数库，在我看来，函数就是程序活的灵魂，在此简单介绍一下如何建立自己的JavaScript函数库。

原则：

        不要版本检测：常用浏览器一般是IE、firefox、safari、opera、google，不能为了追求兼容而嗅探当前浏览器进而选择运行模式。

        最好是能力检测：即在代码执行之前，检测使用的某个脚本或是对象是否存在，而不是依赖于哪种浏览器，例如：

[javascript] view plaincopyprint?
  1. if (document.body&&document.body.getElementsByTagName) {//如果document.body 与getElementsByTagName存在  
  2.         //使用document.body.getElementsByTagName代码  
  3. }  

        使用命名空间：javascript支持多次声明同名函数，但是只能使用最后声明的版本，为了确保不相抵触，需要使用命名空间来区别同名函数。使用命名空 间分需要注意两点：唯一和不共享，唯一即命名空间命名唯一，例如google加G，我自己的加LD；不共享即什么都不共享包括名称、变量等，为了防止自己 的$函数和prototype中的冲突，可以使用如下方法：

[javascript] view plaincopyprint?
  1. (function(){  
  2.     //自己的代码  
  3. })();  

Javascript函数库

         自建函数库模型：

[javascript] view plaincopyprint?
  1. // JavaScript Document  
  2. (function(){  
  3.           function $(){  
  4.               alert ("正在Buffering！");//提示正在缓冲  
  5.               }  
  6.               window['LD']={}//把LD命名空间加到window  
  7.               window['LD']['$']=$;把$函数加到LD  
  8. }  
  9. )();   

JavaScript函数库实例

[javascript] view plaincopyprint?
  1. (function () {  
  2.         window['LD'] = {}; //将命名空间写到window上  
  3.         function $() {//获取elements  
  4.                 var elements = new Array();  
  5.                 for (var i = 0; i < arguments.length; i++) {  
  6.                         var element = arguments[i]; //赋值element参数数组值   
  7.                         if (typeof element == 'string') {  
  8.                                 element = document.getElementById(element);  
  9.                         }  
  10.                         if (arguments.length == 1) {  
  11.                                 return element;  
  12.                         }  
  13.                         elements.push(element);  
  14.                 }  
  15.                 return elements;  
  16.         };  
  17.         function getElementsByClassName() {  
  18.                 //TODO  
  19.         };  
  20.         window['LD']['$'] = $; //将函数写到window下的LD下  
  21.         window['LD']['getElementsByClassName'] = getElementsByClassName; //将新的getElementsByClassName添加到LD下  
  22. })()  

        head：

[javascript] view plaincopyprint?
  1. <head>  
  2.         <script src="LD.js" type="text/javascript"></script>  
  3.         <script type="text/javascript">  
  4.                 function cclick() {  
  5.                         var testInput = LD.$("Text1", "Text2");  
  6.                         for (var i = 0; i < testInput.length; i++) {  
  7.                                 alert(testInput[i].value);//弹出其内容  
  8.                         }  
  9.                 }  
  10.           </script>  
  11. <title></title>  
  12. </head>  

        body：

[javascript] view plaincopyprint?
  1. <body onload ="LD.$();">  
  2.         <p>  
  3.                 <input id="Text2" type="text" value="廊坊" />  
  4.                 <input id="Text1" type="text"  value="提高班" />  
  5.         </p>  
  6.         <p>  
  7.                 <input id="Button1" type="button" value="点我"  onclick="cclick();" />  
  8.         </p>  
  9. </body>  

        运行结果：

        这只是最基本的自建函数库，更多的自建函数还等待我的积累。

posted @ 2014-07-27 08:53  阳光小屋  阅读(219)  评论(0)  编辑  收藏  举报