什麼是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庫,提高我們的效率。