jQuery技巧之让任何组件都支持类似DOM的事件管理，jquerydom(3)_H5之家

在这个测试里，我定义了一个跟DOM关联的Demo组件并继承了EventBase这个事件管理的类，给beforeRender事件和render事件都添加了一个监听，render方法中也有打印信息来模拟真实的逻辑，实例化Demo的时候用到了#demo这个DOM元素，最后的测试结果是：

完全与预期一致。

测试代码二：

define(function(require, exports, module) { var $ = require('jquery'); var Class = require('mod/class'); var EventBase = require('mod/eventBase'); var Demo = window.demo = Class({ instanceMembers: { init: function (element,options) { this.$element = $(element); this.base(this.$element); //添加监听 this.on('beforeRender', $.proxy(options.onBeforeRender, this)); this.on('render', $.proxy(options.onRender, this)); }, render: function () { //触发beforeRender事件 var e = $.Event('beforeRender'); this.trigger(e); if(e.isDefaultPrevented())return; //主要逻辑代码 console.log('render complete!'); //触发render事件 this.trigger('render'); } }, extend: EventBase }); var demo = new Demo('#demo', { onBeforeRender: function(e) { console.log('beforeRender event triggered!'); }, onRender: function(e) { console.log('render event triggered!'); } }); demo.on('beforeRender', function(e) { e.preventDefault(); console.log('beforeRender event triggered 2!'); }); demo.on('beforeRender', function(e) { console.log('beforeRender event triggered 3!'); }); demo.render(); });

在这个测试了，我定义了一个跟DOM相关的Demo组件并继承了EventBase这个事件管理的类，给beforeRender事件添加了3个监听，其中一个有加prevetDefault()的调用，而且该回调还不是最后一个，最后的测试结果是：

从结果可以看到，render方法的主要逻辑代码跟后面的render事件都没有执行，所有beforeRender的监听器都执行了，说明e.preventDefault()生效了，而且它没有对beforeRender的事件队列产生影响。

2）模拟跟DOM无关联的普通对象

测试代码一：

define(function(require, exports, module) { var $ = require('jquery'); var Class = require('mod/class'); var EventBase = require('mod/eventBase'); var Demo = window.demo = Class({ instanceMembers: { init: function (options) { this.base(); //添加监听 this.on('beforeRender', $.proxy(options.onBeforeRender, this)); this.on('render', $.proxy(options.onRender, this)); }, render: function () { //触发beforeRender事件 var e = $.Event('beforeRender'); this.trigger(e); if(e.isDefaultPrevented())return; //主要逻辑代码 console.log('render complete!'); //触发render事件 this.trigger('render'); } }, extend: EventBase }); var demo = new Demo({ onBeforeRender: function(e) { console.log('beforeRender event triggered!'); }, onRender: function(e) { console.log('render event triggered!'); } }); demo.render(); });

在这个测试里，我定义了一个跟DOM无关的Demo组件并继承了EventBase这个事件管理的类，给beforeRender事件和render事件都添加了一个监听，render方法中也有打印信息来模拟真实的逻辑，最后的测试结果是：

完全与预期的一致。

测试代码二：

define(function(require, exports, module) { var $ = require('jquery'); var Class = require('mod/class'); var EventBase = require('mod/eventBase'); var Demo = window.demo = Class({ instanceMembers: { init: function (options) { this.base(); //添加监听 this.on('beforeRender', $.proxy(options.onBeforeRender, this)); this.on('render', $.proxy(options.onRender, this)); }, render: function () { //触发beforeRender事件 var e = $.Event('beforeRender'); this.trigger(e); if(e.isDefaultPrevented())return; //主要逻辑代码 console.log('render complete!'); //触发render事件 this.trigger('render'); } }, extend: EventBase }); var demo = new Demo({ onBeforeRender: function(e) { console.log('beforeRender event triggered!'); }, onRender: function(e) { console.log('render event triggered!'); } }); demo.on('beforeRender', function(e) { e.preventDefault(); console.log('beforeRender event triggered 2!'); }); demo.on('beforeRender', function(e) { console.log('beforeRender event triggered 3!'); }); demo.render(); });

在这个测试了，我定义了一个跟DOM无关的Demo组件并继承了EventBase这个事件管理的类，给beforeRender事件添加了3个监听，其中一个有加prevetDefault()的调用，而且该回调还不是最后一个，最后的测试结果是：

所以从2个测试来看，通过改造后的EventBase，我们得到了一个可以让任意对象支持jquery事件管理机制的方法，将来在考虑用事件机制来解耦的时候，就不用再去考虑前面第一个介绍的发布-订阅模式了，而且相对而言这个方法功能更强更稳定，也更符合你平常使用jquery操作DOM的习惯。

4. 本文小结

有2点需要再说明一下的是：

1）即使不用jquery按照第1部分最后提出的思路，把第一部分常规的发布-订阅模式改造一下也可以的，只不过用jquery更加简洁些；

2）最终用jquery 的事件机制来实现任意对象的事件管理，一方面是用到了代理模式，更重要的还是要用发布-订阅模式，只不过最后的这个实现是由jquery帮我们把第一部分的发布-订阅实现改造好了而已。

以上内容是针对jQuery技巧之让任何组件都支持类似DOM的事件管理的相关知识，希望对大家有所帮助！

您可能感兴趣的文章: