Observer Pattern using jQuery

Observer Pattern using jQuery

    I got asked a while back in a test to implement the Observer Pattern using Javascript / jQuery. I did not understand the Pattern at that point and its taken me a while to get something running. I have no theory background so I had never heard of the Pattern plus I had to understand the difference between Observer and Publish/Subscribe (still slightly confused tho).

    Does the code below seem to form a solid basis for the Observer Pattern? I tried to follow the idea of how Flash AS3 implements the pattern (or at least to my understanding).

    Note: Ive sectioned the different code snippets for my own use as I would like to develop something reusable.

    And yes I do realise this functionality already exists in jQuery but I had to write my own implementation in the test.
    2. (function($) {
    3. function Enemy(element, options) {
    4. this.init();
    5. }

    7. Enemy.prototype = {
    8. init : function() {
    9. console.log('ENEMY init');
    10. },

    12. run : function(event) {
    13. console.log('ENEMY run');
    14. console.log(event.data.obj);
    15. },

    17. attack : function(event) {
    18. console.log('ENEMY attack');
    19. console.log(event.data.obj);
    20. }
    21. };

    23. window.enemy = new Enemy();
    24. })(jQuery);

    2. (function($) {
    3. function Pacman() {
    4. this.init();
    5. }

    7. Pacman.prototype = {
    8. init : function() {
    9. console.log('PACMAN init');
    10. },

    12. eat : function() {
    13. console.log('PACMAN eat');
    14. $(this).eventDispatch('pacman.eat');
    15. }
    16. };

    18. window.pacman = new Pacman();
    19. })(jQuery);

    2. (function($) {
    3. var observers = [];

    5. $.fn.eventAdd = function(event, callback) {
    6. console.log('EVENT_ADD');

    8. //only add object if it exists
    9. if ($(this).length > 0)
    10. observers.push({
    11. event : event,
    12. callback : callback,
    13. obj : this
    14. });
    15. };

    17. $.fn.eventDispatch = function(event) {
    18. console.log('EVENT_DISPATCH');

    20. $.each(observers, function(key, observer) {
    21. //need to understand and refine this object
    22. var passEvent = {
    23. data : observer
    24. };

    26. if (event == observer.event)
    27. observer.callback(passEvent);
    28. });
    29. };
    30. })(jQuery);

    Use:
    2. (function($) {
    3. $(document).ready(function() {
    4. $('#enemy1').eventAdd('pacman.eat', enemy.run);
    5. $('#enemy2').eventAdd('pacman.eat', enemy.attack);

    7. pacman.eat();
    8. });
    9. })(jQuery);