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）或元素的父元素作为要关闭的警报。

Answer 2

我遇到了同样的问题，我设置了一个样本来玩我把它移到了GitHub：https://github.com/MikeMitterer/jQPlayGround/（带截图）

记录来源 - 如果你愿意，可以玩它。（表示使用开发人员工具调试代码）
JS-来源：https://github.com/MikeMitterer/jQPlayGround/blob/master/assets/js/sample.js

有关Google-Chrome-Developer-Tools的更多信息：http://code.google.com/chrome/devtools/docs/overview.html

为我解释bootstrap-alert.js？

2 个答案: