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

【问题标题】：How can I improve my javascript pattern for greater flexibility/maintainability?如何改进我的 javascript 模式以获得更大的灵活性/可维护性？
【发布时间】：2014-09-09 02:43:05
【问题描述】：

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

(function () {

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

    var contactForm = {

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

    var locationMap = {

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

})();

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

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

【问题讨论】：

我没有足够的知识来对此发表答案 - 但您是否考虑过使用 AMD（异步模块定义），通过诸如 require.js 或 curl.js 之类的实现。该技术的目标之一是处理需求管理和重用。
感谢@james，我曾考虑过 require.js，但想更好地了解如何首先改进自己的代码。
我强烈建议：加强，在 JavaScript 之上使用一些改进的语言。我/我们选择了 TypeScript。例如。我无法比较 prev JS 维护和当前基于 TypeScript 的内容。它带有 The Revealing Module（您已经部分尝试使用）等架构功能。但是在某些 IDE 的支持下，它甚至可以进行编译时检查……这将是我的强烈建议……
我在我的 JavaScript 博客上写过关于通过依赖管理改进架构的文章，这里：jsforallof.us/2014/08/01/… 专门使用 Browserify 处理依赖关系
@benhowdle89 我会检查一下，谢谢。

标签： javascript design-patterns architecture

【解决方案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）

【讨论】：

【解决方案2】：

您应该使用模块加载器，例如 requirejs 或 browserify。通过 requirejs 你必须使用 AMD 风格的模块定义，通过 browserify 你必须使用 commonjs 风格的模块定义。 Commonjs 默认情况下与浏览器不兼容（它适用于 nodejs），因此您必须从中构建与浏览器兼容的 js 文件（browserify 会这样做）。在你的情况下 requirejs 可能是一个更好的解决方案（如果你不熟悉 nodejs），但我建议你阅读更多关于这两者的内容。

另一种可能的解决方案是使用ES6 modules。目前你也必须由它们构建，但以后我认为每个浏览器都会支持它们。

【讨论】：