快捷導(dǎo)航

通過(guò)繼承IHttpHandle實(shí)現(xiàn)JS插件的組織與管理

更新時(shí)間：2010年07月13日 20:06:29 作者：

最近，項(xiàng)目中的用到的Js插件越來(lái)越多，有的是用原生javascript寫的，有的是調(diào)用的jquery插件，頁(yè)面上Js和Css文件的引用也越來(lái)越混亂，而且Js文件之間還有引用先后的依賴關(guān)系

如：

復(fù)制代碼代碼如下:

 
<!— Js插件 --> 
<script type="text/javascript" src="/scripts/popup.js"></script> 
<script type="text/javascript" src="/scripts/popup-util.js"></script> 
<!—Jquery插件 --> 
<script type="text/javascript" src="/scripts/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="/scripts/jquery.autocomplete/ jquery.autocomplete.js"> 
</script> 
<link type="text/css" rel="stylesheet" href="/scripts/jquery.autocomplete/jquery.autocomplete.css" /> 
<script type="text/javascript" src="/scripts/jquery.tip/jquery.tip.js"></script> 
<link type="text/css" rel="stylesheet" href="/scripts/jquery.tip/jquery.tip.css" /> 

　　有時(shí)，頁(yè)面上引用的Js文件會(huì)更多，如果頁(yè)面排版的整齊還好點(diǎn)，一旦排版的稍微不整齊，那么整個(gè)頁(yè)面就顯得很雜亂，那么究竟有沒(méi)有更簡(jiǎn)潔的方法引用Js文件呢？本文就討論一下這個(gè)問(wèn)題。

　　開(kāi)始做之前先在cnblogs上搜索了一下，果然有相關(guān)文章介紹：http://www.fzitv.net/article/24220.htm，不過(guò)本篇文章的博主不是很厚道(^_^)，雖然給了一個(gè)demo下載，但是是編譯后的程序，看不到源碼，看不到源碼也就算了，運(yùn)行還出錯(cuò)，后來(lái)經(jīng)過(guò)嘗試，demo程序中還少一個(gè)script.do文件，并且還需要在IIS中配置“.do”的應(yīng)用程序擴(kuò)展，方法如下：在IIS中選擇所建的網(wǎng)站，右鍵單擊“屬性”如下圖：

說(shuō)歸正題，雖然只給了一個(gè)編譯后的demo程序，但經(jīng)過(guò)反編譯查看代碼后，還是為本人重新實(shí)現(xiàn)功能提供了一些好的建議，在此還是要對(duì)那篇文章的博主表示感謝^_^，接下來(lái)看一下本人是如果組織和管理JS文件的：
　　1. 在頁(yè)面上需要添加一句引用：<script type="text/javascript" src="/Scripts/JsPlugins.js?plugins=popup&jqPlugins=autocomplete,tip"></script>
說(shuō)明：參數(shù)plugins后面賦值的是原生js寫的插件名，多個(gè)插件可以用逗號(hào)“,”隔開(kāi)；
參數(shù)jqPlugins后面賦值的是jquery的插件名，同樣，多個(gè)jquery插件名可以用逗號(hào)“,”隔開(kāi)。
　　2. 為項(xiàng)目添加Js配置文件，如下：

復(fù)制代碼代碼如下:

 
<?xml version="1.0" encoding="utf-8" ?> 
<script path="/scripts/"> 
<!-- javascript 插件 --> 
<plugins name="javascript" file=""> 
<!-- 百度的彈出層 --> 
<plugin name="popup" file="popup-min.js"> 
<require file="popup-util.js"></require> 
</plugin> 
</plugins> 
<!-- jquery 插件 --> 
<plugins name="jquery" file="jquery-1.3.2.js"> color: #000000;"> 
<!--自動(dòng)完成--> 
<plugin name="autocomplete" file="plugins/autocomplete/jquery.autocomplete.js"> 
<require file="plugins/autocomplete/jquery.autocomplete.css"></require> 
</plugin> 
<!--提示框--> 
<plugin name="tip" file="plugins/tip/jquery.tip.js"> 
<lazy file="plugins/tip/bs.css"></lazy> 
</plugin> 
</plugins> 
</script> 

3. 在項(xiàng)目的web.config文件中添加HttpHandle，如下：
<appSettings>
<add key="JsConfig" value="~/Config/JsConfig.xml"/>
</appSettings>
和
<httpHandlers>
<add verb="*" path="JsPlugins.js" type="ScriptLoader.ScriptPluginHandle,ScriptLoader"/>
</httpHandlers>
另外，本人在實(shí)現(xiàn)的過(guò)程中還做了以下幾方面改進(jìn)：
1. 兼容IE6、IE7、IE8、Firefox、Safari、Opera瀏覽器(經(jīng)測(cè)試，文中提到的那個(gè)demo程序在IE6下功能失效)
2. 使用了匿名回調(diào)函數(shù)，避免了與加載的Js文件中的方法重名
3. 可以同時(shí)調(diào)用原生js插件和jquery插件，前提是兩者不會(huì)產(chǎn)生沖突

具體實(shí)現(xiàn)大家可以下載源碼，本源碼的開(kāi)發(fā)環(huán)境VS2008 + ASP.NET MVC 1.0