創建自己的'JavaScript庫'，原來如此簡單
- PHPz原創
- 2017-04-02 16:35:521738瀏覽
JavaScript函式庫其實就是一堆函數的集合，就是方便給你呼叫的不用自己寫那些功能強大的函數…這篇文章說一說如何創建JavaScript庫及需要注意的問題！期待您光臨斧正！
行文目錄：
編寫JavaScript函式庫的範本程式碼
寫JavaScript函式庫(實例)
#完善JavaScript函式庫(實例)
#為了讓自己的JS函式庫建構的更優雅、合理，我們寫JS函式庫時要注意兩方面的內容：
1.不要使用版本檢測，而要使用能力檢測
由於瀏覽器的類型和版本太多，以及不斷的新的瀏覽器出現，我們不可能投入大量的時間和成本去實踐檢測各種版本的瀏覽器。 "瀏覽器檢測"也叫"版本檢測"通常被認為是一種錯誤的做法，瀏覽器檢測的最佳實踐是能力檢測，通常也被稱為對象檢測，指的是在代碼執行之前檢測某個腳本物件or方法是否存在，而不是依賴你對哪個瀏覽器有哪些特定的了解。如果必須的物件和方法存在，那麼表示瀏覽器能夠使用它，而且程式碼也可以按照預期執行。能力偵測使用
// JavaScript Document
if(document.body && document.body.getElementsByTagName){
//使用document.body.getElementsByTagName的代码
}2.使用命名空間
當使用多個js庫檔案時，為了避免在呼叫時不同js庫檔案的同名函數的衝突，一般會使用命名空間來解決。 JavaScript支援同名函數，但只使用最後一個加載的函數（不支援重載，不會考慮參數，只看函數名字）， 哪一個最後被加載，哪一個就會被呼叫到。所以不使用命名空間的話，就很容易遇到同名函數衝突的問題。
使用命名空間的兩點原則：唯一性，不共享。
唯一性：挑選一個獨一無二的命名空間的名字（如穀歌 Maps在所有的標識符中都添加了G前綴），注意js是大小寫敏感的。
不共享：不共享意味著什麼都不共享；當你創建自己的$函數時你可能會與著名的庫(如Prototype)中的$函數發生衝突而導致Prototype中的$無法使用，為了不與著名的一些函式庫（jQuery、prototype）或其他現有的一些函數衝突，使用匿名函數來實現程式碼的不共享。如：要確保只有你自己使用這個$()函數，你可以使用一個JS小技巧。
//匿名函数
(function(){
//code,运行的代码
})();注意：()在JavaScript中有兩種意義：一是運算子；二是分隔符號。
上面匿名函數需要說明兩點：
①紅色括號裡是匿名函數，紅色括號代表分割，表示裡面的函數是一個部分；
②綠色括號表示一個運算符，表示紅色括號裡面的函數要運作；相當於定義完一個匿名函數後就讓它直接運作。
二.寫JavaScript庫範本
1.可以使用下面的範本來寫自己的JavaScript函式庫
//JavaScript库模板代码
(function (){
function $(){
alert("被调用到喽！");
/*alert()是JavaScript脚本语言中窗口window对象的一个常用方法；
其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，
所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。*/
}
//注册命名空间 'myNameSpace' 到window对象上
window['myNameSpace'] = {}
//把$函数注册到 'myNameSpace'命名空间中
window['myNameSpace']['$']=$;
})();2.在HTML頁面上引用自己JS函式庫中的函數方式：
首先，執行"插入→HTML→腳本物件→腳本"，搜素本身要插入到此HTML頁的js庫檔案插入到HTML檔案標題下方，例如
<title>ICTest</title> <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> <script language="JavaScript" type="text/javascript" src="IC.js"></script>
然後，在body屬性中呼叫JS函式庫中的函數，兩種方式
①<body onload="myNameSpace.$()"></body> //myNameSpace为定义的命名空间，可以调用自己构建的JS库文件中到函数了 ②<body onload="window.myNameSpace.$()"></body> //在命名空间前加上window也可实现调用JS库中的函数
三.寫自己的JavaScript函式庫(實例)
實作一個在網頁載入時彈出對話框的簡單實例，本實例我們採用程式設計軟體Dreamweaver 8。
1.建立自己的JS函式庫，此處命名空間我命名為WALY.js。
注意：大家可以使用自己喜歡的名字作為命名空間的名字，這樣使得即使一起使用其他人編寫的庫時也不會發生相互幹擾的情況。
//ZAJ.js库代码
(function (){
function $(){
alert("AZJ.js库被调用到喽！");
}
//注册命名空间 'AZJ' 到window对象上
window['AZJ'] = {}
//把$函数注册到 'AZJ'命名空间中
window['AZJ']['$']=$;
})();2.在HTML頁面程式碼中呼叫JS函式庫，進行驗證是否呼叫WALY.js中的函數。 HTML檔案名稱為WALYTest.html
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>调用js库测试</title> <!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置--> <script language="JavaScript" type="text/javascript" src="AZJ.js"></script> </head> <body onload="AZJ.$();"> <!--在页面加载时，调用AZJ.js库中的函数；这里也可使用<body onload="window.AZJ.$();">--> </body>
3.執行網頁，執行結果如圖
[object Object]
1.$()方法
2.getElementsByClassName()方法
实例初探:js库中只编写$()方法
1.建立"AZJ.js"库，编写$()方法,代码如下
//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页面进行测试
当从界面只传递一个参数时，代码设计
<title>调用js库测试</title>
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->
<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>###執行結果為：點選"Click Me"按鈕，彈出網頁訊息：AZJtest############当从界面传递两个参数时，代码设计
<span style="font-family:FangSong_GB2312;font-size:18px;"><title>调用js库测试</title>
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->
<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>运行结果，单击"Click Me"按钮,先弹出AZJtest，再弹出AZJtest2
实例深入：编写getElementByClassName()方法
1.在"AZJ.js"库中编写getElementByClassName()方法，代码设计如下
<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>2.在HTML页面进行测试
测试方式同上面传递两个参数的方式，代码设计如下
<span style="font-family:FangSong_GB2312;font-size:18px;"><title>调用js库测试</title>
<!--此处通过执行"插入→HTML→脚本对象→脚本"，搜素自己要插入到此HTML页的js库文件插入此位置-->
<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>运行结果，同上述方法中传递两个参数的情况。
文章写到这里，相信您也会编写简单的js库文件了吧，编写js库文件是不是很简单呢
以上是創建自己的'JavaScript庫'，原來如此簡單的詳細內容。更多資訊請關注PHP中文網其他相關文章！