Scope de eventos y widgets

[jevy99]

Buenas.

Lo primero es presentarme, ya que este es mi primer mensaje en este foro.
Llevo años usándolo para resolver dudas, así como StackOverflow, pero me he encontrado con una duda que no he encontrado y me veo en la necesidad de preguntarlo directamente.
Lo más probable es que no haya sabido cómo buscarlo, porque es algo difícil de describir en pocas palabras.

Bien, vamos al meollo.

Ayer, un compañero de trabajo, que lleva muchos años en este mundillo y sabe mucho, me dijo que los eventos y los widgets es mejor tenerlos en global y llamarlos cuando sea necesario porque vio una parte de mi código en la que creaba un popover de Bootstrap dentro de una función.

Esta es la parte de código que vió y criticó XD:

Código Javascript:

(function($){
    var mq630 = window.matchMedia('screen and (max-width: 630px)');
 
    $(window).ready(function(){
        if(mq630.matches) {
            mueveCuadroGris();
            sacaPopConClick();
        }
        mq630.addListener(function(changed) {
            if(changed.matches) {
                mueveCuadroGris();
                sacaPopConClick();
            } else {
                quitaCuadroGris();
                sacaPopHover();
            }
        });
    });
    
})(jQuery);
 
/********************* ESTA ES LA FUNCIÓN DE LA DISCORDIA *********************/
 
function sacaPopConClick() {
    var boton = $(".tooltip-info-show");
    // IE no lee el getter de background-position-x
    var pos = parseInt(boton.css('background-position'));
    var newPos = parseInt(pos) - 25;
    var cont;
    if(boton.parent().attr('class') == "form-group form-horizontal") {
        cont = boton.parent();
    } else {
        cont = ".row.col-100";
    }
    
    resetEventosPop(boton);
    
    boton.on('click', function(event) {
        var este = $(this);
        if(parseInt(este.css('background-position')) == pos) {
            cerrarPop(boton, pos);
            // curiosamente, IE si lee el setter de background-position-x
            este.css('background-position-x', newPos + 'px');
            este.parent().parent().parent().css('background-color', '#eaf0f6');
            
            event.stopPropagation();
        }
    });
    
    $('body').on('click', function() {
        cerrarPop(boton, pos);
    });
 
    boton.popover({
         trigger: "click",
         template: '<div class="popover tooltip-info"><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
         html: true,
         container: cont,
         content: function() {
            var targetValue = $(this).attr("data-target-value") || false;
            return $(targetValue).html();
         }
    });
}
/********************* FIN *********************/
 
function sacaPopHover() {
    var boton = $(".tooltip-info-show");
    
    resetEventosPop(boton);
    
    boton.popover({
        trigger: "hover",
        template: '<div class="popover tooltip-info"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
        html: true,
        container:"body",
        placement: "auto top",
        content: function() {
            var targetValue = $(this).attr("data-target-value") || false;
            return $(targetValue).html();
        }
    });
}
 
function cerrarPop(boton, pos) {
    boton.css('background-position-x', pos);
    boton.parent().parent().parent().css('background-color', 'transparent');
    boton.popover('hide');
}
 
function resetEventosPop(boton) {
    boton.popover("destroy");
    boton.off('click');
    $('body').off('click');
    $("a.tooltip-info-show").on('click', function(event) {
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
    });
}
 

Explicación del código (aunque es sencillo):
La primera función se ejecuta automáticamente, y llama a unas funciones u otras según el tamaño de la ventana del navegador.
La función sacaPopConClick():
1. Destruye eventos onClick creados en otras funciones y crea los que necesita en el cambio de tamaño del navegador.
2. Hace que los "botones" (almacenados en el objeto jQuery boton), al ser pulsados, cierren cualquier otro popover abierto y cambien su icono (de un "+" a un "-"), pero solo si están en posición "+". Para la propagación para que el click no llegue a body, de modo que salta directamente al siguiente onClick del objeto y abre el popover asociado a este. Repito que esto sólo pasa si el botón está con icono "+".
3. Si el botón está en posición "-", el click se salta el paso anterior y llega al body, por lo que cierra todos los popovers abiertos.
4. Crea un nuevo popover con un trigger onClick.
La siguiente función es similar, pero al agrandar la ventana: destruye el popover con trigger click y lo crea con trigger hover.

El código está así porque tengo que cambiar el trigger del popover y no he encontrado ninguna forma de hacerlo más que destruyendo el widget y volviéndolo a crear.

El caso es que he visto mucho código en la red, de supuestos expertos, que tienen eventos y widgets creados dentro de funciones. Incluso en la documentación oficial de Jquery o jQueryUi vienen ejemplos así.

Y el código funciona tal como está arriba, pero soy fanático de las cosas bien formadas y los estándares, por lo que me gusta hacer las cosas bien y no sólo funcionales.

Entonces, mi pregunta es ¿Cuál es la forma más correcta de hacerlo?

Gracias y un saludo.
Javier;