2 Different ways to write a menu widget?

implementation.js

/**
 * In your display, you might add the menu widget to the menu panel like so
 */

var menu_root = new sd.Widgets.MenuRoot();
menu_root.as_widget().prependTo(menu);
menu_root.on_logout_click(function() {
  sd.Gadget.client.oauth.logout();
  sd.Gadget.render_login_page();
  sd.Gadget.render_menu();
});

module_menu.js

/**
 * Root Menu Widget
 * @constructor
 */
sd.Widgets.MenuRoot = function() {

    var menu_panel = $('<div/>', {id: 'MenuRoot'}),
        menu_click_area = $('<div/>').appendTo(menu_panel),
        menu_img = $('<img/>', {src: sd.Widgets.menu_root_img, 'class': 'menu_image_click'}).prependTo(menu_click_area),
        logo = new sd.Widgets.Logo().appendTo(menu_click_area),
        menu_list = $('<ul/>', {'class': 'reply_context_body'}).appendTo(menu_panel),
        logout_item = $('<li/>', {text: 'Logout'}).appendTo(menu_list),
        blocker = $('<div/>', {'id': 'menu_blocker'}),
        toggle_menu = function() {
            menu_list.toggle();
            blocker.toggle();
        },
        logout_action = function() {
            sd.log('logout button clicked');
        };

    $('#menu_blocker').remove();
    blocker.prependTo('body');

    menu_click_area.click(function() {toggle_menu();});
    logout_item.click(function() {
        toggle_menu();
        logout_action();
    });

    return {
        /**
         * @return The widget as a {jQuery} object.
         */
        as_widget: function() {
            return menu_panel;
        },
        /**
         * Set the callback function for clicking on the logout button
         * @param {Function} callback A callback function for the logout item.
         */
        on_logout_click: function(callback) {
            logout_action = callback;
        }
    };
};

prototype_menu.js

/**
 * Root Menu Widget
 * @constructor
 */
sd.Widgets.MenuRoot = function() {
  var me = this;
  this.logout_action = function() {sd.log('Logout button clicked.');};
  this.menu_panel = $('<div/>', { id: 'MenuRoot' });

  this.menu_click_area = $('<div/>');
  this.menu_img = $('<img/>').attr('src', sd.Widgets.menu_root_img).addClass('menu_image_click');
  this.menu_img.prependTo(this.menu_click_area);

  this.Logo = new sd.Widgets.Logo();
  this.Logo.appendTo(this.menu_click_area);

  this.menu_click_area.appendTo(this.menu_panel);
  this.menu_click_area.click(function() { me.toggle_menu();});

  this.menu_list = $('<ul/>', {
    'class': 'reply_context_body'
  }).appendTo(this.menu_panel);

  this.logout_item = $('<li/>', {text: 'Logout'}).appendTo(this.menu_list);
  this.logout_item.click(function() {me.do_logout();});
  sd.Widgets.rebind_hover(this.logout_item);

  $('#menu_blocker').remove();
  this.blocker = $('<div/>', {'id': 'menu_blocker'}).prependTo('body');
  this.blocker.click(function() { me.toggle_menu(); });
};


/**
 * Shortcut to toggle the menu body between hiding and showing states.
 */
sd.Widgets.MenuRoot.prototype.toggle_menu = function() {
  this.menu_list.toggle();
  this.blocker.toggle();
};


/**
 * Internal logout click handler.
 */
sd.Widgets.MenuRoot.prototype.do_logout = function() {
  this.logout_action();
};


/**
 * Set the callback function for clicking on the logout button
 * @param {Function} callback A callback function for the logout item.
 */
sd.Widgets.MenuRoot.prototype.on_logout_click = function(callback) {
  this.logout_action = callback;
};


/**
 * @return The widget as a {jQuery} object.
 */
sd.Widgets.MenuRoot.prototype.as_widget = function() {
  return this.menu_panel;
};