复杂 data(） 附加到 HTML 元素

complex data() attachment to HTML element

本文关键字：HTML 元素 data 复杂      更新时间：2023-09-26

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

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

你也可以在github上找到这一行：第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。

我真的很感激任何帮助。

谢谢。

代码行分解如下：

if (!data)

如果data变量为 null 、 undefined 或空字符串，则此条件将命中。

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

这是 jQuerys data() 方法的设置器。

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的原因是因为它是对象的键，并且您正在显示值。

相关文章：