js-構建自己的js庫

什麼是js庫?

 

    我們知道一些js庫,如JQurey,我們在使用JQuery時js文件中我們首先會引用一個默認的js庫,jquery.js文件,這個文件就是構建的js庫,我們通過使用這個庫,調用庫中的函數,用更少的代碼實現複雜的界面顯示。

 

編寫自己的js庫,需要注意的問題:  

    建立js庫時注意的兩個問題,使自己的庫構建的更加優雅合理:

        1 不要版本檢測。

        不依賴於瀏覽器的樣式,和瀏覽器的版本,而是依賴於腳本語言js的強大。

        2 使用命名空間。

        所說的命名空間不是真正的命名空間,只是能在腳本內營造的一個屬於自己的小空間的技巧而已。

           命名空間的唯一性:

               方法的名字相同,默認使用最後一個方法。

               一般命名爲IC (ItCast)

           命名空間不共享:

               庫中的任何函數只在庫中使用,保證自己使用$()函數,使用js小技巧。

                                 (function(){

                                          //運行的代碼。

 

                                 })();  //後面的括號表示運行,定以函數後運行。前面的括號表示分隔符,定義函數。

編寫自己的js庫。

             模板:

            

			(function(){
				
				
				
				//自己的命名空間,外部無法訪問。
				//定義了自己的函數$()
				Function $()
				{
					//代碼。
					//測試是否成功。
					Alert("你好!");
				}
				
				//構造自己的命名空間。
				Window['myNameSpace']={}
				//將自己的命名空間註冊到window,並且註冊自己的$函數。
				Window['myNameSpace']['$']=$;
				
				
				
			})();


在html中進行測試:

               

			<html>
			<head>
				<title>js庫測試</title>
				<script type="text/javascript" src="myNameSpace.js"</javascript>
			</head>
			/*調用自己建立的 $()方法。window可以省略*/
			<body onload="window.myNameSpace.$();">
			</body>
			</html>


 

完善自己的js庫。

            構建自己的$方法,作用是根據id來找出對象的值,構建方法,對需要根據模板把方法註冊到window。

     js代碼爲:

    

(function()
		  {
		//向window註冊命名空間IC。	  
		window['IC']={}
		
		function $()
		{
				//定義元素數組,數組對象。
				var elements=new Array();
				//對數組進行循環驗證。arguments是js的一個內部對象返回,返回function傳遞的參數對象,數組形式。
				for(var i=0;i<arguments.length;i++)
				{
					//定義element對象,把參數數組讀出來。
					var element=arguments[i];
					//判斷數組中的原元素是否是字符串類型。
					if(typeof element=='string')
					{
						element=document.getElementById(element);
					}
					//判斷當前的參數知否只有一個,我們就直接返回這個參數。
					if(arguments.length==1)
					{
						return element;
					}
					//如果多個參數的話。我們放入數組elements中。
					elements.push(element);
				}
					//把所有的全取出來並返回。
					return elements;
			}
			 
			
		
		
		//向windows上註冊命名空間IC,並向命名空間中註冊$方法。
		window['IC']['$']=$;
		
					  
})();

html代碼:

   

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=gb2312" />

<title>無標題文檔</title>
 <script type="text/javascript" src="create_jsKU.js" ></script>
 <script type="text/javascript">
 	function  testClick()
	{
		var testInput=IC.$("testId","testId2");
		for(var i=0;i<testInput.length;i++)
		{
			alert(testInput[i].value);
		}
		
	}
 </script>
</head>

<body >
<input type="text" value="test" id="testId" />
<input type="text" value="test2" id="testId2" />
<input type="button" value="clickme" onclick="testClick()"/>
</body>
</html>



            構建自己的js庫,提高我們的效率。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章