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和原始代码的小提琴。

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。容器返回的内容与页面的远程版本相同。

但是那些 contentToReveal 和 initialContent 变量使我失望。我只是不了解该原型业务的语法和用法，因此无法弄清所需的其余jQuery代码。

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

非常感谢！布莱恩

Answer 1

这里的逗号是comma operator。它只对左边的表达式求值，然后对右边的表达式求值，返回右手表达式的结果。

那么此(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函数。

任何想法（0，_jquery [“ default”]）对jQuery选择器或函数意味着什么？

1 个答案: