2012-11-05 38 views
1

我刚刚开始写JavaScript,过了一段时间,我对插件构造函数的设置感到困惑。我通过这个链接寻求建议。了解JavaScript函数和插件设置

What does the exclamation mark do before the function?

我有兴趣了解这个功能设置..

我见过看到三个例子像这样如下:

(function(parameterOne, parameterTwo) { 

    functionOne = function(...) { 
     ... 
    }, 

    functionTwo: new function() { 
    }, 

    this.functionThree = function(...) { 
    } 

})() 

我的问题如下:

  1. 什么时候使用函数给出的函数ionOne vs functionTwo vs functionThree?我将如何显式调用functionOne,functionTwo或functionThree?

  2. 我见过的功能如下:

    (function(parameter) { 
    
        functionFour = function(..) { 
        }, 
        .... 
    })(document) 
    

是什么在这个例子中,文件说明什么?我现在一直很困惑这个问题。

  1. 我看过jQuery插件遵循这个结构吗?

    (function($) { 
    
        $.fn.myCustomPlugin: function(...) { 
        } 
    })(jQuery) 
    

为什么$传递给在年底顺利通过了功能和jQuery的?我很抱歉,因为这对你们中的一些人来说可能是一些基本的问题,但是现在几周这些问题阻碍了我,我迫切希望能够得到任何答案。

感谢,

卡尔蒂克

+0

看到这篇文章...并遵循链接到其内的其他重复http://stackoverflow.com/questions/7894038/jquery-plugin-syntax-wrapper http://stackoverflow.com/questions/4484289/id-想知道jquery插件的语法 – charlietfl

回答

2

(function(parameterOne, parameterTwo) {

你不是在端部通过这些争论没有意义。此外,看起来您立即尝试创建匿名代码块 - 在某些情况下是合理的,但除非您尝试保护此代码块内发生的全局范围,否则无需执行此操作。

functionOne = function(...) { 
     ... 
    }, 

这类似于var functionOne命名函数将只有内部父功能或构造有用。

functionTwo: new function() { 
    }, 

UPDATE:并没有真正意义,因为你想在这里创建实例。你可以立即实例化你在那个函数声明里面的东西(它和先声明一个函数一样,然后用运算符new),但是在这种情况下,你得到的是一个对象而不是函数。尝试:

var f = function() {}; 
console.log(f); // "function" 
var f = new function() {} 
console.log(f); // "objest" 

该对象是您的构造函数的实例。

this.functionThree = function(...) { 
    } 

这是一个类的方法。一旦使用运算符new实例化类,您可以从实例外部访问它。另外,当您在类中使用this.时,请记住,每次您实例化一个类时,都会为此值保留内存。当这些实例的变量不同于它的值时,但如果它是一种方法,则最好将它添加到构造函数原型中,这样它只会被声明一次,并且新的内存块不会被保留。

})() 

这里你通常会传递你请求的参数,例如parameterOne, parameterTwo

(function(parameter) { 

    functionFour = function(..) { 
    }, 
    .... 
})(document) 

这是为了上下文或任何对象传递给该匿名代码块的方法。在这种情况下,它看起来像使用window.document的插件,但它也可以使用DOM的其他部分。例如,如果要选择所有标记a并将document作为参数接收,它将遍历window.document中的所有链接,但是如果您通过$('#somediv'),则此插件将仅通过div中的链接迭代此id。

(function($) { 

    $.fn.myCustomPlugin: function(...) { 
    } 
})(jQuery) 

这是确保在$内部代码中是jQuery对象的好方法。事情是在Chrome中,例如已经有一个本地函数$,或者在某些生产站点$可能是一个Prototype JS函数。但是在你的例子里面你要确保var $不是原生的$或者不是Prototype。

一般情况下,你不应该使用(function() {...})()宽松 - 正如我上面提到的,当你保护全球环境,这是只有在特定情况下使用。

+0

我的例子可能是错误的或不正确的,因为我不太了解JavaScript。我正在学习,所以我问这个问题。 – Kartik

+0

我明白了,我不是那个意思是至关重要的所有,我只是说明你得到了什么那里:) –

+0

请问我如何将调用函数functionOne,functionTwo和functionThree,如果可能的话? – Kartik