一.編寫JavaScript庫要注意的問題
?
為了讓自己的JS庫構建的更加優(yōu)雅、合理，我們編寫JS庫時要注意兩方面的內(nèi)容：
1.不要使用版本檢測，而要使用能力檢測
由于瀏覽器的類型和版本太多，以及不斷的新的瀏覽器出現(xiàn)，我們不可能投入大量的時間和成本去實踐檢測各種版本的瀏覽器。"瀏覽器檢測"也叫"版本檢測"通常被認為是一種錯誤的做法，瀏覽器檢測的最佳實踐是能力檢測，通常也被稱為對象檢測，指的是在代碼執(zhí)行之前檢測某個腳本對象or方法是否存在，而不是依賴于你對哪個瀏覽器具有哪些特定的了解。如果必須的對象和方法存在，那么說明瀏覽器能夠使用它，而且代碼也可以按照預期執(zhí)行。能力檢測使用<if(xxx.xxxx)>的方式
?
[javascript]?view plaincopyprint?
if(document.body?&&?document.body.getElementsByTagName){??????????}?? ?
2.使用命名空間
?
當使用多個js庫文件時，為了避免在調(diào)用時不同js庫文件的同名函數(shù)的沖突，一般會使用命名空間來解決。JavaScript支持同名函數(shù)，但只使用最后一個加載的函數(shù)（不支持重載，不會考慮參數(shù)，只看函數(shù)名字）， 哪一個最后被加載，哪一個就會被調(diào)用到。所以不使用命名空間的話，就很容易遇到同名函數(shù)沖突的問題。
????? 使用命名空間的兩點原則：唯一性，不共享。
唯一性：挑選一個獨一無二的命名空間的名字（如Google Maps在所有的標識符中都添加了G前綴），注意js是大小寫敏感的。
不共享：不共享意味著什么都不共享；當你創(chuàng)建自己的$函數(shù)時你可能會與著名的庫(如Prototype)中的$函數(shù)發(fā)生沖突而導致Prototype中的$無法使用，為了不與著名的一些庫（jQuery、prototype）或者其他已有的一些函數(shù)沖突，使用匿名函數(shù)來實現(xiàn)代碼的不共享。如：要保證只有你自己使用這個$()函數(shù)，你可以使用一個JS小技巧。
?
//匿名函數(shù)
(function(){
//code,運行的代碼
})();
注意：()在JavaScript中有兩種含義：一是運算符；二是分隔符。
上面匿名函數(shù)需要說明兩點：
? ? ?①紅色括號里是一個匿名函數(shù)，紅色括號代表分割，表示里面的函數(shù)是一個部分；
? ? ?②綠色括號表示一個運算符，表示紅色括號里面的函數(shù)要運行；相當于定義完一個匿名函數(shù)后就讓它直接運行。 |
?
二.編寫JavaScript庫模板
?
1.可以使用下面的模板來編寫自己的JavaScript庫
?
[javascript]?view plaincopyprint?
<span?style="font-family:FangSong_GB2312;">????(function?(){??????????function?$(){??????????????alert("被調(diào)用到嘍！");???????????????????????????}????????????????????????????????????window['myNameSpace']?=?{}????????????????????????????????????window['myNameSpace']['$']=$;??????????????????????})();</span>?? ?
?
2.在HTML頁面上引用自己JS庫中的函數(shù)方式：
首先，執(zhí)行"插入→HTML→腳本對象→腳本"，搜素自己要插入到此HTML頁的js庫文件插入到HTML文件標題下方，例如
?
[javascript]?view plaincopyprint?
<span?style="font-size:?18px;?"><span?style="font-family:FangSong_GB2312;"><title>ICTest</title>??<!--此處通過執(zhí)行"插入→HTML→腳本對象→腳本"，搜素自己要插入到此HTML頁的js庫文件插入此位置-->??<script?language="JavaScript"?type="text/javascript"?src="IC.js"></script>??</span></span>?? 然后，在body屬性中調(diào)用JS庫中的函數(shù)，兩種方式
①<body οnlοad="myNameSpace.$()"></body>?? //myNameSpace為定義的命名空間，可以調(diào)用自己構建的JS庫文件中到函數(shù)了
②<body οnlοad="window.myNameSpace.$()"></body>?//在命名空間前加上window也可實現(xiàn)調(diào)用JS庫中的函數(shù)
?
三.編寫自己的JavaScript庫(實例)
?
實現(xiàn)一個在網(wǎng)頁加載時彈出對話框的簡單實例，本實例我們采用編程軟件Dreamweaver 8。
?
1.創(chuàng)建自己的JS庫，此處命名空間我命名為WALY.js。
??注意：大家可以使用自己喜歡的名字作為命名空間的名字，這樣使得即使一起使用其他人編寫的庫時也不會發(fā)生相互干擾的情況。
?
[javascript]?view plaincopyprint?
<span?style="font-size:?18px;?"><span?style="font-family:FangSong_GB2312;">????(function?(){??????????function?$(){??????????????alert("AZJ.js庫被調(diào)用到嘍！");???????????????}????????????????????????????????????window['AZJ']?=?{}????????????????????????????????????window['AZJ']['$']=$;??????????????????????})();</span></span>?? ?
2.在HTML頁面代碼中調(diào)用JS庫，進行驗證是否調(diào)用到WALY.js中的函數(shù)。HTML文件名為WALYTest.html
?
[html]?view plaincopyprint?
<span?style="font-size:?18px;?"><span?style="font-family:FangSong_GB2312;"><head>??<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>??<title>調(diào)用js庫測試</title>??<script?language="JavaScript"?type="text/javascript"?src="AZJ.js"></script>????</head>??<body?οnlοad="AZJ.$();">?</body></span></span>?? ?
3.運行網(wǎng)頁，運行結果如圖
?
四.完善JavaScript庫
?
這里主要在JS庫匿名函數(shù)中編寫兩個常用的方法：
1.$()方法
2.getElementsByClassName()方法
?
實例初探:js庫中只編寫$()方法
1.建立"AZJ.js"庫，編寫$()方法,代碼如下
?
[javascript]?view plaincopyprint?
<span?style="font-family:FangSong_GB2312;font-size:18px;">????(function?(){??????????????????window['AZJ']?=?{}?????????????????????????????function?$(){??????????????var?elements=new?Array();???????????????????????????for(var?i=0;i<arguments.length;i++){??????????????????var?element=arguments[i];??????????????????????????????????if(typeof?element=='string'){??????????????????????element=document.getElementById(element);??????????????????????}??????????????????????????????????if(arguments.length==1){??????????????????????return?element;??????????????????????}??????????????????????????????????elements.push(element);??????????????????}??????????????????????????????????return?elements;??????????????}??????????????????????????????????????????????window['AZJ']['$']=$;??????????????????????})();</span>?? ?
2.在HTML頁面進行測試
當從界面只傳遞一個參數(shù)時，代碼設計
?
[html]?view plaincopyprint?
<span?style="font-family:FangSong_GB2312;font-size:18px;"><title>調(diào)用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></span>?? 運行結果為：點擊"Click Me"按鈕，彈出網(wǎng)頁消息：AZJtest
?
?
當從界面?zhèn)鬟f兩個參數(shù)時，代碼設計
?
[html]?view plaincopyprint?
<span?style="font-family:FangSong_GB2312;font-size:18px;"><title>調(diào)用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");??????????//由于這里是兩個參數(shù)，所以用for語句遍歷兩個參數(shù)，分別顯示出來??????????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></span>?? 運行結果，單擊"Click Me"按鈕,先彈出AZJtest，再彈出AZJtest2
?
?
?
實例深入：編寫getElementByClassName()方法
1.在"AZJ.js"庫中編寫getElementByClassName()方法，代碼設計如下
?
[javascript]?view plaincopyprint?
<span?style="font-family:FangSong_GB2312;font-size:18px;">????(function?(){??????????????????window['AZJ']?=?{}?????????????????????????????????function?getElementsByClassName(className,tag){??????????????????????????????var?allTags=document.getElementsByTagName(tag);????????????????var?matchingElements=new?Array();??????????????????????????????????????????????className?=?className.replace(/\-/g,"\\-");????????????????var?regex?=?new?RegExp("(^|\\s)"?+className+?"(\\s|$)");????????????????????????????????var?element;??????????????????????????????????????????????for(var?i=0;i<allTags.length;i++){????????????????????element?=allTags[i];????????????????????if(regex.test(element.className)){????????????????????????matchingElements.push(element);????????????????????????}????????????????????}????????????????return?matchingElements;????????????????}??????????????????????window['AZJ']['getElementsByClassName']=getElementsByClassName;??????????})();</span>?? 2.在HTML頁面進行測試
?
測試方式同上面?zhèn)鬟f兩個參數(shù)的方式，代碼設計如下
?
[html]?view plaincopyprint?
<span?style="font-family:FangSong_GB2312;font-size:18px;"><title>調(diào)用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");??????????//由于這里是兩個參數(shù)，所以用for語句遍歷兩個參數(shù)，分別顯示出來??????????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></span>?? 運行結果，同上述方法中傳遞兩個參數(shù)的情況。
?
文章寫到這里，相信您也會編寫簡單的js庫文件了吧，編寫js庫文件是不是很簡單呢？
轉載于:https://www.cnblogs.com/webapplee/p/3842475.html
總結
以上是生活随笔為你收集整理的[Javascript_库编写]创建自己的“JavaScript库”的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
