我正在为一个网站开发一个 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),或者是否有更好的方法?
谢谢
最佳答案
您的 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();
关于jquery - 正确的 jQuery 应用程序模块模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21707442/