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

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”将是一个子模块。我想将所有子模块都包裹在主模块中。

我想知道我是否正确处理了公共(public)属性(property)，或者是否有更好的方法？

谢谢

Answer 1

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

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

第一个替代方案使用它来引用 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();