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

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

脚本jQuery浏览器应用服务器Ajax 
阅读更多
大家知道，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是第二个参数。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery详解jQuery的bind方法

    jQuery 的 `bind()` 方法是用于在元素上绑定事件处理程序的一种方式。与原生 JavaScript 的事件绑定相比，`bind()` 提供了更多灵活性和便捷性。它允许开发者指定一个或多个事件类型，并为这些事件类型绑定一个或多个...

    JQuery入门——用bind方法绑定事件处理函数应用介绍

    `bind()`是jQuery中用于绑定事件处理函数的核心方法，对于初学者来说，掌握这个方法是理解jQuery事件处理的关键。 `bind()`方法的基本语法如标题和描述中所述：`bind(type, [data], fn)`。这里，`type`是一个或多个...

    jquery使用bind绑定事件

    本篇文章将深入探讨如何使用jQuery中的`bind()`方法来绑定事件，并通过实例讲解如何改变页面上单行文本框（input[type="text"]）的背景色。 `bind()`方法是jQuery提供的一种事件绑定功能，它可以将一个或多个事件...

    jQuery中文版1.4——1.7API参考手册CHM版

    通过学习这些CHM文件，开发者不仅可以了解jQuery的基本用法，如选择器、遍历、事件处理等，还能深入理解高级特性，如Ajax、动画、插件开发等。对于那些希望提升JavaScript技能，特别是利用jQuery提高网页交互体验的...

    jQuery使用bind动态绑定事件无效的处理方法

    总结一下，当使用jQuery处理动态生成元素的事件绑定时，如果`bind()`无效，可以改用`delegate()`或`on()`。`delegate()`和`on()`能够监听父级元素，从而确保对动态生成的内容进行事件绑定。这种方法确保了无论何时...

    jquery.hotkeys键盘事件处理插件DEMo

    《jQuery.hotkeys键盘事件处理插件DEMO深度解析》 jQuery.hotkeys是一个强大的插件，专为处理键盘事件而设计，使得开发者可以轻松地监听并响应用户按下特定按键的组合。这个插件由John Resig创建，是jQuery库的一个...

    JQuery绑定事件

    **jQuery绑定事件**是JavaScript库jQuery中的核心功能之一，它极大地简化了DOM元素事件处理的流程，使得开发者能够更加高效地编写代码。在JavaScript原生语法中，为元素添加事件监听器通常涉及到`addEventListener`...

    JQuery调用绑定click事件的3种写法

    `.bind()`是jQuery中更通用的事件绑定方法，不仅可以绑定`click`事件，还可以绑定其他多种事件，如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子： ```javascript $('#clickmebind')....

    浅谈jQuery的bind和unbind事件(绑定和解绑事件)

    下面小编就为大家带来一篇浅谈jQuery的bind和unbind事件(绑定和解绑事件)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    jQuery：bind() delegate() live()事件绑定

    在探讨jQuery中的`bind()`, `delegate()`, 和`live()`事件绑定方法的区别时，我们需要深入理解它们在处理DOM事件时的独特方式。这些方法在不同的场景下提供了灵活且高效的选择，帮助开发者创建响应式和动态的Web应用...

    jquery图片加载动画——queryloader2

    jQuery QueryLoader2是一款强大的JavaScript库，专为网页中的图片加载设计出优雅的加载动画效果。这个库是由Gerben Stoel开发的，它旨在提供一种跨浏览器的解决方案，以提升用户体验，尤其是在网页内容加载期间。...

    jquery绑定事件 bind和on的用法与区别分析

    在jQuery中，`bind` 和 `on` 都是用来绑定事件处理函数的，但它们之间存在一些关键的区别。本文将详细解析这两个方法的用法及其差异。 首先，`bind` 是 jQuery 的早期版本中用于绑定事件的方法。它接受三个参数：`...

    JQuery入门——移除绑定事件unbind方法概述及应用

    1、在DOM对象的实践操作中，既然存在用于绑定事件的bind方法，也相应存在用于移出绑定事件的方法，在JQuery中，可以通过unbind方法移除所有绑定的事件或某一个事件。 2、示例代码： 代码如下:&lt;!DOCTYPE ...

    jQuery使用bind函数实现绑定多个事件的方法

    `bind`函数是jQuery中用于绑定事件处理程序的一个重要方法，它允许我们为一个或多个事件添加监听器。本篇文章将深入探讨如何使用jQuery的`bind`函数来实现绑定多个事件。 首先，`bind`函数的基本语法如下： ```...

    jQuery事件及绑定.pptx

    jQuery对JavaScript操作DOM事件进行了封装，形成了更好的事件处理机制； 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法（教材P263表A-4）： 分类 事件方法 描述 鼠标 click...

    JQuery中绑定事件（bind()）和移除事件（unbind()）

    总结来说，`bind()`和`unbind()`（或其简化版本`click()`、`off()`）是jQuery中处理事件绑定和解绑的关键方法。理解并熟练运用它们，能够帮助开发者更有效地控制页面的交互行为，确保在适当的时候执行或停止执行特定...

Magicbox
Global site tag (gtag.js) - Google Analytics