寫一個自己的javascript庫

一.編寫JavaScript庫要注意的問題

爲了讓自己的JS庫構建的更加優雅、合理，我們編寫JS庫時要注意兩方面的內容：

1.不要使用版本檢測，而要使用能力檢測

由於瀏覽器的類型和版本太多，以及不斷的新的瀏覽器出現，我們不可能投入大量的時間和成本去實踐檢測各種版本的瀏覽器。"瀏覽器檢測"也叫"版本檢測"通常被認爲是一種錯誤的做法，瀏覽器檢測的最佳實踐是能力檢測，通常也被稱爲對象檢測，指的是在代碼執行之前檢測某個腳本對象or方法是否存在，而不是依賴於你對哪個瀏覽器具有哪些特定的瞭解。如果必須的對象和方法存在，那麼說明瀏覽器能夠使用它，而且代碼也可以按照預期執行。能力檢測使用<if(xxx.xxxx)>的方式

[javascript] view plain copy print ?

// JavaScript Document
if(document.body && document.body.getElementsByTagName){
    //使用document.body.getElementsByTagName的代碼
    }

[javascript] view plain copy print ?

// JavaScript Document
if(document.body && document.body.getElementsByTagName){
    //使用document.body.getElementsByTagName的代碼
    }
// JavaScript Document
if(document.body && document.body.getElementsByTagName){
	//使用document.body.getElementsByTagName的代碼
	}
2.使用命名空間

當使用多個js庫文件時，爲了避免在調用時不同js庫文件的同名函數的衝突，一般會使用命名空間來解決。JavaScript支持同名函數，但只使用最後一個加載的函數（不支持重載，不會考慮參數，只看函數名字），哪一個最後被加載，哪一個就會被調用到。所以不使用命名空間的話，就很容易遇到同名函數衝突的問題。

使用命名空間的兩點原則：唯一性，不共享。

唯一性：挑選一個獨一無二的命名空間的名字（如Google Maps在所有的標識符中都添加了G前綴），注意js是大小寫敏感的。

不共享：不共享意味着什麼都不共享；當你創建自己的$函數時你可能會與著名的庫(如Prototype)中的$函數發生衝突而導致Prototype中的$無法使用，爲了不與著名的一些庫（jQuery、prototype）或者其他已有的一些函數衝突，使用匿名函數來實現代碼的不共享。如：要保證只有你自己使用這個$()函數，你可以使用一個JS小技巧。

//匿名函數
(function(){
//code,運行的代碼
})();

注意：()在JavaScript中有兩種含義：一是運算符；二是分隔符。
上面匿名函數需要說明兩點：
①紅色括號裏是一個匿名函數，紅色括號代表分割，表示裏面的函數是一個部分；
②綠色括號表示一個運算符，表示紅色括號裏面的函數要運行；相當於定義完一個匿名函數後就讓它直接運行。

二.編寫JavaScript庫模板

1.可以使用下面的模板來編寫自己的JavaScript庫

[javascript] view plain copy print ?

<SPAN style="FONT-FAMILY: FangSong_GB2312">//JavaScript庫模板代碼
    (function (){
        function $(){
            alert("被調用到嘍！");
            /*alert()是JavaScript腳本語言中窗口window對象的一個常用方法；
            其主要用法就是在你自己定義了一定的函數以後，通過執行相應的操作，
            所彈出對話框的語言。並且alert對話框通常用於一些對用戶的提示信息。*/
            }

          //註冊命名空間 'myNameSpace' 到window對象上
            window['myNameSpace'] = {}

          //把$函數註冊到 'myNameSpace'命名空間中
          window['myNameSpace']['$']=$;

        })();</SPAN>

[javascript] view plain copy print ?

<span style="font-family: FangSong_GB2312;">//JavaScript庫模板代碼
    (function (){
        function $(){
            alert("被調用到嘍！");
            /*alert()是JavaScript腳本語言中窗口window對象的一個常用方法；
            其主要用法就是在你自己定義了一定的函數以後，通過執行相應的操作，
            所彈出對話框的語言。並且alert對話框通常用於一些對用戶的提示信息。*/
            }

          //註冊命名空間 'myNameSpace' 到window對象上
            window['myNameSpace'] = {}

          //把$函數註冊到 'myNameSpace'命名空間中
          window['myNameSpace']['$']=$;

        })();</span>
//JavaScript庫模板代碼
	(function (){
		function $(){
			alert("被調用到嘍！"); 
			/*alert()是JavaScript腳本語言中窗口window對象的一個常用方法；
			其主要用法就是在你自己定義了一定的函數以後，通過執行相應的操作，
			所彈出對話框的語言。並且alert對話框通常用於一些對用戶的提示信息。*/ 
			}
		  
		  //註冊命名空間 'myNameSpace' 到window對象上  
            window['myNameSpace'] = {}  
          
		  //把$函數註冊到 'myNameSpace'命名空間中
		  window['myNameSpace']['$']=$;
          
		})();
2.在HTML頁面上引用自己JS庫中的函數方式：

首先，執行"插入→HTML→腳本對象→腳本"，搜素自己要插入到此HTML頁的js庫文件插入到HTML文件標題下方，例如

[javascript] view plain copy print ?

<SPAN style="FONT-SIZE: 18px"><SPAN style="FONT-FAMILY: FangSong_GB2312"><title>ICTest</title>

<script language="JavaScript" type="text/javascript" src="IC.js"></script>
</SPAN></SPAN>

[javascript] view plain copy print ?

<span style="font-size: 18px;"><span style="font-family: FangSong_GB2312;"><title>ICTest</title>

<script language="JavaScript" type="text/javascript" src="IC.js"></script>
</span></span>
<title>ICTest</title>

<script language="JavaScript" type="text/javascript" src="IC.js"></script>
然後，在body屬性中調用JS庫中的函數，兩種方式
①<body οnlοad="myNameSpace.$()"></body> //myNameSpace爲定義的命名空間，可以調用自己構建的JS庫文件中到函數了

②<body οnlοad="window.myNameSpace.$()"></body> //在命名空間前加上window也可實現調用JS庫中的函數

三.編寫自己的JavaScript庫(實例)

實現一個在網頁加載時彈出對話框的簡單實例，本實例我們採用編程軟件Dreamweaver 8。

1.創建自己的JS庫，此處命名空間我命名爲WALY.js。

注意：大家可以使用自己喜歡的名字作爲命名空間的名字，這樣使得即使一起使用其他人編寫的庫時也不會發生相互干擾的情況。

[javascript] view plain copy print ?

<SPAN style="FONT-SIZE: 18px"><SPAN style="FONT-FAMILY: FangSong_GB2312">//ZAJ.js庫代碼
    (function (){
        function $(){
            alert("AZJ.js庫被調用到嘍！");
            }

          //註冊命名空間 'AZJ' 到window對象上
            window['AZJ'] = {}

          //把$函數註冊到 'AZJ'命名空間中
          window['AZJ']['$']=$;

        })();</SPAN></SPAN>

[javascript] view plain copy print ?

<span style="font-size: 18px;"><span style="font-family: FangSong_GB2312;">//ZAJ.js庫代碼
    (function (){
        function $(){
            alert("AZJ.js庫被調用到嘍！");
            }

          //註冊命名空間 'AZJ' 到window對象上
            window['AZJ'] = {}

          //把$函數註冊到 'AZJ'命名空間中
          window['AZJ']['$']=$;

        })();</span></span>
//ZAJ.js庫代碼
	(function (){
		function $(){
			alert("AZJ.js庫被調用到嘍！"); 
			}
		  
		  //註冊命名空間 'AZJ' 到window對象上  
            window['AZJ'] = {}  
          
		  //把$函數註冊到 'AZJ'命名空間中
		  window['AZJ']['$']=$;
          
		})();
2.在HTML頁面代碼中調用JS庫，進行驗證是否調用到WALY.js中的函數。HTML文件名爲WALYTest.html

[html] view plain copy print ?

<SPAN style="FONT-SIZE: 18px"><SPAN style="FONT-FAMILY: FangSong_GB2312"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>

</head>
<body onload="AZJ.$();"> 
</body></SPAN></SPAN>

[html] view plain copy print ?

<span style="font-size: 18px;"><span style="font-family: FangSong_GB2312;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>

</head>
<body onload="AZJ.$();"> 
</body></span></span>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>

</head>
<body οnlοad="AZJ.$();"> 
</body>
3.運行網頁，運行結果如圖

四.完善JavaScript庫

這裏主要在JS庫匿名函數中編寫兩個常用的方法：

1.$()方法

2.getElementsByClassName()方法

實例初探:js庫中只編寫$()方法

1.建立"AZJ.js"庫，編寫$()方法,代碼如下

[javascript] view plain copy print ?

<SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px">//ZAJ.js庫代碼
    (function (){
        //註冊命名空間 'AZJ' 到window對象上
        window['AZJ'] = {}

        //$函數等同於getElementByID；
        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);
                    }
                //若參數長度爲1，即只傳遞進來一個參數，則直接返回
                if(arguments.length==1){
                    return element;
                    }
                //若有多個參數傳遞進來，則將處理後的值壓入elements數組中
                elements.push(element);
                }
                //返回處理後的參數
                return elements;
            }


          //把創建的函數$註冊到 'window.AZJ'命名空間中
          window['AZJ']['$']=$;

        })();</SPAN>

[javascript] view plain copy print ?

<span style="font-family: FangSong_GB2312; font-size: 18px;">//ZAJ.js庫代碼
    (function (){
        //註冊命名空間 'AZJ' 到window對象上
        window['AZJ'] = {}

        //$函數等同於getElementByID；
        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);
                    }
                //若參數長度爲1，即只傳遞進來一個參數，則直接返回
                if(arguments.length==1){
                    return element;
                    }
                //若有多個參數傳遞進來，則將處理後的值壓入elements數組中
                elements.push(element);
                }
                //返回處理後的參數
                return elements;
            }


          //把創建的函數$註冊到 'window.AZJ'命名空間中
          window['AZJ']['$']=$;

        })();</span>
//ZAJ.js庫代碼
	(function (){
	    //註冊命名空間 'AZJ' 到window對象上  
        window['AZJ'] = {} 
		
	    //$函數等同於getElementByID；
		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);
					}
				//若參數長度爲1，即只傳遞進來一個參數，則直接返回
				if(arguments.length==1){
					return element;
					}
				//若有多個參數傳遞進來，則將處理後的值壓入elements數組中
				elements.push(element);
				}
				//返回處理後的參數
				return elements;
			}
		  
          
		  //把創建的函數$註冊到 'window.AZJ'命名空間中
		  window['AZJ']['$']=$;
          
		})();
2.在HTML頁面進行測試

當從界面只傳遞一個參數時，代碼設計

[html] view plain copy print ?

<SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
    function testClick(){
        var testInput=AZJ.$("testID");
        alert(testInput.value);
    }
</script>
</head>
<body >
<input type="text" value="AZJtest" id="testID"/>
<input type="button" value="Click Me" onclick="testClick()"/>
</body></SPAN>

[html] view plain copy print ?

<span style="font-family: FangSong_GB2312; font-size: 18px;"><title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
    function testClick(){
        var testInput=AZJ.$("testID");
        alert(testInput.value);
    }
</script>
</head>
<body >
<input type="text" value="AZJtest" id="testID"/>
<input type="button" value="Click Me" onclick="testClick()"/>
</body></span>
<title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
	function testClick(){
		var testInput=AZJ.$("testID");
		alert(testInput.value);
	}
</script>
</head>
<body >
<input type="text" value="AZJtest" id="testID"/>
<input type="button" value="Click Me" οnclick="testClick()"/>
</body>
運行結果爲：點擊"Click Me"按鈕，彈出網頁消息：AZJtest

當從界面傳遞兩個參數時，代碼設計

[html] view plain copy print ?

<SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
    function testClick(){
        var testInput=AZJ.$("testID","testID2");
        //由於這裏是兩個參數，所以用for語句遍歷兩個參數，分別顯示出來
        for(var i=0;i<testInput.length;i++){
        alert(testInput[i].value);
        }

    }
</script>
</head>
<body >
<input type="text" value="AZJtest" id="testID"/>
<input type="text" value="AZJtest2" id="testID2"/>
<input type="button" value="Click Me" onclick="testClick()"/>
</body></SPAN>

[html] view plain copy print ?

<span style="font-family: FangSong_GB2312; font-size: 18px;"><title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
    function testClick(){
        var testInput=AZJ.$("testID","testID2");
        //由於這裏是兩個參數，所以用for語句遍歷兩個參數，分別顯示出來
        for(var i=0;i<testInput.length;i++){
        alert(testInput[i].value);
        }

    }
</script>
</head>
<body >
<input type="text" value="AZJtest" id="testID"/>
<input type="text" value="AZJtest2" id="testID2"/>
<input type="button" value="Click Me" onclick="testClick()"/>
</body></span>
<title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
	function testClick(){
		var testInput=AZJ.$("testID","testID2");
		//由於這裏是兩個參數，所以用for語句遍歷兩個參數，分別顯示出來
		for(var i=0;i<testInput.length;i++){
		alert(testInput[i].value);
		}
		
	}
</script>
</head>
<body >
<input type="text" value="AZJtest" id="testID"/>
<input type="text" value="AZJtest2" id="testID2"/>
<input type="button" value="Click Me" οnclick="testClick()"/>
</body>
運行結果，單擊"Click Me"按鈕,先彈出AZJtest，再彈出AZJtest2

實例深入：編寫getElementByClassName()方法

1.在"AZJ.js"庫中編寫getElementByClassName()方法，代碼設計如下

[javascript] view plain copy print ?

<SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px">//ZAJ.js庫代碼
    (function (){
        //註冊命名空間 'AZJ' 到window對象上
        window['AZJ'] = {}

          //getElementsByClassName包含兩個參數：類名，標籤名
          function getElementsByClassName(className,tag){
              //對tag進行過濾，取出所有對象，如取出所有input類型對象。
              var allTags=document.getElementsByTagName(tag);
              var matchingElements=new Array();

              //正則表達式
              className = className.replace(/\-/g,"\\-");
              var regex = new RegExp("(^|\\s)" +className+ "(\\s|$)");

              var element;

              //將取出的tag對象存入數組中。
              for(var i=0;i<allTags.length;i++){
                  element =allTags[i];
                  if(regex.test(element.className)){
                      matchingElements.push(element);
                      }
                  }
              return matchingElements;
              }
          //把創建的函數getElementsByClassName註冊到 'window.AZJ'命名空間中
          window['AZJ']['getElementsByClassName']=getElementsByClassName;
        })();</SPAN>

[javascript] view plain copy print ?

<span style="font-family: FangSong_GB2312; font-size: 18px;">//ZAJ.js庫代碼
    (function (){
        //註冊命名空間 'AZJ' 到window對象上
        window['AZJ'] = {}

          //getElementsByClassName包含兩個參數：類名，標籤名
          function getElementsByClassName(className,tag){
              //對tag進行過濾，取出所有對象，如取出所有input類型對象。
              var allTags=document.getElementsByTagName(tag);
              var matchingElements=new Array();

              //正則表達式
              className = className.replace(/\-/g,"\\-");
              var regex = new RegExp("(^|\\s)" +className+ "(\\s|$)");

              var element;

              //將取出的tag對象存入數組中。
              for(var i=0;i<allTags.length;i++){
                  element =allTags[i];
                  if(regex.test(element.className)){
                      matchingElements.push(element);
                      }
                  }
              return matchingElements;
              }
          //把創建的函數getElementsByClassName註冊到 'window.AZJ'命名空間中
          window['AZJ']['getElementsByClassName']=getElementsByClassName;
        })();</span>
//ZAJ.js庫代碼
	(function (){
	    //註冊命名空間 'AZJ' 到window對象上  
        window['AZJ'] = {} 
		
          //getElementsByClassName包含兩個參數：類名，標籤名
		  function getElementsByClassName(className,tag){
			  //對tag進行過濾，取出所有對象，如取出所有input類型對象。
			  var allTags=document.getElementsByTagName(tag);
			  var matchingElements=new Array();
			  
			  //正則表達式
			  className = className.replace(/\-/g,"\\-");
			  var regex = new RegExp("(^|\\s)" +className+ "(\\s|$)");
			  
			  var element;
			  
			  //將取出的tag對象存入數組中。
			  for(var i=0;i<allTags.length;i++){
				  element =allTags[i];
				  if(regex.test(element.className)){
					  matchingElements.push(element);
					  }
				  }
			  return matchingElements;
			  }
	      //把創建的函數getElementsByClassName註冊到 'window.AZJ'命名空間中
		  window['AZJ']['getElementsByClassName']=getElementsByClassName;
		})();
2.在HTML頁面進行測試

測試方式同上面傳遞兩個參數的方式，代碼設計如下

[html] view plain copy print ?

<SPAN style="FONT-FAMILY: FangSong_GB2312; FONT-SIZE: 18px"><title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
    function testClick(){
        var testInput=AZJ.getElementsByClassName("testme","input");
        //由於這裏是兩個參數，所以用for語句遍歷兩個參數，分別顯示出來
        for(var i=0;i<testInput.length;i++){
        alert(testInput[i].value);
        }

    }
</script>
</head>
<body >
<input type="text" value="AZJtest" class ="testme" id="testID"/>
<input type="text" value="AZJtest2" class="testme" id="testID2"/>
<input type="button" value="Click Me" onclick="testClick()"/>
</body></SPAN>

[html] view plain copy print ?

<span style="font-family: FangSong_GB2312; font-size: 18px;"><title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
    function testClick(){
        var testInput=AZJ.getElementsByClassName("testme","input");
        //由於這裏是兩個參數，所以用for語句遍歷兩個參數，分別顯示出來
        for(var i=0;i<testInput.length;i++){
        alert(testInput[i].value);
        }

    }
</script>
</head>
<body >
<input type="text" value="AZJtest" class ="testme" id="testID"/>
<input type="text" value="AZJtest2" class="testme" id="testID2"/>
<input type="button" value="Click Me" onclick="testClick()"/>
</body></span>
<title>調用js庫測試</title>

<script language="JavaScript" type="text/javascript" src="AZJ.js"></script>
<script language="JavaScript" type="text/javascript" >
	function testClick(){
		var testInput=AZJ.getElementsByClassName("testme","input");
		//由於這裏是兩個參數，所以用for語句遍歷兩個參數，分別顯示出來
		for(var i=0;i<testInput.length;i++){
		alert(testInput[i].value);
		}
		
	}
</script>
</head>
<body >
<input type="text" value="AZJtest" class ="testme" id="testID"/>
<input type="text" value="AZJtest2" class="testme" id="testID2"/>
<input type="button" value="Click Me" οnclick="testClick()"/>
</body>
運行結果，同上述方法中傳遞兩個參數的情況。

文章寫到這裏，相信您也會編寫簡單的js庫文件了吧，編寫js庫文件是不是很簡單呢

寫一個自己的javascript庫

雪花飄

用java 寫的一個簡單的 web 服務器（適合新手練練）

java 常用快捷鍵

java web 動態服務器

如何開發一個連鎖企業的信息系統（3）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結