构建javascript模块的更好方法？

我能得到一些关于我的js模块的建议吗？我对js很在行，但不太精通（状态：）我重构模块对吗

我一直在像这样使用js模块模式（粗略的例子，我只是担心结构）：

马虎的方式？

/* Module Code */
var MapModule = (function ($) {
    var $_address;
    var $_mapContainer;

    function loadApi() {
        // do something. maybe load an API?
    }

    function someInternalMethod() {
        // do other things
    }

    var pub = {};
    pub.setAddress = function (address) {
        $_address = address;
    };
    pub.getAddress = function () {
        return $_address;
    };
    pub.initialize = function () {
        loadApi();
    }
})(jQuery);

// usage
MapModule.initialize();

但这种用法似乎有点草率。我喜欢构造器

我重构了一些模块，如下所示：

更好的方法？

(function ($) {
    this.MapModule = function () {
        var $_address;
        var $_mapSelector;
        var $_mapContainer;
        function loadApi() {
            // do something. maybe load an API?
        }
        function someInternalMethod() {
            $_mapContainer = $($_mapSelector);
            // do stuff with the jQ object.
        }

        var pub = {};
        pub.setAddress = function (address) {
            $_address = address;
        };
        pub.getAddress = function () {
            return $_address;
        };
        pub.initialize = function (selector) {
            $_mapSelector = selector;
            loadApi();
        }
    }
})(jQuery);

var map = new MapModule();
map.initialize('#mapcontainer');

这种用法对我来说似乎干净多了，而且效果很好，但我能正确地使用它吗

再走一步

(function ($) {
    this.MapModule = function () {
        var $_address;
        var $_mapSelector;
        var $_mapContainer;
        function loadApi() {
            // do something. maybe load an API?
        }
        function someInternalMethod() {
            $_mapContainer = $($_mapSelector);
            // do stuff with the jQ object.
        }

        var pub = {};
        pub.setAddress = function (address) {
            $_address = address;
        };
        pub.getAddress = function () {
            return $_address;
        };
        pub.initialize = function (selector) {
            $_mapSelector = selector;
            loadApi();
        }
    }
})(jQuery);

var map = new MapModule();
map.initialize('#mapcontainer');

假设这个模块使用一个包装Google Maps和jQuery功能的div做了一些事情：关于将其转换为jQ插件的任何提示，以便我可以将其与签名一起使用，比如

var map=$（'mapcontainer'）.mapModule（）

谢谢
 我修改了您的代码片段，并实际实现了javascript显示模块模式，该模式提供了使用闭包实现公共和私有函数的机会

希望这会有所帮助：

/* Module Code */
var MapModule = (function (module, $, global) {
    var $_address;
    var $_mapContainer;

    // Public functions
    function _loadApi() {
        // Do something, maybe load an API?
    }
    function _someInternalMethod() {
        // Do other things.
    }
    function _initialize = function () {
        _loadApi();
    }

    // Private functions
    function _setAddress = function (address) {
        $_address = address;
    };
    function _getAddress = function () {
        return $_address;
    };

    $.extend(module, {
        loadApi: _loadApi,
        someInternalMethod: _someInternalMethod,
        initialize: _initialize
    });

    return module;
})(MapModule || {},this.jQuery, this);

// Usage
MapModule.initialize();

刚刚遇到这个问题，我想分享一下我的方法

///////////////////////////////
// Module Code 
///////////////////////////////

var ExampleModule = (function()
{
    ////////////////////////////
    // Private Properties
    ////////////////////////////

    var whatever = {
        data: 'somedata';
    };

    ////////////////////////////
    // Private functions
    ////////////////////////////

    function _init() 
    {
        _loadApi();
        _bindToUIEvents();
    }

    function _loadApi() 
    {
        // load an api
    }

    function _bindToUIEvents()
    {
        $('#something').on('click', function(){

            // Do something cool

        });
    }

    function _getWhatever()
    {
        return whatever;
    }

    //////////////////////
    // Public API
    //////////////////////

    return{

        init: _init(),

        getWhatever: function()
        {
            return _getWhatever();
        }

    };

})();

// Usage
ExampleModule.init;

这个问题似乎很大程度上是基于观点，我投票决定就此结束。话虽如此，看看AMD和CommonJS模块模式（如果您没有依赖项，UMD也很好），试试requirejs或browserify，它们将有助于真正模块化您的代码。谢谢，@zzbov。是的，这在很大程度上是自以为是的，因为不同的开发人员会有不同的代码风格和偏好。我想我看到了这个范围内的三个不同点；具体来说，在三者之间移动。谢谢你在我的google fu中添加的关键词：）非常感谢@ZZZBOV，如果这是一个选项，我会接受这个评论作为答案：）