jquery - 没有看到将函数作为(参数)而不是{做某事}的逻辑

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)中 react 将是实现特定接口(interface)的对象:

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

现在，欢迎来到 Javascript!

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

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

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

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

reaction在javascript中只是一个函数，一个回调函数。

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

• 只要文档准备好，就执行此操作。
• 每当用户点击 div 时，都会执行此操作。
• 每当鼠标进入范围时，就执行任何操作。