3

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

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

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

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

希望有人理解我为什么会感到困惑，并能解释我明显错过了什么。

4

7 回答 7

3

UI 编程本质上是事件驱动的。

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

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

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

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

现在，欢迎使用 Javascript！

由于 Javascript 函数是高阶函数，因此将函数作为参数传递是一种常见的做法，它们被命名为回调。在定义此回调函数时，javascript 也非常冗长。

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

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

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

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

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

  • 只要文件准备好，就这样做。
  • 每当用户点击 div 时，就这样做。
  • 每当鼠标进入跨度，做任何事情。
于 2013-09-26T09:55:03.660 回答
2

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

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

您还可以执行以下操作：

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

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

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

于 2013-09-26T08:19:02.323 回答
1

匿名函数的原因是它是在就绪函数内部调用的。这样，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();    
};

你会覆盖准备好的功能。

于 2013-09-26T08:20:02.757 回答
1

我认为您的关注更多与语法有关，而不是与逻辑有关。

你真的应该检查一下CoffeeScript

你的代码看起来像这样

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

但是 CoffeScript 更像是模板语言，需要编译成 JavaScript（这很容易做到）。但是这些好处值得额外编译的麻烦。:)

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

于 2013-09-26T10:09:21.037 回答
0

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

认为

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.
     }
    }
于 2013-09-26T08:13:09.730 回答
0

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

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

话虽如此，这是 javascript 中非常常见的模式，并且有很大的压力要使语法更简洁。

于 2013-09-26T08:43:05.043 回答
0

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

来电：function();

声明：function(){};

抱歉我的困惑问题，猜它不会是最后一个；）最好的问候，克里斯托弗

于 2013-09-27T12:10:32.160 回答