jQuery哪个是正确的函数定义？

Question

我在jQuery中看到了三个不同的函数定义。使用它们的正确方法是什么？

示例1：

function example() {
  // code here
 }

示例2：

jQuery('#Example').click(function() {
  // code here
 });

示例3：

var example = {
    demo : function() {
      // code here
    }
}

我为什么要选择哪个？

Answer 1

这里没有'最佳'，因为每个功能定义是分开的并且用于不同的目的。另请注意，只有第二个示例与jQuery有关。

你的第一个例子只是一个vanilla JS函数定义，没什么特别的。

你的第二个是jQuery click事件处理程序，它用于声明当所选元素上发生click事件时应该执行的逻辑。

第三个例子是一个对象内部的函数定义，当使用OOP方法（就像声明一个类/模型）或者只是在逻辑中传递一组值时，它可能很有用。

Answer 2

示例1和3与jQuery无关。这些是vanilla javascript片段。

在示例2中，建议使用此语法：

jQuery('#example_container').on('click', '#Example', function(event) {
  // code here
});

这允许您委派事件处理，这意味着即使您在加载页面后创建了该元素，该事件仍将被处理。

Answer 3

你的第一个例子：

function example() {
  // code here
 }

是定义函数的方法，它将根据其范围而可用。

第二个例子：

jQuery('#Example').click(function() {
  // code here
 });

您不仅要定义一个函数，还要将此函数添加到具有id＆＃34;示例＆＃34;

的html元素的click事件中

第三个例子：

var example = {
    demo : function() {
      // code here
    }
}

您正在Object中定义一个函数。所以这个函数将成为方法＆＃34; demo＆＃34;对象＆＃34;示例＆＃34;你刚刚创建。