Pojedyncze wzorce JavaScript - różnice?

Question

To może wydawać się głupie pytanie, ale jakie są różnice funkcjonalne, jeśli w ogóle, między tymi dwoma wzorcami? Czy nie ma rzeczywistej różnicy funkcjonalnej i jest to tylko kwestia preferencji organizacyjnych? Jakie są przypadki, w których chciałbyś użyć jednego, a nie drugiego? Próbuję znaleźć wzór, który najbardziej mi odpowiada. Dzięki!

$(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() { 
     .... 
    } 

} 

i

$(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

Główną różnicą organizacyjna jest, że pierwszy wzór zanieczyszcza globalnej przestrzeni nazw mniej.

Jeśli chcesz rozdzielić swój kod na pakiety jak w drugim przykładzie, to lepszy sposób, w swoim przykładzie byłoby:

$(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 
     } 
    } 
} 

i odnoszą się do pakietów za pośrednictwem głównej przestrzeni nazw:

Core.plugins.init(); 

Nie mówię, że jest to najlepszy sposób na zrobienie tego w ogóle (niektóre z nich to kwestia preferencji, podobnie jak prywatne osoby i metody), ale w twoim przykładzie - wolałbym moje.

Answer 2

Spójrz na te ramy, które zbudowałem. Wydaje się, że działa całkiem nieźle.

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(); 
});