我的代码类似于以下内容:
(function(MyHelper, $, undefined){
var selectedClass = "selected";
MyHelper.setImageSelector = function(selector) {
var container = $(selector);
setSelected(container, container.find("input:radio:checked"));
container.find("input:radio").hide().click(function() {
setSelected(container, $(this));
});
};
MyHelper.enableIeFix = function(selector) {
var container = $(selector);
container.find("img").click(function() {
$("#" + $(this).parents("label").attr("for")).click();
});
};
function setSelected(container, selected) {
container.find("label").removeClass(selectedClass);
selected.siblings("label").addClass(selectedClass);
}
}( window.MyHelper = window.MyHelper || {}, $))
我是JS的新手,我想知道这是否是javascript编程中的特定模式。我特意想知道最后一行是什么意思:
}( window.MyHelper = window.MyHelper || {}, $))
是模块模式吗?
答案 0 :(得分:4)
是的,这基本上是一种模块模式。
使用模块模式创建模块的摘要如下:
创建模块范围,通常使用立即调用的函数表达式(IIFE)来创建闭包。这为您的模块创建了“私有空间”,避免了全局污染,并使您的代码保持模块化和隔离。
拥有一个名称空间来附加您的公共方法。开发人员有不同的方法来执行此“附件”过程。一些开发人员将“接收”对象移交给模块,而其他开发人员“返回”要存储在变量中的对象。无论哪种方式,它都是一样的。
在这种情况下,它是模块模式的“切入”版本
(function(MyHelper, $, undefined){
var selectedClass = "selected";
MyHelper.setImageSelector = function(selector) {};
function setSelected(container, selected) {}
}(window.MyHelper = window.MyHelper || {}, $))
在最后一行,它立即调用你的函数并发送这些参数
(window.MyHelper = window.MyHelper || {}, $)
这与执行此操作类似,但不使用函数名称:
function anonymous(MyHelper, $, undefined){...}
anonymous(window.MyHelper = window.MyHelper || {}, $);
第一个参数window.MyHelper = window.MyHelper || {}
是一组操作。无论该操作返回什么,都在模块中提供MyHelper
参数。
||
是“默认”操作。如果||
左边的值是“falsy”,则表达式“defaults”假定的值为右边的值。因此,在您的代码中,如果window.MyHelper
不存在,则默认为对象{}
。
使用“默认”操作,window.MyHelper
将分配现有window.MyHelper
或如果不存在,则为新的对象实例{}
JavaScript中的赋值操作会返回值。赋值操作返回的值是分配给变量的值。这也使得整个操作可以为模块提供值。
第二个参数是$
是什么(我假设是jQuery?)
第三个参数没有传递,从内部来看,它是未定义的。它是这样做的,因为据我所知,undefined
是可变的。所以要有一个纯粹未定义的undefined
,我们什么都不发送,因此变量undefined
是undefined
。
此代码的作用:
MyHelper.setImageSelector = function(selector) {};
已添加到MyHelper
方法setImageSelector
,由于您的MyHelper
来自外部,因此现在使用该方法的任何人都使用MyHelper.setImageSelector()
方法。
IFFE中未扩充到MyHelper
的其他函数和变量就是所谓的“私有”成员。 JavaScript具有功能范围,这意味着它会在每个函数声明中创建一个新范围。简单来说,里面的东西可以看到外面,但外面看不到里面。这也是一种不使用大量函数和变量来污染全局范围的方法
答案 1 :(得分:1)
这是一个JavaScript类。您可以在这里阅读更多相关信息:
答案 2 :(得分:0)
它在存在时扩展全局MyHelper对象,否则创建一个新对象。传递Jquery全局,并将undefined声明为参数,因此可以使用js最小化器进行压缩。
看起来非常像我的模块模式。另见: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjquery
答案 3 :(得分:0)
匿名函数在定义后立即调用/调用,如
(
function(arg1,arg2){
}
)(xarg1,xarg2);
最后一行调用已定义的匿名函数。 匿名函数的参数是
匿名函数“ undefined ”的第三个参数确保没有人覆盖或影响实际的未定义。
这在javascript中定义了一个安全的自我调用函数。