-1 
(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是我试图通过理解这段代码来弄清楚的）：

  1. 扩展 $.fn 并返回该值是什么意思？
  2. 这段代码运行的顺序是什么？如果我将 console.log 作为每个循环的第一行，我看不到它已执行，但如果我将它放在“//do stuff”部分中，我会看到它。
  3. 如果我在每个语句中并查看 $(this).find(":input") 的值，这会给我当前循环的元素的值吗？
  4. 我试图将 ":input" 更改为 "p" 但我仍在输入元素上输入 "//do stuff" 块。如果我将选择器更改为添加 .filter 或 .not，当我认为我不应该这样做时，我仍然会在输入“//do stuff”块时中断 - 这是基于所有内容执行的顺序的预期结果在？如果元素有某个类，我只想“//做东西”怎么办？
4

4 回答 4

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(){});

这个回报是没有用的。这是从 the 返回的.each，它什么都不做（return false;就像 a break;，但这总是返回true）。

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

o.bind("change:" + name, function(){});

后面的冒号 ( :)change应该是句点 ( .)。这是为了创建“命名空间事件”。

注意 2：此代码可能不会执行您想要的操作。

o.bind("change:" + name, function(){});

此行每个 <input>元素运行一次，从而绑定多个事件。这可能是也可能不是预期的。

于 2013-07-01T21:17:13.810 回答
0

$是一个变量。它是一个短变量或别名，用于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();

您将执行该功能并看到“嗨”警报。

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

(function() { alert("hi"); })(); //Replace everything between the first set of `()` with `anonFunction` and you have the same thing as the last code example.
于 2013-07-01T21:05:47.913 回答
0

这是 .extend() 的 jQuery API：

$.extend() 或 jQuery.extend()

  1. 代码按列出的顺序执行。
  2. 您可能想要在这里做的是console.log(this);，它应该导致整个this对象的转储。
  3. // do stuff实际上是将 change 事件绑定到元素的name。

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

于 2013-07-01T21:07:14.320 回答
0

这个答案只谈论代码运行的“时间”。请参阅其他答案以了解它的作用或工作原理等。

(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
于 2013-07-01T21:13:01.933 回答