通过继承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 相关文章推荐
基于jquery的多功能软键盘插件
Jul 25 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
js实现购物车功能
Jun 12 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
JS原型对象操作实例分析
Jun 06 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
Javascript中的数学函数
2007/04/04 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
文员求职信
2014/07/15 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
早恋主题班会
2015/08/14 职场文书