为我解释bootstrap-alert.js？

Question

我正在使用bootstrap,我查看了它的jQuery插件bootstrap-alert.js,我无法得到它.代码发布如下:

!function( $ ){

  "use strict"

 /* ALERT CLASS DEFINITION
  * ====================== */

  var dismiss = '[data-dismiss="alert"]'
    , Alert = function ( el ) {
        $(el).on('click', dismiss, this.close)
      }

  Alert.prototype = {

    constructor: Alert

  , close: function ( e ) {
      var $this = $(this)
        , selector = $this.attr('data-target')
        , $parent

      if (!selector) {
        selector = $this.attr('href')
        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
      }

      $parent = $(selector)
      $parent.trigger('close')

      e && e.preventDefault()

      $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())

      $parent.removeClass('in')

      function removeElement() {
        $parent.remove()
        $parent.trigger('closed')
      }

      $.support.transition && $parent.hasClass('fade') ?
        $parent.on($.support.transition.end, removeElement) :
        removeElement()
    }

  }


 /* ALERT PLUGIN DEFINITION
  * ======================= */

  $.fn.alert = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('alert')
      if (!data) $this.data('alert', (data = new Alert(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  $.fn.alert.Constructor = Alert


 /* ALERT DATA-API
  * ============== */

  $(function () {
    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
  })

}( window.jQuery )

这是所有插件中最简单的一个.我不明白的是

1. selector什么data-target是？无处可寻......那么,怎么$this.attr('data-target') 办？

2.这个插件如何作为一个整体工作？正如文件所说,它有三个部分,它是如何相互作用的？

编辑:还有一些我不太了解的东西.这部分:

functionremoveElement() { $parent.remove() $parent.trigger('closed') }

首先删除元素,然后以某种方式调用一个根本没有定义的函数,使用一些已被删除的对象.它在closed哪里？谢谢,G

Answer 1

首先,我不是jQuery插件的专家,加上编码风格是恕我直言不太可读.此外,我不确定我是否理解你究竟在问什么,但我会尽力回答.

data-target似乎是关闭按钮/链接上的未记录属性.它允许您选择一个作为警报的元素,而不是要关闭的clsoe按钮/链接的父元素.

一个例子:通常你会为这样的警报编写HTML:

<div class="alert">
  <a class="close" data-dismiss="alert">&times;</a>
  Some message
</div>

最后一部分("Alert Data-API")将click事件分配给close链接,该事件触发该Alert.prototype.close函数(实际上不启动Alert该类的实例).

在该函数中,首先$this.attr('data-target')用于检查关闭按钮是否具有data-target属性.如果不是,那么它在href属性中使用可能的URL哈希段作为ID选择器.在这个例子中,没有,所以在行中

$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())

选择关闭按钮的父级作为要关闭的警报.

如果您希望关闭按钮位于警报之外,则可以使用data-target或href属性:

<div id="my-alert" class="alert">
  Some message
</div>

<!-- ... -->

<a class="close" data-dismiss="alert" href="#my-alert">Close "my-alert"</a>

<!-- ... -->

<a class="close" data-dismiss="alert" data-target=".alert">Close all "alerts" with the class "alert"</a>

关于整个功能:

尽管很短,但遗憾的是很复杂.我会试着简单解释一下:

如上所述:最后一部分在具有该属性定义的任何警报关闭按钮上放置一个单击事件处理程序data-dismiss="alert".它使用该Alert.prototype.close函数作为事件处理程序,而不实际启动Alert该类的实例.

第二部分("插件定义")定义了$().alert()jQuery插件.它没有做太多,只是创建一个Alert实例,如果option插件的参数()是"关闭",它将调用该close方法.在它上面创建实例是有点无意义的.唯一的原因是匹配其他插件的模式.

第一部分定义了类Alert,它只作为一个任务:在点击另一个元素("关闭按钮")时关闭(删除)一个元​​素("警告").

你必须要了解的一件事是."警报"并不特别.它们可以是任何类型的HTML元素,没有特殊要求.您通过调用$().alert()它来明确地"声明"一个元素作为警报,但这不是必需的.您可以$().alert("close")在想要使用脚本关闭元素时直接调用它,或者定义一个关闭按钮data-dismiss="alert",然后关闭它指向使用的任何元素data-target,它href或作为警报的子元素.

编辑:(抱歉,没有早点到处走走)

  if (!selector) {
    selector = $this.attr('href')
    selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
  }

如果data-target未设置属性(或为空),则脚本会尝试将该href属性用作选择器.URL的"哈希"部分的语法与CSS id选择器相同,因此它可以用作选择器.IE7部分是因为即使属性仅包含散列部分,浏览器仍然返回完整的URL.

$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())

是的,这可以写成

if (!$parent.length) {
  // ...
}

我不知道为什么他们选择这种语法.恕我直言,这是不必要的神秘,因此不可读.

如果你有href="#",那么这一行将导致它被忽略,因为$("#")不会返回任何结果($parent.length将为0)并选择自身(如果它有类alert)或元素的父元素作为警报关闭.