在jQuery选择器或函数中，(0, _jquery["default"])代表什么意思？

Question

我正在尝试在离线页面上使用一些jQuery。该网站的应用程序使用EmberJS，RequireJS和其他一些技术，但归根结底，我正在尝试用普通的jQuery替换这段难以理解的代码。

以下是一些HTML，应该对交互做出响应：
某个问题 某个答案

因此，它只是一个显示/隐藏的交互。

应用程序的代码如下：

define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function (exports, _jquery) {

  function RevealContent($el) {
    this.el = $el;

    this.interactionData = $el.find(".interaction_data");
    this.container = $el.find(".interaction_content");
  }

  RevealContent.prototype = {
    init: function init() {
      var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
      var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());

      this.container = this.container.parent().find('.RevealContent');

      this.container.append(initialContent);
      this.container.append(contentToReveal.hide());

      initialContent.click(function () {
        (0, _jquery["default"])(contentToReveal).slideToggle('slow');
      });

      // prevent any links within initialContent from navigating anywhere
      initialContent.find('a').click(function (e) {
        e.preventDefault();
      });
    }
  };

我已经开始尝试使用纯jQuery替换上面的代码，但是有些代码很难解码，例如(0, _jquery["default"])。

有没有人知道如何将上面的代码转换为纯jQuery，以便不需要外部依赖项，也不需要与应用程序进行通信？

这里有一个带有一些HTML和原始代码的jfiddle。

https://jsfiddle.net/0s6xdk9q/1/

以下是我迄今为止对重写所做的工作：

$(document).ready(function() {
    $(this).on('click', '.interaction_booted', function () {
    //console.log('made it here');


        interactionData = $(this).find(".interaction_data");
        this.container = $(this).find(".interaction_content");

        var contentToReveal = $('<div />', this.container).append($(interactionData.find('tdd')[1]).detach());
        var initialContent = $('<div class="pointer" />', this.container).append($(interactionData.find('tdd')[0]).detach());

        this.container = this.container.parent().find('.RevealContent');

        this.container.append(initialContent);
        this.container.append(contentToReveal.hide());

        initialContent.click(function () {
            $(contentToReveal).slideToggle('slow');
        });

    });


});

注意，我正在使用 而不是 ，因为Chrome会剥离没有父级的标签...我已经确认在我的本地页面中，interactionData和this.container返回的与远程版本的页面相同。

但是那些contentToReveal和initialContent变量让我感到困惑。我只是不理解语法和原型业务的使用，以便我可以找出所需的其余jQuery代码。

有人知道我需要做什么才能使它正常工作吗？

非常感谢！ Brian

- Brian

Answer 1

这里的逗号是逗号运算符。它仅评估左侧的表达式，然后是右侧的表达式，返回右侧表达式的结果。

那么这里的(0, ...)语法是做什么的呢？它存在于此处是为了从其父对象中剥离函数，使其不再是方法调用，本质上解除了该方法在上下文中的this绑定。请观察：

// ECMAScript 2015
var obj = {
  foo() {
    return this;
  }
}

console.log(obj.foo() === obj);
console.log((0, obj.foo)() === obj);

这是 Babel 和其他转译器使用的技巧，用于确保导入为裸函数的函数被作为函数调用，而不是作为从中导入它们的模块的方法。换句话说，

(0, _jquery["default"])(...)

等同于

$(...)

其中$是jQuery函数。

- p.s.w.g

---

今天我了解到一个新的旧特性，逗号运算符。以前从未知道逗号分隔符也有这个特性，真是太酷了。 - Tschallacka

有趣。我曾经认为可能是这样，然后重写了原始代码，用$代替(0, _jquery["default"])，但是使用原始代码 - var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach()); - 这意味着$正在寻找任何div，对吗？否则它怎么知道上下文？我在这里有一个jfiddle https://jsfiddle.net/0s6xdk9q/1/ ，但真的很想知道如何用纯jQuery编写代码。问候，布赖恩 - Brian

@Brian 不完全正确。$ 函数实际上是 DOM 工具的瑞士军刀。$("div") 将选择页面上所有 <div> 元素（它大致相当于 document.getElementsByTagName("div")），但 $("<div/>") 实际上会创建一个新的 <div> 元素，可以稍后插入，例如使用 append（它大致相当于 document.createElement("div")）。请参阅文档。 - p.s.w.g

哇，这么多细节！其中一个令人困惑的事情是这一行代码：$('<div />', this.container).append($(interactionData.find('tdd')[1]).detach()); 根据你所说，我猜这意味着添加了一个 div，但是当我查看页面 - 远程或本地版本 - 我没有看到任何创建的 div 元素。我看到的唯一 DOM 更改是包含内容以隐藏/显示的 div 的 display 属性。因此，弄清楚开发人员真正想要的东西是很痛苦的。 - Brian

@Brian 是的，很可能 this.container 是对另一个文档的引用，例如在 iframe 中或通过 window.open 创建的另一个窗口中。我也不清楚这段代码的意图，所以除了告诉你它是做什么的之外，我不确定我能为你提供更多的帮助。 - p.s.w.g