基于IHttpHandler的JS插件集中管理与加载方案

例如：

 
<!-- 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" />

传统JS引用方式的问题

当页面引用的JS文件较多时，若排版不够整齐，页面结构会显得杂乱。是否存在更简洁的JS文件引用方式？本文对此展开讨论。

在实施前，我在cnblogs上搜索到相关文章：https://www.jb51.net/article/24220.htm。尽管该文章提供了Demo下载，但仅提供编译后的程序，无法查看源码。此外，Demo运行存在错误，且缺少script.do文件，还需在IIS中配置“.do”的应用程序扩展。具体配置方法为：在IIS中选择对应网站，右键点击“属性”，如图：

回到正题。虽然原Demo仅提供编译版本，但通过反编译查看代码，为重新实现功能提供了有益建议。在此感谢原作者。接下来介绍本人如何组织和管理JS文件：

基于IHttpHandler的集中管理方案

1. 在页面中添加一行引用：<script type="text/javascript" src="/Scripts/JsPlugins.js?plugins=popup&jqPlugins=autocomplete,tip"></script>

说明：参数plugins后赋值的是原生JS编写的插件名，多个插件名之间用逗号“,”分隔；

参数jqPlugins后赋值的是jQuery插件名，同样，多个jQuery插件名之间用逗号“,”分隔。

2. 为项目添加Js配置文件，内容如下：

 
<?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;">
<!--自动完成-->
<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. 在项目的web.config文件中添加HttpHandle，配置如下：

<appSettings>

<add key="JsConfig" value="~/Config/JsConfig.xml"/>

</appSettings>

以及

<httpHandlers>

<add verb="*" path="JsPlugins.js" type="ScriptLoader.ScriptPluginHandle,ScriptLoader"/>

</httpHandlers>

实现改进与兼容性说明

此外，本人在实现过程中进行了以下改进：

1. 兼容IE6、IE7、IE8、Firefox、Safari、Opera浏览器（经测试，文中提到的Demo程序在IE6下功能失效）

2. 使用匿名回调函数，避免与加载的JS文件中的方法重名

3. 可同时调用原生JS插件和jQuery插件，前提是两者不产生冲突

具体实现可下载源码，本源码开发环境为VS2008 + ASP.NET MVC 1.0