Question

(function($) {
  return $.extend($.fn, {
    link: function(o) {
      return $(this).find(":input").each(function() {
        var el, name;
        el = $(this);
        name = el.attr("name");
        o.bind("change:" + name, function() {
          // do stuff
        });
        return $(this).bind("change", function() {
          // do stuff
        });
      });
    }
  });
})(jQuery);

其他功能中有很多功能。我的主要问题（4是我试图通过理解这段代码来解决的）：

扩展$ .fn并返回该值是什么意思？
此代码的运行顺序是什么？如果我将console.log作为每个循环中的第一行，我看不到它已执行但如果我将它放在“// do stuff”部分中，我确实看到了它。
如果我在每个语句中并且我查看$（this）.find（“：input”）的值，那么它会给我我正在循环的元素的值吗？
我尝试将“：input”更改为“p”，但我仍然在输入元素上输入“// do stuff”块。如果我将选择器更改为添加.filter或.not，我仍然会在输入“// do stuff”块时打破我认为不应该 - 这是基于所有执行顺序的预期在？如果我只想“//做东西”，如果元素有某个类，该怎么办？

Answer 1

首先，最外层的功能。

(function($){})(jQuery)

这会创建一个匿名函数，并立即运行它。它将jQuery传递给它（作为$）参数。

return $.extend($.fn, {});

$.fn是.$.prototype（或jQuery.prototype）的别名。 $.extend将多个对象合并到第一个对象中，然后返回第一个对象。不确定为什么return存在，它什么都不做。

$.fn是您添加插件的方式。此代码添加了一个名为link的插件。它被称为：

$('.element').link($ele);

return $(this).find(":input").each(function () {
    var el, name;
    el = $(this);
    name = el.attr("name");
    o.bind("change:" + name, function () {
        // do stuff
    });
    return $(this).bind("change", function () {
        // do stuff
    });
});

这是您执行$('.element').link($ele);时运行的实际插件。

return $(this).find(":input").each(function(){});

return用于实现可链接性。因此，您可以在<input>元素上运行其他方法。喜欢：$('.element').link($ele).val('test');。

这个插件绑定了一些事件，这就是o.bind所做的事情。仅当// do stuff元素（以及作为<input>传入的元素）发生更改时，$ele才会运行。

return $(this).bind("change", function(){});

这种回报毫无用处。这是从.each返回的，return false;没有做任何事情（break;就像true，但这总是返回o.bind("change:" + name, function(){});。）

注意：此代码中实际存在语法错误：

change之后的冒号（.）应为句点（o.bind("change:" + name, function(){});）。这是为了创建"namespaced events"。

注意2：此代码可能无法达到您的目的。

<input>

每行每个 {{1}}元素运行一行，从而绑定多个事件。这可能是也可能不是预期的。

Answer 2

$是一个变量。它是jQuery的短变量或别名。它只是对jQuery对象的引用，或者换句话说：

var jQuery = { ... //All the jQuery code };
var $ = jQuery; //Where jQuery is a variable that contains the jQuery object.

因此，了解一下，查看$.fn您正在查看jQuery对象的fn属性。这是另一个目标。

$.extend(...)是jQuery的一种方法，它将所有参数组合成一个对象。

因此，您正在使用$.fn对象，并将其与上述代码中第二个参数的对象相结合：

{
    link: function(o) {
      return $(this).find(":input").each(function() {
        var el, name;
        el = $(this);
        name = el.attr("name");
        o.bind("change:" + name, function() {
          // do stuff
        });
        return $(this).bind("change", function() {
          // do stuff
        });
      });
    }
}

然后你将返回那个新的组合对象。

您的整个代码包含在所谓的闭包中，或者在这种情况下，是一个自动执行的函数。那是因为你已经定义了一个匿名函数，并告诉它立即执行该函数。

这是一个匿名函数：

var anonFunction = function() { alert("hi"); };

现在，如果你这样做：

anonFunction();

您将执行该功能并看到“hi”警告。

一个自执行的匿名函数接受它，并通过将自己包装在括号中来调用自身：

(function() { alert("hi"); })(); //Replace everything between the first set of `()` with `anonFunction` and you have the same thing as the last code example.

Answer 3

以下是.extend（）的jQuery API：

$.extend() or jQuery.extend()

代码按照列出的顺序执行。
你可能想要做的是console.log(this);，它应该导致整个这个对象的转储。
// do stuff实际上是将更改事件绑定到元素的名称。

为什么不尝试将脚本分解为更小的部分并检查它们各自在各自的循环结构之外的作用。最好的学习方法就是玩弄它！

Answer 4

这个答案只谈到“何时”运行代码。请参阅其他答案，了解它的作用或原因，等等。

(function($) {
  // RUN WHEN the IIFE (Immediate Invoked Function Expression) is invoked
  return $.extend($.fn, {
    link: function(o) {
      // RUN WHEN plugin used - i.e. elm.link()
      return $(this).find(":input").each(function() {
        // RUN WHEN plugin used. Even though this is also a
        // callback, `each` will evaluate the callback
        // supplied synchronously.
        var el, name;
        el = $(this);
        name = el.attr("name");
        o.bind("change:" + name, function() {
          // RUN WHEN specific event later
        });
        return $(this).bind("change", function() {
          // RUN WHEN specific event later
        });
      });
    }
  });
})(jQuery); // INVOKES the IIFE

有人可以通过这个JavaScript来引导我吗？

4 个答案: