javascript - HTML 元素的复杂 data() 附件

Question

我只是浏览了一下 modal.js 中的代码，遇到了以下行，我遇到了困难，下面是我遇到困难的行:

if (!data) $this.data('bs.modal', (data = new Modal(this, options)))

你也可以在 github 上找到这一行:line 289 。

现在，显然，上面的行将 data() 附加到 HTML 元素，我的问题是我发现很难想象它是如何做到这一点的:

具体来说，我的问题是传递给 data() 方法的第一个参数，现在 Jquery 文档明确表示第一个参数是 key ，第二个参数是 value，这表示如果执行以下行:

if (!data) $this.data('bs.modal', (data = new Modal(this, options)))

HTML 元素上构造的数据会是什么样子？

bs.modal : {
       this.options             = options
    this.$body               = $(document.body)
    this.$element            = $(element)
    this.$dialog             = this.$element.find('.modal-dialog')
    this.$backdrop           = null
    this.isShown             = null
    this.originalBodyPad     = null
    this.scrollbarWidth      = 0
    this.ignoreBackdropClick = false
}

类似上面的东西吗？我真的很困惑最终结果会是什么样子，有人能真正澄清一下 bs.modal 作为第一个参数的用法吗？

我这样做是为了检查最终产品的样子:

  1    console.log($this.data('bs.modal'));
  2    if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
  3    console.log($this.data('bs.modal')); 

我得到以下结果:

line:1       undefined 
line:3       Object { options: Object, $body: Object, $element: Object, isShown: null, $backdrop: null, scrollbarWidth: 0 }

但我在任何地方都没有看到 bs.modal 。

我真的很感激任何帮助。

谢谢。

Answer 1

这行代码分解如下:

if (!data)

如果 data 变量为 null、undefined 或空字符串，则会满足此条件。

$this.data('bs.modal', ...)

这是 jQuery data() 方法的 setter。

data = new Modal(this, options)

这会将 data 变量设置为等于新的 Modal 对象。因为它位于 data() 变量的 setter 内部，所以它也设置 bs.modal 数据值。它相当于以下代码:

var x = a = 'foo';
console.log(x); // = 'foo'
console.log(a); // = 'foo'

您在最终示例的控制台输出中看不到 bs.modal 的原因是它是对象的键，而您正在显示该值。