posts - 101,  comments - 29,  trackbacks - 0
自建JavaScript函数库

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

原则：

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

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

             if (document.body&&document.body.getElementsByTagName) {//如果document.body 与getElementsByTagName存在
                     //使用document.body.getElementsByTagName代码
             }

     使用命名空间：javascript支持多次声明同名函数，但是只能使用最后声明的版本，为了确保不相抵触，需要使用命名空间来区别同名函数。使用命名空间分需要注意两点：唯一和不共享，唯一即命名空间命名唯一，例如google加G，我自己的加LD；不共享即什么都不共享包括名称、变量等，为了防止自己的$函数和prototype中的冲突，可以使用如下方法：
(function(){
    //自己的代码
})();
// JavaScript Document
(function(){
          function $(){
              alert ("正在Buffering！");//提示正在缓冲
              }
              window['LD']={}//把LD命名空间加到window
              window['LD']['$']=$;把$函数加到LD
}
)(); 

JavaScript函数库实例

[javascript] view plaincopy
  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 plaincopy
  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 plaincopy
  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 on 2012-06-27 23:01 mixer-a 阅读(842) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by:
BlogJava
Copyright ©2024 mixer-a