Question

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

(function () {

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

    var contactForm = {

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

    var locationMap = {

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

})();

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

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

Answer 1

良好的改进将是在命名空间中组织代码并使用The Revealing Module模式：

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）

Answer 2

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

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

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

2 个答案: