理解bootstrap.js变量声明

understanding bootstrap.js variable declaration

本文关键字：声明 变量 js bootstrap 理解      更新时间：2023-09-26

我刚刚在bootstrap模式.js中查看代码，遇到了以下困难：

bootstrap Modal.js code : 
  var Modal = function (element, options) {
    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
 }

在我的代码中，我做了以下操作：

  var Modal = function(element , options){
    this.options = options
    this.$body = $(document.body)
    this.$element = $(element)
    this.isShown = null
    this.scrollbarWidth = 0
    this.$backdrop = 
  }

抛出了一个错误（请参阅最后一个变量），所以我将代码更改为：

  var Modal = function(element , options){
    this.options = options
    this.$body = $(document.body)
    this.$element = $(element)
    this.isShown = null
    this.$backdrop = 
    this.scrollbarWidth = 0
  }

一切都很好，为什么会出现错误？我在控制台中得到一个SyntaxError。

我的部分问题：看看this.$body是如何在插件中定义的，它的定义如下：

    this.$body = $(document.body)

现在，如果我尝试执行this.$body = $(body)，就会抛出一个错误。为什么？

这不是一个完整的声明：

this.$backdrop =

这是一个语法错误。不能只在那里留下一个悬空的=，而在赋值的右侧什么都没有。

第二个例子有效的原因：

this.$backdrop = 
this.scrollbarWidth = 0

是因为这不再是一个悬而未决的=。现在，你已经写了这个：

this.$backdrop = this.scrollbarWidth = 0

这是完全有效的。CCD_ 5与CCD_。

JavaScript使用分号来分隔语句，而不是换行符。但是，当您省略分号时，自动分号插入（ASI）会接管它，并将分号放在需要用来分隔语句的位置。

分号插入位置的规则实际上是非常直接的，当JavaScript会引入语法错误时，它永远不会添加分号（特别是，JavaScript会查看一行是否以二进制运算符结尾，以及下一行是否是有效的操作数）。因此，在您的工作示例中，这两行被解析为单个表达式。

在您的坏例子的情况下，没有办法插入分号来保存：

    // ...
    this.$backdrop = 
}

无论是否使用分号，都将是语法错误。

请注意，在您的代码中没有;行终止。这是有效的，尽管不值得考虑。

这么说，这个：

var Modal=函数（元素，选项）{this.options=选项这个$body=$（document.body）这个$element=$（元素）this.isShown=空this.crollbarWidth=0这个$背景=}

不是有效的javascript，因为您没有向this.$backdrop 分配任何内容

而这个：

var Modal = function(element , options){
    this.options = options
    this.$body = $(document.body)
    this.$element = $(element)
    this.isShown = null
    this.$backdrop = 
    this.scrollbarWidth = 0
  }

是有效的，因为js解释器将最后一行解析为

this.$backdrop = this.scrollbarWidth = 0

这是有效的。

通常的最佳做法是始终使用;线路终端，以避免类似的错误和误解。

第二个问题

body是一个未定义的变量，因此$(body)抛出一个错误。

CCD_ 13是CCD_ 14的一个性质。

因此，当您引用document.body时，不会出现错误。

或者，您可以使用使用jquery访问页面主体

$('body')

相关文章：