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

如:

复制代码 代码如下:

<!— 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上搜索了一下,果然有相关文章介绍:http://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

时间: 2024-09-25 01:42:57

通过继承IHttpHandle实现JS插件的组织与管理_javascript技巧的相关文章

js插件类库组织与管理(基于asp.net管理)_实用技巧

testjs插件类库组织与管理先举个例子,比如jquery插件中的calendar在一个页面中就得有如下代码 复制代码 代码如下: <style type="text/css"> @import ""script/calendar/jquery.datepick.css"; </style> <script type="text/javascript" src="script/jquery1.3.

纯JavaScript基于notie.js插件实现消息提示特效_javascript技巧

本文实例介绍了纯JavaScript实现消息提示特效是一款基于notie.js插件实现的可以制作Alert提示框,确认框和带输入的消息框,分享给大家供大家参考,具体内容如下 效果图: 实现的代码: html代码: <br><br><br><br><br><br> <article class="zzsc"> <div class="div-ext"> <div cl

基于Three.js插件制作360度全景图_javascript技巧

这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"></script> <script src="js/photo-sphere-viewer.min.js"></script> 2.初始化一下,(具体各种参数配置根据情况而定) var PSV = new PhotoSphereViewer({ // 全

用headjs来管理和加载js 提高网站加载速度_javascript技巧

现在有许多成熟的js模块加载器,比如requirejs和seajs等,但是对一些小的项目来说,它们的功能可能太过于"强大",也许我们只是想要有一个能动态加载js的功能,或许我们只是想装B一下,让自己写出的页面没有一大堆的<script src="a.js"></script>这样的东西.前面说的两种js加载器都是更强调模块性,也就是更强调js文件的组织和管理,更适用于大的项目. 就像刚刚说的,我只想有一个js文件加载器,我只需提供给它一个js

js中继承的几种用法总结(apply,call,prototype)_javascript技巧

一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  <body>  <script type="text/javascript">      function Person(na

JS弹出窗口插件zDialog简单用法示例_javascript技巧

本文实例讲述了JS弹出窗口插件zDialog简单用法.分享给大家供大家参考,具体如下: 因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm <script language="javascript" src="JS/zDialog/zDialog.js" type="text/javascript"></script> <script langua

js实现弹窗插件功能实例代码分享_javascript技巧

目前测试下:支持IE6+ 火狐 谷歌游览器等. 先来看看此组件的基本配置项:如下: 复制代码 代码如下: this.config = {  targetCls   :   '.clickElem',   // 点击元素 title:  '我是龙恩',      // 窗口标题 content     :  'text:<p style="width:100px;height:100px">我是龙</p>', //content            :  'im

js弹出层(jQuery插件形式附带reLoad功能)_javascript技巧

之前做一个项目,感觉里面的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改成jQuery的插件形式,并增加了reLoad的功能,感觉还不错,代码如下: 复制代码 代码如下: (function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$("#TB_overlay"); var height=$(document).height()+"px"; var width

第二次聊一聊JS require.js模块化工具的基础知识_javascript技巧

前一篇:JS模块化工具我们以非常简单的方式引入了requirejs:http://www.jb51.net/article/82527.htm,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块require 加载依赖模块,并执行加载完后的回调函数