Question

我正在为一个网站开发一个jQuery应用程序，根据我的阅读，模块模式似乎是最好的设置。

我已经开始调整模块/子模块模式，在编写应用程序之前，我想知道开发是否正确。这是一个基本样本：

var module = (function($, window, document, undefined) {
    return {
        loader : (function() {

            var fade = 250; // public property
            var $loader = $('#loader'); // private property

            // return public properties and methods
            return {
                fade : fade,
                show : function() {
                    $loader.fadeIn(module.loader.fade);
                },
                hide : function() {
                    $loader.fadeOut(module.loader.fade);
                }
            }
        })()
    }
})(jQuery, window, document);
module.loader.fade = 500;
module.loader.show();

同样，“loader”将是一个子模块。我想将所有子模块保存在主模块中。

我想知道我是否正确处理公共财产，或者是否有更好的办法？

由于

Answer 1

您的IIFE知道第1行的var module，因为其show和hide方法引用了module.loader.fade。这是不好的。正确编写的IIFE应该通过参数传递所有依赖项。在此示例中，如果您将变量的名称从“module”更改为“module2”，则必须更改IIFE的主体。正确编写的IIFE没有这个问题。

您还使用了Revealing Module Pattern的变体来公开闭包变量fade。我将避免说这个被广泛接受的反模式，并简单地指出下面两个更好的选择。

第一个替代方法是使用它来引用淡入淡出变量。

var module = (function($, window, document, undefined) {
return {
    loader : (function() {

        var fade = 250; // public property
        var $loader = $('#loader'); // private property

        // return public properties and methods
        return {
            fade : fade,
            show : function() {
                $loader.fadeIn(this.fade); // use this
            },
            hide : function() {
                $loader.fadeOut(this.fade); // use this
            }
        }
    })()
}
})(jQuery, window, document);
module.loader.fade = 500;
module.loader.show();

第二种方法是创建对返回对象的引用。

var module = (function($, window, document, undefined) {
return {
    loader : (function() {

        var fade = 250; // public property
        var $loader = $('#loader'); // private property
        var stub;
        // return public properties and methods
        return stub = {
            fade : fade,
            show : function() {
                $loader.fadeIn(stub.fade); // use return object to reference fade
            },
            hide : function() {
                $loader.fadeOut(stub.fade); // use return object to reference fade
            }
        }
    })()
}
})(jQuery, window, document);
module.loader.fade = 500;
module.loader.show();

Answer 2

看起来你有权这样做。这篇文章建议你可以为子模块使用自我调用函数：http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html#submodules。唯一的区别是本例中的子模块是在创建其父模块后添加的。

如果您还没有偶然发现模块模式和命名空间的另一个很好的概述：http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/。特别值得注意的是，您可以将上下文保留为自调用函数的参数。

顺便说一句 - 随着您的模块和项目架构的发展，您可能会考虑require.js进行模块管理。

Answer 3

如果您打算使用：

module.loader.show();

我建议在装载程序中删除自执行代码：

loader : function() {
    ...
}

正确的jQuery应用程序模块模式

3 个答案: