通过继承IHttpHandle实现JS插件的组织与管理
更新时间：2010年07月13日 20:06:29 作者：
最近，项目中的用到的Js插件越来越多，有的是用原生javascript写的，有的是调用的jquery插件，页面上Js和Css文件的引用也越来越混乱，而且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文件呢？本文就讨论一下这个问题。
开始做之前先在cnblogs上搜索了一下，果然有相关文章介绍：https://www.jb51.net/article/24220.htm，不过本篇文章的博主不是很厚道(^_^)，虽然给了一个demo下载，但是是编译后的程序，看不到源码，看不到源码也就算了，运行还出错，后来经过尝试，demo程序中还少一个script.do文件，并且还需要在IIS中配置“.do”的应用程序扩展，方法如下：在IIS中选择所建的网站，右键单击“属性”如下图：
说归正题，虽然只给了一个编译后的demo程序，但经过反编译查看代码后，还是为本人重新实现功能提供了一些好的建议，在此还是要对那篇文章的博主表示感谢^_^，接下来看一下本人是如果组织和管理JS文件的：
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
复制代码 代码如下:
<!— 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文件呢？本文就讨论一下这个问题。
开始做之前先在cnblogs上搜索了一下，果然有相关文章介绍：https://www.jb51.net/article/24220.htm，不过本篇文章的博主不是很厚道(^_^)，虽然给了一个demo下载，但是是编译后的程序，看不到源码，看不到源码也就算了，运行还出错，后来经过尝试，demo程序中还少一个script.do文件，并且还需要在IIS中配置“.do”的应用程序扩展，方法如下：在IIS中选择所建的网站，右键单击“属性”如下图：
说归正题，虽然只给了一个编译后的demo程序，但经过反编译查看代码后，还是为本人重新实现功能提供了一些好的建议，在此还是要对那篇文章的博主表示感谢^_^，接下来看一下本人是如果组织和管理JS文件的：
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
相关文章
这篇文章主要介绍了JavaScript更改原始对象valueOf的方法,涉及javascript使用自定义valueOf函数替换掉原始object中valueOf的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
通过分析评论功能的逻辑关系，学会如何使用JavaScript实现评论、回复、点赞等各种功能。这篇文章主要介绍了JavaScript评论点赞功能的实现方法,需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了基于slideout.js实现移动端侧边栏滑动特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
JavaScript实现AOP详解(面向切面编程,装饰者模式)
下面小编就为大家分享一篇JavaScript实现AOP的方法(面向切面编程,装饰者模式)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了js对象数组根据对象属性删除对象,需要的朋友可以参考下2023-07-07
在前端实现加密算法时,需要特别注意密钥的安全存储和管理,不应将敏感的密钥硬编码在前端代码中,这篇文章主要介绍了前端使用国密sm2和sm4进行加解密的相关资料,需要的朋友可以参考下2025-04-04
这篇文章主要简单介绍了Javascript数组与字典,需要的朋友可以参考下2015-01-01
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件,下面和小编来一起学习一下吧2019-05-05
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
这篇文章主要介绍了webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了js字符串倒序的实例代码,代码分为3部分，给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
最新评论