JavaScript singleton patterns - differences?

Question

Esto puede parecer una pregunta tonta, pero ¿cuáles son las diferencias funcionales, si las hay, entre estos dos patrones? ¿No hay una diferencia funcional real y es solo una cuestión de preferencia de la organización? ¿Cuáles son algunos casos en los que desearía usar uno y no el otro? Estoy tratando de encontrar un patrón de diseño con el que me sienta más cómodo. ¡Gracias!

$(function(){ 
    Core.init(); 
}); 

var Core = { 

    init: function() { 
     //some initialization code here 
    } 

    _plugins: function() { 
     //instantiate some plugins here 
    } 

    _display: function() { 
     //some more code here 
    } 

    _otherfunctions: function() { 
     .... 
    } 

} 

y

$(function(){ 
    Core.init(); 
    Plugins.init(); 
    Display.init(); 
}); 

var Core = { 

    init: function() { 
     //some initialization code here 
    } 
} 

var Plugins = { 
    init: function() { 
     //start plugins 
    } 

    _modify: function() { 
     //more code 
    } 
} 

var Display = { 
    init: function() { 
    //some init code 
    } 
} 

Answer 1

La principal diferencia es que la organización del primer patrón contamina el espacio de nombres global menos.

Si desea separar el código en paquetes como en el segundo ejemplo, entonces la mejor manera, dentro de su ejemplo, sería:

$(function(){ 
    Core.init(); 
}); 

var Core = { 

    init: function() { 
     //some initialization code here 
    }, 

    plugins: { 
     init: function() { 
     //start plugins 
     } 

     _modify: function() { 
     //more code 
     } 
    }, 

    display: { 
     init: function() { 
     //some init code 
     } 
    } 
} 

y se refieren a los paquetes a través de su espacio de nombres principal:

Core.plugins.init(); 

No estoy diciendo que esta sea la mejor manera de hacerlo en general (algunas son cuestiones de preferencia, como miembros y métodos privados), pero en su ejemplo, preferiría la mía.

Answer 2

Eche un vistazo a este marco que he construido. Parece funcionar bastante bien.

var gtg = gtg || {}; 

(function() { 
    var _this = this; 

    this.registerNamespace = function (namespace) { 
     var root = window, 
      parts = namespace.split("."), 
      i; 

     for (i = 0; i < parts.length; i++) { 
      if (typeof root[parts[i]] === "undefined") { 
       root[parts[i]] = {}; 
      } 
      root = root[parts[i]]; 
     } 

     return this; 
    }; 

}).call(gtg); 

// Register Namespaces 
gtg.registerNamespace("gtg.core"); 
gtg.registerNamespace("gtg.infoBar"); 
gtg.registerNamespace("gtg.navBar"); 
gtg.registerNamespace("gtg.tabBar"); 
gtg.registerNamespace("gtg.utils"); 

(function() { 
    var _this = this; 

    this.initialize = function() { }; 

}).call(gtg.core); 

(function() { 
    var _this = this, 
     $container, 
     $messageContainer, 
     $message; 

    function configureMessage(message) { 
     var className = "info", 
      types = ["error", "info", "warning"]; 

     for (var i in types) { 
      $message.removeClass(types[i]); 
     } 

     switch (message.MessageType) { 
      case 0: 
       className = "error" 
       break; 
      case 1: 
       className = "info" 
       break; 
      case 2: 
       className = "warning" 
       break; 
     } 

     $message.addClass(className).html(message.Message); 
    } 

    this.initialize = function() { 
     $container = $(".info-bar-container"); 
     $messageContainer = $container.find(".message-container"); 
     $message = $messageContainer.find(".message"); 

     $messageContainer.find(".close a").bind("click", function() { 
      _this.close(); 
     }); 
    }; 

    this.close = function() { 
     $messageContainer.fadeOut(300, function() { 
      $container.slideUp(300); 
     }); 
    }; 

    this.show = function (message) { 
     if ($container.css("display") !== "none") { 
      $messageContainer.fadeOut(300, function() { 
       configureMessage(message); 
       $messageContainer.fadeIn(300); 
      }); 
     } else { 
      $container.slideDown(300, function() { 
       configureMessage(message); 
       $messageContainer.fadeIn(300); 
      }); 
     } 
    }; 

}).call(gtg.infoBar); 

(function() { 
    var _this = this; 

    function initializeNavBar() { 
     var paths = window.location.pathname.split("/"), 
      navId; 

     $("#nav-bar ul.top-nav li a[data-nav]").bind("click", function() { 
      _this.switchNav($(this)); 
     }); 

     if (paths[1] != "") { 
      switch (paths[1]) { 
       case "Customer": 
        navId = "customers-nav"; 
        break; 
       case "Order": 
        navId = "orders-nav"; 
        break; 
       case "Product": 
        navId = "products-nav"; 
        break; 
       case "Report": 
        navId = "reports-nav"; 
        break; 
       case "Tool": 
        navId = "tools-nav"; 
        break; 
      } 

      if (navId != "") { 
       _this.switchNav($('#nav-bar ul.top-nav li a[data-nav="' + navId + '"]')); 
      } 

     } else { 
      _this.switchNav($('#nav-bar ul.top-nav li a[data-nav="home-nav"]')); 
     } 
    } 

    this.initialize = function() { 
     initializeNavBar(); 
    }; 

    this.switchNav = function (navItem) { 
     $("#nav-bar ul.top-nav li a[data-nav]").each(function (i) { 
      $(this).removeClass("selected"); 
      $("#" + $(this).data("nav")).hide(); 
     }); 

     navItem.addClass("selected"); 
     $("#" + navItem.data("nav")).show(); 
    }; 

}).call(gtg.navBar); 

(function() { 
    var _this = this; 

    this.initialize = function() { 
     $(".tab-bar ul li a[data-tab-panel]").bind("click", function() { 
      _this.switchTab($(this)); 
     }); 
    }; 

    this.switchTab = function (tab) { 
     $(".tab-bar ul li a[data-tab-panel]").each(function (i) { 
      $(this).removeClass("selected"); 
      $("#" + $(this).data("tab-panel")).hide(); 
     }); 

     tab.addClass("selected"); 
     $("#" + tab.data("tab-panel")).show(); 
    }; 

}).call(gtg.tabBar); 

(function() { 
    var _this = this; 

    this.focusField = function (fieldId) { 
     $("#" + fieldId).select().focus(); 
    }; 

    this.loadJQTemplate = function (templateName, callback) { 
     $.get("/Content/JQTemplates/" + templateName + ".html", function (template) { 
      callback(template); 
     }); 
    }; 

}).call(gtg.utils); 

$(document).ready(function() { 
    gtg.core.initialize(); 
    gtg.infoBar.initialize(); 
    gtg.navBar.initialize(); 
    gtg.tabBar.initialize(); 
});