这个模式在javaScript中是什么,我在哪里可以阅读更多相关信息

时间:2012-04-19 10:59:48

标签: javascript jquery

我的代码类似于以下内容:

 (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 || {}, $))

是模块模式吗?

4 个答案:

答案 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,我们什么都不发送,因此变量undefinedundefined


此代码的作用:

MyHelper.setImageSelector = function(selector) {};

已添加到MyHelper方法setImageSelector,由于您的MyHelper来自外部,因此现在使用该方法的任何人都使用MyHelper.setImageSelector()方法。

IFFE中未扩充到MyHelper的其他函数和变量就是所谓的“私有”成员。 JavaScript具有功能范围,这意味着它会在每个函数声明中创建一个新范围。简单来说,里面的东西可以看到外面,但外面看不到里面。这也是一种不使用大量函数和变量来污染全局范围的方法

答案 1 :(得分:1)

这是一个JavaScript类。您可以在这里阅读更多相关信息:

http://javascript.about.com/library/bltut35.htm

答案 2 :(得分:0)

它在存在时扩展全局MyHelper对象,否则创建一个新对象。传递Jquery全局,并将undefined声明为参数,因此可以使用js最小化器进行压缩。

看起来非常像我的模块模式。另见: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjquery

答案 3 :(得分:0)

匿名函数在定义后立即调用/调用,如

(
 function(arg1,arg2){
 }
)(xarg1,xarg2);

最后一行调用已定义的匿名函数。 匿名函数的参数是

  1. window.MyHelper = window.MyHelper || {}       / * MyHelper全局对象或空对象(如果未定义)* /
  2. $   / *     jQuery或Prototype对象。使用jquery,它通常是“jQuery”全局对象,可以与其他库冲突   * /
  3. 匿名函数“ undefined ”的第三个参数确保没有人覆盖或影响实际的未定义。

    这在javascript中定义了一个安全的自我调用函数。