jquery技巧之让任何组件都支持类似DOM的事件管理

本文介绍一个jquery的小技巧，能让任意组件对象都能支持类似DOM的事件管理，也就是说除了派发事件，添加或删除事件监听器，还能支持事件冒泡，阻止事件默认行为等等。在jquery的帮助下，使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样，虽然在最后当你看到这个小技巧的具体内容时，你可能会觉得原来如此或者不过如此，但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制，那开发出来的组件一定会有更大的灵活性和扩展性，而且我也是第一次使用这种方法（见识太浅的原因），觉得它的使用价值还蛮大的，所以就把它分享出来了。

在正式介绍这个技巧之前，得先说一下我之前考虑的一种方法，也就是发布-订阅模式，看看它能解决什么问题以及它存在的问题。

1. 发布-订阅模式

很多博客包括书本上都说javascript要实现组件的自定义事件的话，可以采用发布-订阅模式，起初我也是坚定不移地这么认为的，于是用jquery的$.Callbacks写了一个：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

define(function(require, exports, module) {

 

    var $ = require('jquery');

    var Class = require('./class');

 

    function isFunc(f) {

        return Object.prototype.toString.apply(f) === '[object Function]';

    }

 

    /**

     * 这个基类可以让普通的类具备事件驱动的能力

     * 提供类似jq的on off trigger方法，不考虑one方法，也不考虑命名空间

     * 举例：

     * var e = new EventBase();

     * e.on('load', function(){

     *  console.log('loaded');

     * });

     * e.trigger('load');//loaded

     * e.off('load');

     */

    var EventBase = Class({

        instanceMembers: {

            init: function () {

                this.events = {};

                //把$.Callbacks的flag设置成一个实例属性，以便子类可以覆盖

                this.CALLBACKS_FLAG = 'unique';

            },

            on: function (type, callback) {

                type = $.trim(type);

                //如果type或者callback参数无效则不处理

                if (!(type && isFunc(callback))) return;

 

                var event = this.events[type];

                if (!event) {

                    //定义一个新的jq队列，且该队列不能添加重复的回调

                    event = this.events[type] = $.Callbacks(this.CALLBACKS_FLAG);

                }

                //把callback添加到这个队列中，这个队列可以通过type来访问

                event.add(callback);

            },

            off: function (type, callback) {

                type = $.trim(type);

                if (!type) return;

 

                var event = this.events[type];

                if (!event) return;

 

                if (isFunc(callback)) {

                    //如果同时传递type跟callback，则将callback从type对应的队列中移除

                    event.remove(callback);

                } else {

                    //否则就移除整个type对应的队列

                    delete this.events[type];

                }

            },

            trigger: function () {

                var args = [].slice.apply(arguments),

                    type = args[0];//第一个参数转为type

 

                type = $.trim(type);

                if (!type) return;

 

                var event = this.events[type];

                if (!event) return;

 

                //用剩下的参数来触发type对应的回调

                //同时把回调的上下文设置成当前实例

                event.fireWith(this, args.slice(1));

            }

܋到这个小技巧的具体内容时，你可能会觉得原来如此或者不过如此，但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制，那开发出来的组件一定会有更大的灵活性和扩展性，而且我也是第一次使用这种方法（见识太浅的原因），觉得它的使用价值还蛮大的，所以就把它分享出来了。

在正式介绍这个技巧之前，得先说一下我之前考虑的一种方法，也就是发布-订阅模式，看看它能解决什么问题以及它存在的问题。

1. 发布-订阅模式

很多博客包括书本上都说javascript要实现组件的自定义事件的话，可以采用发布-订阅模式，起初我也是坚定不移地这么认为的，于是用jquery的$.Callbacks写了一个：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

define(function(require, exports, module) {       var $ = require('jquery');     var Class = require('./class');       function isFunc(f) {         return Object.prototype.toString.apply(f) === '[object Function]';     }       /**      * 这个基类可以让普通的类具备事件驱动的能力      * 提供类似jq的on off trigger方法，不考虑one方法，也不考虑命名空间      * 举例：      * var e = new EventBase();      * e.on('load', function(){      *  console.log('loaded');      * });      * e.trigger('load');//loaded      * e.off('load');      */     var EventBase = Class({         instanceMembers: {             init: function () {                 this.events = {};                 //把$.Callbacks的flag设置成一个实例属性，以便子类可以覆盖                 this.CALLBACKS_FLAG = 'unique';             },             on: function (type, callback) {                 type = $.trim(type);                 //如果type或者callback参数无效则不处理                 if (!(type && isFunc(callback))) return;                   var event = this.events[type];                 if (!event) {                     //定义一个新的jq队列，且该队列不能添加重复的回调                     event = this.events[type] = $.Callbacks(this.CALLBACKS_FLAG);                 }                 //把callback添加到这个队列中，这个队列可以通过type来访问                 event.add(callback);             },             off: function (type, callback) {                 type = $.trim(type);                 if (!type) return;                   var event = this.events[type];                 if (!event) return;                   if (isFunc(callback)) {                     //如果同时传递type跟callback，则将callback从type对应的队列中移除                     event.remove(callback);                 } else {                     //否则就移除整个type对应的队列                     delete this.events[type];                 }             },             trigger: function () {                 var args = [].slice.apply(arguments),                     type = args[0];//第一个参数转为type                   type = $.trim(type);                 if (!type) return;                   var event = this.events[type];                 if (!event) return;                   //用剩下的参数来触发type对应的回调                 //同时把回调的上下文设置成当前实例                 event.fireWith(this, args.slice(1));             } c8c3353334163-70">        }     });       return EventBase; });

（基于seajs以及《详解Javascript的继承实现》介绍的继承库class.js）

只要任何组件继承这个EventBase，就能继承它提供的on off trigger方法来完成消息的订阅，发布和取消订阅功能，比如我下面想要实现的这个FileUploadBaseView：