Question

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

What does the exclamation mark do before the function?

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

我见过以下三个例子：

(function(parameterOne, parameterTwo) {

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

   functionTwo: new function() {
   },

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

})()

我的问题如下：

什么时候使用构造作为functionOne vs functionTwo vs functionThree？我如何能够明确地调用functionOne，functionTwo或functionThree？

我见过这样的函数：

(function(parameter) {

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

此示例中的文档表示什么？我很久以前就对此感到困惑。

我见过遵循这种结构的jQuery插件吗？

(function($) {

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

为什么 $ 传递给函数， jQuery 结尾传递？我道歉，因为这可能是你们中的一些人的基本问题，但是现在这些问题已经让我困扰了几个星期，我迫不及待地想得到任何答案。

谢谢，

卡尔蒂克

Answer 1

(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中，已经存在本机函数$，或者在某些生产站点中$可能是原型JS函数。但是在内部示例中，请确保var $不是原生$或不是Prototype。

一般情况下，您不应该自由地使用(function() {...})() - 这仅在您保护全球环境的特定情况下使用，如上所述。

了解JavaScript函数和插件设置

1 个答案: