jQuery API 中的 JavaScript 函数中的函数

function inside a JavaScript function in jQuery API

本文关键字：函数 JavaScript API 中的 jQuery      更新时间：2023-09-26

请看下面的函数：

<script type="text/javascript"> 
$(function() 
{
    var dataresult = 0;
    $("#Structure #Toggle").click( function()       
    {
        if($("#Structure #Toggle").data("currentstage") )
        {           
            $("#AdvancedOptions").hide();
            $("#Structure #Toggle").html("Show Advanced Options");
            $("#Structure #Toggle").data("currentstage", false);
        }
        else
        {
            $("#AdvancedOptions").show();   
            $("#Structure #Toggle").html("Hide Advanced Options");
            $("#Structure #Toggle").data("currentstage", true);
        }           
    });

在这里，我注意到一个$(function()在行上定义了另一个函数$("#Structure #Toggle").click( function()这是什么意思？

>$(function(){告诉jQuery在文档加载后立即执行此函数。一旦发生这种情况，$("#Structure #Toggle").click( function() 就会在 ID 为 "Structure"/"Toggle" 的 （过度限定的） DOM 元素上注册一个 click 事件的侦听器。它首先选择该元素，然后添加单击侦听器，这是另一个函数。

$(function() {...});在

加载 DOM 后执行该函数;它是以下的缩写：

$(document).ready(function() { ... });

当该函数运行时，它将执行：

$("#Structure #Toggle").click(function() { ... });

这会将内部函数绑定到 #Structure #Toggle 元素上的 click 事件，以便只要您单击该函数，就会执行该函数。

没什么特别的意思。它实际上只是另一个功能。

通常，JS中的函数只是另一个对象。它与我们拥有的任何其他类型没有任何不同——数字、字符串、数组等。有两种方法可以将函数分配给名称。首先我们有

function something () {}

这基本上只是一个快捷方式：

var something = function () {}


在该语句的第二种形式中，它清晰可见，该函数只是该变量的一个值。而且，与所有值一样，您可以将它们作为参数传递给函数。

也就是说，这里要做的是：首先，有函数 $，它可以将函数作为第一个参数。所以我们给它一个。在该函数中，我们调用另一个函数：$（...）。点击（）。该函数再次将函数作为参数 - 因此我们给它一个。仅此而已，这里没有魔法;)

这是因为JavaScript将函数视为第一类原语。 请考虑以下语句：

jasons_age = 20;

以及以下条件：

function canDrinkInTheUS(age) {
  if(age>21) {
     return true;
  } else {
     return false;
  }
}

你这样称呼：

canDrinkInTheUS(jasons_age);

这里一个变量（age）值被赋值（20），14年前canDrinkInTheUS(jasons_age)返回false。 但是，您现在正在阅读此答案，此时它将不再准确。 表达我的年龄的更好方法是作为一个函数。 在 JavaScript 中，你可以age做一个函数，可能是这样的（使用这个聪明的年龄计算器）：

jasons_age_right_now = function() {
  return ~~((Date.now() - new Date(1978,12,25)) / (31557600000));
};

这让我们更新了canDrinkInTheUS函数，将函数作为参数：

function canDrinkInTheUS(age) {
  if(age()>21) {
     return true;
  } else {
     return false;
  }
}

为了称呼它，我们像这样传递jasons_age_right_now：

canDrinkInTheUS(jasons_age_right_now);

请注意，您没有添加()和jasons_age_right_now的结尾，这是因为直到我们进入canDrinkInTheUS 时才调用该函数。

因为 JavaScript 允许你将函数作为参数传递，所以你甚至可以返回一个函数，它本身接受这样的参数：

anyones_age_right_now = function(date_of_birth) {
  return function() {
    return ~~((Date.now() - date_of_birth) / (31557600000));
  };
};

然后将jasons_age_right_now更改为如下所示：

jasons_age_right_now = anyones_age_right_now(new Date(1978, 12, 25));

因为jasons_age_right_now是一个函数，所以它可以传递给更新的canDrinkInTheUS()。

在Javascript中，可以在其他函数中包含函数。在您的情况下 

$(function() {/*...*/})

是加载文档时执行的函数。在此事件中，您有一个函数，该函数归因于与选择器匹配的任何标签的单击事件

$("#Structure #Toggle")

因此，在加载文档后，将定义事件，只要标签存在，它们就会侦听与函数关联的 click 事件，该函数作为参数传递给与选择器匹配的标签。

我注意到您的选择器包含两个 ID：

$("#Structure #Toggle")

如果您没有具体的理由这样做，那么最好有

$("#Toggle")

相反，由于 id 应该是唯一的，因此您的 ID 切换标识与选择器匹配的标签。最好尽可能保持简单。

此外，如果您一次又一次地查询相同的标签，对健康不利。

而不是重复

$("#Structure #Toggle")
一次

又一次地执行以下操作：

var structureToggle = $("#Structure #Toggle");

随时随地需要 

$("#Structure #Toggle")

稍后只需使用您的structureToggle变量。

相关文章：