`
存在就有理由
  • 浏览: 8982 次
  • 性别: Icon_minigender_1
  • 来自: 美国
文章分类
社区版块
存档分类
最新评论

JQuery的bind升级版——事件处理绑定远程脚本插件(处女贴)——最新版已修正BUG

阅读更多
大家知道,jQuery里面的bind方法是用来绑定事件处理的,典型用法如下:

$('选择器').bind('事件类型',function(event){
    //这里是处理函数
});


在OAOP式系统中,需要大量的前台JS处理,这往往涉及到许多JS文件。限于性能考虑,不应该把所有相关的JS一次性加载过来。当然,解决办法有很多,在下在这里模仿bind的方式提供一种新的事件绑定处理脚本方式。初步设想是,将事件处理方法写入一个单独的脚本中,然后在事件触发时再去调用该脚本来实现事件处理。该插件的名称命名为bd,那么它的效果应该像这样:
$('选择器').bd('事件类型','JS脚本路径');



一个典型样例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试页面</title>
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../bd.js"></script>
<script type="text/javascript">
	$(function(){
		$('#t1').bd('click','handlers/h1.js',{p1:'这是传入的参数1'});
	});
</script>
</head>
<body>
	<a id="t1" href="#">点击显示传入参数</a>
</body>
</html>





而远程处理脚本handlers/h1.js的代码如下:

$.bd(function(event){
	alert(event.data.p1);
});


可以看到远程脚本除了用$.bd()包裹之外,里面的方法和bind方法的事件处理方法完全一致。
如果能组织好相关的处理脚本,那么完全可以将所有的业务处理代码组织到相关的远程处理脚本中,用目录来分类,使系统开发变得简单可靠。
这个想法已经实现,更多样例及实现代码参见附件。
插件源代码如下:

jQuery.extend({
	/**
	 * 用于注册事件处理方法,在JS文件中写入$.bd(function(event){//自己的业务代码,this指调用的元素,event是触发的事件}),就可以触发导入;
	 */
	bd : function(_h) {
		$(window).data('$.bd:h:' + $(window).data('$.bd:p:'), _h);// 注册方法
	}
});
jQuery.fn.extend({
	/**
	 * 根据事件触发执行相关的JS文件
	 * 
	 * @param type 事件类型
	 * @param data 事件参数
	 * @param url JS文件路径或者事件处理函数
	 */
	bd : function(type, url, data) {
		return $(this)._bd(type, url, data, true);
	},
	/**
	 * 根据事件触发执行相关的JS文件(仅一次)
	 * 
	 * @param type 事件类型
	 * @param data 事件参数
	 * @param url JS文件路径或者事件处理函数
	 */
	bd1 : function(type, url, data) {
		return $(this)._bd(type, url, data, false);
	},
	/**
	 * 根据事件触发执行相关的JS文件
	 * 
	 * @param type 事件类型
	 * @param data 事件参数
	 * @param url JS文件路径或者事件处理函数
	 * @param loop 是否循环执行标志位,false表示只执行一次
	 */
	_bd : function(type, url, data, loop) {
		var $this = $(this);
		var result = false;
		$.each([url,$(window).data('$.bd:h:' + url)],function(i,_h){
			if($.isFunction(_h)){
				if (loop) {
					result = $this.bind(type, data, _h);
				} else {
					result = $this.one(type, data, _h);
				}
			}
		});
		if(result){
			return result;
		}
		$(this).data('$.unbd:'+type,'');
		var _f = function(event){
			var $this = $(this);
			var data = event.data;
			if($this.data('$.unbd:'+data.type)===data.url){//已经取消绑定
				return;
			}
			var _h = $(window).data('$.bd:h:' + data.url);
			if(!$.isFunction(_h)){
				$(window).data('$.bd:p:', data.url);
				$.ajax({
					url : data.url,
					dataType : "script",
					async : false,
					success : function(){
						$this.data("$.bd:o:").unbind(data.type,_f);
					}
				});
				_h = $(window).data('$.bd:h:' + data.url);
			}
			if($.isFunction(_h)){
				if(data.loop){
					$this.data("$.bd:o:")._bd(data.type, data.url,data.data, data.loop);
				}
				$this["$.bd:_h"]=_h;
				event.data = data.data;
				event.handler = _h;
				return $this["$.bd:_h"](event);
			}
			return false;
		}
		
		return $this.data("$.bd:o:",$this).one(type,{
			type : type,
			data : data,
			url : url,
			loop : loop
		},_f);
	},
	/**
	 * 取消绑定
	 * 
	 * @param type 执行类型
	 * @param p JS文件路径或者事件处理函数
	 */
	unbd : function(type, p) {
		$(this).data('$.unbd:'+type,p);
		var h = $.isFunction(p)?p:$(window).data('$.bd:h:' + p);// 获取方法
		if($.isFunction(h)){
			$(this).unbind(type,h);
		}
		return $(this);
	}
});


注:附件中的样例不能直接在GOOGLE浏览器中运行,须放到服务器中,其它浏览器无此限制。
PS:注册之后苦等了三天,小弟首次发帖,希望多多鼓励支持:-)
PS2:做了一点调整,修正第一次加载时event.handler不正确的问题以及bd1执行两次的问题。
PS2:修正了取消绑定可能无效的问题,另外做了一些优化。
PS3:修正了取消绑定后恢复绑定无效的问题,增加了样例。

  • bd.zip (27.5 KB)
  • 下载次数: 57
分享到:
评论
8 楼 mgh2008 2010-10-20  
挺不错,借用了
7 楼 存在就有理由 2010-08-12  
修正了取消绑定后恢复绑定无效的问题。
6 楼 存在就有理由 2010-07-27  
有人提出,事件触发时加载可能会导致响应迟钝的问题,其实本插件的初衷是:工具库性质的JS文件可以在页面载入时加载,只有业务代码才会在事件触发时加载。一般情况下,业务处理代码不会很长(如果很长你自己考量是否需要按需加载了),这就是本插件的应用场景。今天修正了一些BUG以及做了一些优化,请有兴趣的童鞋下载和更新最新版本(旧版本由于时间紧迫没有全面测试,使用时会有严重问题,新版本已经全面测试,基本稳定)。
5 楼 hellofuck 2010-07-26  
赞一个先~~
4 楼 存在就有理由 2010-07-26  
select*from爱 写道
var domLoading=function(){
    var loadType;
        init=(function(){
               //loding  some js 
   })()
      loadType?$('选择器').bind('事件类型',fn):$('选择器').bd('事件类型','JS脚本路径');
   
};
$(domLoading);

不必这样写,这样做其实会导致提前加载(即事件还没有触发就已经加载了相关的JS文件),BD插件要在事件触发之时才会去加载相关的JS,且BD插件兼容bind的所有功能,如果第二个参数传入的是一个函数的话那它将和bind完全一致,如果传入的是JS脚本地址则会在该事件触发时去加载指定的JS文件并执行其中的注册函数。总之是为了节省初始化时间和性能,按需加载(即如果相应事件永远不触发则永远不加载处理脚本)。直接使用BD插件绑定脚本即可。
3 楼 select*from爱 2010-07-26  
var domLoading=function(){
    var loadType;
        init=(function(){
               //loding  some js 
   })()
      loadType?$('选择器').bind('事件类型',fn):$('选择器').bd('事件类型','JS脚本路径');
   
};
$(domLoading);
2 楼 hao3721 2010-07-22  
有意思的,我还没有想过这层,呵呵。
1 楼 存在就有理由 2010-07-22  
,居然还没人回复!
本插件的特点是:
1、远程脚本只会加载一次。
2、远程脚本只在相关事件触发时才会加载。
3、传入参数是第三个参数,而bind是第二个参数。

相关推荐

Global site tag (gtag.js) - Google Analytics