Question

我是JavaScript和JQuery的新手，需要帮助才能看到此示例中的逻辑：如果我想在点击事件上隐藏div，正确的解决方案如下所示：

$(document).ready(function() {
     $('div').click(function() {
         $('div').hide();
     });
});

但对我来说，如果看起来像这样会更有意义：

$(document).ready() {
   $('div').click() {
       $('div').hide();    
   };
};

希望有人理解为什么我会发现这一点令人困惑，并能解释我明显遗漏的内容。

Answer 1

UI编程本质上是Event driven。

在此范例中，无论您使用何种语言，都必须定义将在事件发生时运行的事件处理程序。在您的示例中，如果您使用不太紧凑的语法，则更具表现力：

$('div').on('click', reaction);

在纯OOP（例如java）中，反应将是实现特定接口的对象：

import java.util.Observer;
public class ResponseHandler implements Observer {
  ...
}
ResponseHandler reaction = new ResponseHandler();

现在，欢迎使用Javascript！

由于Javascript函数是Higher-order，因此将函数作为参数传递是一种常见做法，它们的名称为callbacks。而且，在定义此回调函数时，javascript也非常冗长。

您必须使用完整函数表达式来定义回调（命名或匿名）。或者你可以转移到Coffescript化妆品来浏览这些函数定义（但它们只是语法糖，因为无论如何都存在函数定义）。

您发明的{}语法或coffescript箭头语法实际上隐藏了实际的反应。

$('div').on('click', reaction);

javascript中的

反应只是一个函数，一个回调函数。

现在，jQuery事件是reactor engine的一个实现，允许您的应用程序代码与实际引擎完全分离。这意味着jQuery应用程序是一组对事件的反应定义：

每当文档准备就绪时，请执行此操作。
每当用户点击div时，请执行此操作。
每当鼠标进入span时，都要做任何事情。

Answer 2

您实际看到的是使用回调，您可以传递匿名函数或预定义函数的名称。

$('div').click( // Callback within scope of selector when event is fired );

您还可以执行以下操作：

function doStuff() {
    console.log('doing stuff...');
}

$('div').click('doStuff');

如果您要使用您的示例并执行$（'div'）。单击（）它实际上会触发div上的click事件。

Answer 3

匿名函数的原因是它在ready函数内部被调用。这样jQuery可以在调用传递给ready函数的函数之前和之后执行一些操作。当然jQuery.ready函数要复杂得多，但为了说明我的意思，让我们假装它是：

jQuery.ready = function(yourAnonymusFunction) {
    // do something before ...

    // call the function you passed
    yourAnonymusFunction();

    // do something afterwards

}

使用您的语法，实际上应该是：

$(document).ready = function() {
    $('div').click() {
    $('div').hide();    
};

你会覆盖就绪功能。

Answer 4

我认为您的关注与语法有关，而与逻辑无关。

你应该真的检查一下CoffeeScript

你的代码看起来像这样

$(document).ready ->
  $("div").click ->
    $("div").hide()

然而，CoffeScript更像是需要编译为JavaScript的模板语言（这很容易）。但是编译时带来的好处是值得的。 :)

在这里试试http://js2coffee.org/

Answer 5

匿名函数用于避免污染全局命名空间

假设

1）

var x="test"
   function a(){
   alert(x);//  x then its global to whole script available to the page
   }

2）如果你定义

  function () {
      var x="test"
      function a(){
      alert(x); //will bo local to this anonymous function and will not pollute the global x variable and still global for methods inside this anonympous function.
     }
    }

Answer 6

函数ready将函数作为参数。当函数ready执行时，它所做的就是将该函数添加到元素准备好时要执行的函数列表中。这称为call-back。

因此，在您的代码中，您需要定义一个函数，然后将该函数传递给$.ready。 Javascript是完全动态的，无法知道ready本身是一个接受函数作为参数的函数，这就是为什么你需要使用一个语法来指定“call ready as a function，传入这个块”的原因我现在定义为函数的代码“。

话虽如此，这是一个非常常见的javascript模式，并且有很多压力使sytax更加简洁。

Answer 7

谢谢大家的帮助！这一切都归结为我的误解是因为我没有意识到调用和声明函数之间的区别。

致电：function();

声明：function(){};

对不起我的疑惑问题，猜猜它不会是最后一个;）最好的祝福，的Kristofer

不要把函数放在（参数）而不是{do something}中的逻辑

7 个答案: