創建自己的'JavaScript庫'，原來如此簡單-js教程-PHP中文網

首頁

web前端

js教程

創建自己的'JavaScript庫'，原來如此簡單

PHPz

Apr 02, 2017 pm 04:35 PM

JavaScript函式庫其實就是一堆函數的集合，就是方便給你呼叫的不用自己寫那些功能強大的函數…這篇文章說一說如何創建JavaScript庫及需要注意的問題！期待您光臨斧正！

行文目錄：

#編寫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对话框通常用于一些对用户的提示信息。*/ 
}
 //注册命名空间 &#39;myNameSpace&#39; 到window对象上  
            window[&#39;myNameSpace&#39;] = {}  
          
 //把$函数注册到 &#39;myNameSpace&#39;命名空间中
 window[&#39;myNameSpace&#39;][&#39;$&#39;]=$; 
})();

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库被调用到喽！"); 
}
 //注册命名空间 &#39;AZJ&#39; 到window对象上  
            window[&#39;AZJ&#39;] = {}      
 //把$函数注册到 &#39;AZJ&#39;命名空间中
 window[&#39;AZJ&#39;][&#39;$&#39;]=$;
})();

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]

創建自己的JavaScript庫，原來如此簡單

################四.完善JavaScript函式庫####################### ################這裡主要在JS函式庫匿名函式中寫兩個常用的方法：###

1.$()方法
2.getElementsByClassName()方法
实例初探:js库中只编写$()方法
1.建立"AZJ.js"库，编写$()方法,代码如下
//ZAJ.js库代码
(function (){
   //注册命名空间 &#39;AZJ&#39; 到window对象上  
        window[&#39;AZJ&#39;] = {} 
   //$函数等同于getElementByID；
function $(){
var elements=new Array(); 
//将传来的参数进行遍历
for(var i=0;i<arguments.length;i++){
var element=arguments[i];
//若参数为字符串类型，则取得该参数的id
if(typeof element==&#39;string&#39;){
element=document.getElementById(element);
}
//若参数长度为1，即只传递进来一个参数，则直接返回
if(arguments.length==1){
return element;
}
//若有多个参数传递进来，则将处理后的值压入elements数组中
elements.push(element);
}
//返回处理后的参数
return elements;
}
 
          
 //把创建的函数$注册到 &#39;window.AZJ&#39;命名空间中
 window[&#39;AZJ&#39;][&#39;$&#39;]=$;
          
})();
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

創建自己的JavaScript庫，原來如此簡單

实例深入：编写getElementByClassName()方法

1.在"AZJ.js"库中编写getElementByClassName()方法，代码设计如下

<span style="font-family:FangSong_GB2312;font-size:18px;">//ZAJ.js库代码  
    (function (){  
        //注册命名空间 &#39;AZJ&#39; 到window对象上    
        window[&#39;AZJ&#39;] = {}   
          
          //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注册到 &#39;window.AZJ&#39;命名空间中  
          window[&#39;AZJ&#39;][&#39;getElementsByClassName&#39;]=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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles