Простая минималистская реализация сложных JavaScript приложений

MyProject.module.popUp = function (data) {
  var $pp = $('<div class="project-popup"><a href="#" class="project-popup_close">Закрыть</a>'),
		  $bg = $('<div class="project-popup_backbg">');

  function getBgDimenstions() {
    return {
      x: $(document).width(),
      y: $(document).height()
    }
  }

  function getPpPosition() {
    return {
      left: $(window).width() / 2 - $pp.width() / 2,
      top: $(window).scrollTop() + ($(window).height() / 2) - $pp.height() / 2
    }
  }

  function setPositions() {
    var ppPos = getPpPosition(),
			  bgDim = getBgDimenstions();

    $pp.css({ 'left': ppPos.left, 'top': ppPos.top });
    $bg.width(bgDim.x).height(bgDim.y);
  }


  return {
    isBuild: false,

    el: {
      pp: $pp,
      bg: $bg
    },

    build: function () {
      $('body').append($bg).append($pp.append(data));

      var SELF = this;

      $bg.click(function () {
        SELF.hide();
      });

      $pp.find('.project-popup_close').click(function () {
        SELF.hide();
        return false;
      });
    },

    show: function () {
      if (!this.isBuild) {
        this.build();
        this.isBuild = true;
      }

      $('body').addClass('project-popup-overflow');

      setPositions();

      $pp.fadeIn();
      $bg.fadeTo(300, 0.7);

      $(window).bind('resize.popUp', function () {
        setPositions();
      });
    },

    hide: function () {
      $pp.fadeOut();

      $bg.fadeOut('normal', function () {
        $('body').removeClass('project-popup-overflow');
      });

      $(window).unbind('resize.popUp');
    },

    destroy: function () {
      $pp.remove();
      $bg.remove();
    }
  }
}

А во-вторых этот, даже большой, notice() — является почти идеальным изложением высокоуровневой логики всего приложения!

$(window).trigger('my_custom_event', { foo: 'bar' });

$(window).bind('my_custom_event', myCustomEventHandler);

function myCustomEventHandler(){ doStuff(); }