了解bootstrap.js变量声明

时间:2015-03-26 18:00:27

标签: javascript

我只是在看bootstrap modal.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),则会抛出错误。为什么?

2 个答案:

答案 0 :(得分:2)

这不是一个完整的陈述:

this.$backdrop = 

这是一个语法错误。你不能只留下悬空=,在任务的右侧没有任何内容。

你的第二个例子起作用的原因:

this.$backdrop = 
this.scrollbarWidth = 0

是因为那不再是悬空=。现在,你已经写了这个:

this.$backdrop = this.scrollbarWidth = 0

完全有效。 a = b = 0b = 0; a = 0;相同。

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

插入分号的规则实际上非常简单,当它引入语法错误时,JavaScript永远不会添加一个(具体来说,JavaScript会查看一行是否以二元运算符结尾以及以下行是否为一个有效的操作数)。所以,你的工作示例,这两行被解析为一个表达式。

如果您的示例有缺陷,则无法插入分号来保存:

    // ...
    this.$backdrop = 
}

有或没有分号,这将是语法错误。

答案 1 :(得分:1)

请注意,在您的代码中,您没有;行终止。这是有道理的,不会被推荐。

说,这个:

var Modal = function(element,options){     this.options =选项     这个。$ body = $(document.body)     这个。$ element = $(元素)     this.isShown = null     this.scrollbarWidth = 0     这个。$ backdrop =   }

有效的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

这是有效的。

始终使用;行终止来避免错误和误解,这是一种常见的最佳做法。


2ND问题

body是未定义的变量,因此$(body)会抛出错误。

bodydocument的属性,是全局范围内的变量。

因此,当您引用document.body时,您不会收到错误。

或者,您可以使用

使用jquery访问页面正文

$('body')