javascript - 如何改进我的 javascript 模式以获得更大的灵活性/可维护性？

Question

目前，我使用类似于下面代码的模式加载所有 JavaScript。一个文件将反射(reflect)站点中的单个页面或组件。例如，如果我有一个联系页面，则关联的 javascript 文件可能是:

(function () {

    $(function () {
        contactForm.init();
        locationMap.init();
    });

    var contactForm = {

        init: function () {
            ... Do form manipulation here
        }
    };

    var locationMap = {

        init: function () {
            ... Do map manipulation here
        }
    };

})();

这对于较小的网站来说很好，但随着网站的发展并且需要跨页面共享功能或某些组件相互依赖(例如，联系表单中的选项可能会根据选择位置 map 而改变)，这种模式显示了它的局限性。

我的问题是，如何改进这一点以允许模块之间不断增长的复杂性和依赖性？

Answer 1

好的改进是在命名空间中组织代码并使用“揭示模块”模式:

var contact = contact || {};
var contact.form = (function () {
    // private functions
    function privateFunction() {}        
    // public functions
    function init() {
        privateFunction()
        ... Do form manipulation here
    }

    return {
        init : init
    };
})();

但对于更复杂的应用程序，我建议寻找一些 MVVM 架构框架(我更喜欢 AngularJS )