通过继承IHttpHandle实现JS插件的组织与管理


Posted in Javascript onJuly 13, 2010

如:

<!— 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://3water.com/article/24220.htm,不过本篇文章的博主不是很厚道(^_^),虽然给了一个demo下载,但是是编译后的程序,看不到源码,看不到源码也就算了,运行还出错,后来经过尝试,demo程序中还少一个script.do文件,并且还需要在IIS中配置“.do”的应用程序扩展,方法如下:在IIS中选择所建的网站,右键单击“属性”如下图:
通过继承IHttpHandle实现JS插件的组织与管理
说归正题,虽然只给了一个编译后的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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 #Javascript
javascript中字符串拼接需注意的问题
Jul 13 #Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 #Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 #Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 #Javascript
不同浏览器的怪癖小结
Jul 11 #Javascript
return false;和e.preventDefault();的区别
Jul 11 #Javascript
You might like
4.与数据库的连接
2006/10/09 PHP
如何写php程序?
2006/12/08 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python打印输出数组中全部元素
2018/03/13 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
如何更优雅地写python代码
2019/07/02 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
解决python运行启动报错问题
2020/06/01 Python
python文件路径操作方法总结
2020/12/21 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
上班看电影检讨书
2014/02/12 职场文书
公司口号大全
2014/06/11 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
免职通知
2015/04/23 职场文书
追讨欠款律师函
2015/06/24 职场文书