JavaScript單例模式 - 差異？

Question

這可能看起來像一個愚蠢的問題，但這兩種模式之間的功能差異如何？有沒有真正的功能差異，這只是一個組織偏好的問題？當你想使用一個而不是另一個時，有什麼情況？我試圖找到一種我覺得最舒服的設計模式。謝謝！

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

} 

和

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

主要組織不同的是，第一圖案污染了全局命名空間少。

如果你想就像在第二個例子中分離你的代碼包，那麼更好的辦法，你的例子中，應該是：

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

，並通過您的主命名空間是指包：

Core.plugins.init(); 

我不是說這是最好的方式來做這件事（一些是私人成員和方法），但在你的例子中 - 我更喜歡我的。

Answer 2

看看我構建的這個框架。似乎工作得很好。

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