前段時間學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函數庫
自建函數庫模型:
// JavaScript Document(function(){ function $(){ alert ("正在Buffering!");//提示正在緩衝 } window['LD']={}//把LD命名空間加到window window['LD']['$']=$;把$函數加到LD})();
JavaScript函數庫執行個體
(function () { window['LD'] = {}; //將命名空間寫到window上 function $() {//擷取elements var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; //賦值element參數數組值 if (typeof element == 'string') { element = document.getElementById(element); } if (arguments.length == 1) { return element; } elements.push(element); } return elements; }; function getElementsByClassName() { //TODO }; window['LD']['$'] = $; //將函數寫到window下的LD下 window['LD']['getElementsByClassName'] = getElementsByClassName; //將新的getElementsByClassName添加到LD下})()
head:
<head> <script src="LD.js" type="text/javascript"></script> <script type="text/javascript"> function cclick() { var testInput = LD.$("Text1", "Text2"); for (var i = 0; i < testInput.length; i++) { alert(testInput[i].value);//彈出其內容 } } </script><title></title></head>
body:
<body onload ="LD.$();"> <p> <input id="Text2" type="text" value="廊坊" /> <input id="Text1" type="text" value="提高班" /> </p> <p> <input id="Button1" type="button" value="點我" onclick="cclick();" /> </p></body>
運行結果:
這隻是最基本的自建函數庫,更多的自建函數還等待我的積累。