JavaScript单例模式-差异

JavaScript singleton patterns - differences?

本文关键字：差异单例模式 JavaScript 更新时间：2023-09-26

这似乎是一个愚蠢的问题，但是这两种模式之间的功能差异(如果有的话)是什么呢?是否没有真正的功能差异，只是组织偏好的问题?在哪些情况下，您想使用其中一个而不是另一个?我试图找到一种我觉得最舒服的设计模式。谢谢!

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

主要的组织差异在于第一种模式较少地污染全局命名空间。

如果您确实想要像第二个示例那样将代码分成多个包，那么在您的示例中，更好的方法是:

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

我并不是说这是一般情况下最好的方法(其中一些是偏好问题，如私有成员和方法)，但在您的示例中-我更喜欢我的

看看我建立的这个框架。看起来效果不错。

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