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

主要的组织差异是第一个模式污染全局命名空间 less 。

如果您确实希望将代码分成如第二个示例中的软件包，那么在您的示例中，更好的方法是：

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

JavaScript单例模式 - 差异？

2 个答案: