我刚开始编写 JavaScript 一段时间后,我对插件构造函数的设置感到困惑。我通过此链接寻求建议。
What does the exclamation mark do before the function?
我有兴趣了解这个功能的设置..
我见过下面三个这样的例子:
(function(parameterOne, parameterTwo) {
functionOne = function(...) {
...
},
functionTwo: new function() {
},
this.functionThree = function(...) {
}
})()
我的问题如下:
何时使用 functionOne、functionTwo 和 functionThree 给出的构造?我如何才能显式调用 functionOne、functionTwo 或 functionThree?
我见过这样的函数:
(function(parameter) { functionFour = function(..) { }, .... })(document)
此示例中的文档表示什么?我对此困惑了很长时间。
我见过遵循这种结构的 jQuery 插件吗?
(function($) { $.fn.myCustomPlugin: function(...) { } })(jQuery)
为什么将 $ 传递给函数并在最后传递 jQuery ?我很抱歉,因为这对你们中的一些人来说可能是基本问题,但这些问题已经困扰了我几个星期,我迫切希望得到任何答案。
谢谢
卡提克
最佳答案
(函数(参数一,参数二){
没有意义,因为您最终没有传递这些参数。另外,看起来您正在立即尝试创建匿名代码块 - 在某些情况下是有意义的,但您不需要这样做,除非您试图保护全局范围免受此代码块内发生的任何情况的影响。
functionOne = function(...) {
...
},
这是一个类似于 var functionOne 的命名函数,仅在父函数或构造函数中有用。
functionTwo: new function() {
},
更新:当您尝试在此处创建实例时,这并没有真正意义。你绝对可以立即实例化该函数声明中的内容(这与首先声明 func. 然后使用运算符 new 相同),但在这种情况下,你得到的是一个对象而不是函数。尝试:
var f = function() {};
console.log(f); // "function"
var f = new function() {}
console.log(f); // "objest"
该对象是构造函数的实例。
this.functionThree = function(...) {
}
这是一个类的方法。使用运算符 new 实例化该类后,您可以从实异常(exception)部访问它。另外,当您在类中使用 this.
时,请记住每次实例化一个类时,它都会为此值保留内存。当这些实例的变量不同时,这没关系,但如果它是一个方法,则最好将其添加到构造函数原型(prototype)中,这样它只声明一次,并且不会为其保留新的内存块。
})()
在这里,您通常会在内部传递您请求的参数,例如参数一,参数二
(function(parameter) {
functionFour = function(..) {
},
....
})(document)
这是一种将上下文或任何对象传递给此匿名代码块的方法。在本例中,它看起来像是一个采用 window.document 的插件,但它也可以采用 DOM 的任何其他部分。例如,如果您想选择所有标签 a
并接收 document
作为参数,它将迭代 window.document 中的所有链接,但如果您传递 $ ('#somediv')
,此插件将仅迭代具有此 id 的 div 内的链接。
(function($) {
$.fn.myCustomPlugin: function(...) {
}
})(jQuery)
这是确保代码中 $ 是 jQuery 对象的好方法。事实是,例如在 Chrome 中已经有一个原生函数 $
,或者在某些生产站点中 $
可能是一个 Prototype JS 函数。但在里面的示例中,您确保 var $
不是 native $
或不是 Prototype。
一般来说,你不应该随意使用 (function() {...})()
——这仅在我上面提到的保护全局环境的特定情况下使用。
关于jquery-plugins - 了解 JavaScript 函数和插件设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13226280/