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