一、背景
- web前端開發人員經常會用到一些現成的js庫(框架)。框架的使用增加了代碼的模塊化和可復用性,最主要的是屏蔽了瀏覽器之間差異性的實現,使得代碼更加簡潔,框架使用者只需要將注意力放在業務的實現上而不必為底層繁瑣的實現感到頭疼。
- 目前主流的js框架有很多,各有側重,我們通常只會用到其中一小部分子功能。如果為了局部功能而引入一個龐大的框架,顯然有點大材小用而且會增加瀏覽器的加載負擔,浪費網絡帶寬,影響用戶體驗。因此,很多時候定義我們自己的js庫非常的有必要,我們只需要根據項目需求構建出個性化js庫,這樣的js庫將會變得相當精簡。
- 實習導師要求在實習之前學習一下如何構建一個自己的類庫,任務使然。
結論:基於以上三個原因,筆者大概學習了如何構建一個自己的js庫,以及在構建的過程中應該注意的一些事項。
二、構建js庫是需要注意的問題
1、會不會和其他的庫產生沖突
比如jQuery,Ext,Prototype等符號
2、不要版本檢測。
不依賴於瀏覽器的樣式,和瀏覽器的版本,而是依賴於腳本語言js的強大。
3、使用命名空間。
這里所說的命名空間不是真正的命名空間,只是能在腳本內營造的一個屬於自己的小空間的技巧而已。
----命名空間的唯一性:
如果多個方法的名字相同,則默認使用最后一個方法。不過通常要避免這種做法。
一般命名為IC (ItCast)
----命名空間不共享:
庫中的任何函數只在庫中使用,保證自己使用$()函數,使用js小技巧。
(function(){
//運行的代碼。
})(); //后面的括號表示運行,定義匿名函數之后直接運行。前面的括號表示分隔符,定義函數。
三、構建一個簡單的js庫實例
這里給出了一個簡單的js例子。
1 <script> 2 (function(){ 3 4 //自己的命名空間,外部無法訪問。 5 //定義了自己的函數$() 6 Function $() 7 { 8 //代碼。 9 //測試是否成功。 10 alert("你好!"); 11 } 12 //構造自己的命名空間。 13 Window['myNameSpace']={} 14 //將自己的命名空間注冊到window,並且注冊自己的$函數。 15 Window['myNameSpace']['$']=$; 16 })(); 17 </script>
然后再html文件中對我們之前構建簡單的js庫進行測試。
<html>
<head>
<title>js庫測試</title>
<script type="text/javascript" src="myNameSpace.js"></script>
</head>
/*調用自己建立的 $()方法。window可以省略*/
<body onload="window.myNameSpace.$();">
</body>
</html>
需要注意的是,調用js庫中的方法時,window可以省略(由js作用域鏈的相關知識可知)。所以我們可以定義一個名為myExtJs的庫,並通過這樣的方式來調用。eg:myExtJs.myLoad()。
用過ExtJs的朋友,看到這里應該會感到很熟悉,ExtJS的就是以Ext作為頂級命名空間,並將該命名空間作為window對象的一個屬性。以此類推,我們可以繼續通過往自定義命名空間中添加屬性的方式,創建命名空間。
