为我解释一下 bootstrap-alert.js？答案

【问题标题】：explain the bootstrap-alert.js for me?为我解释一下 bootstrap-alert.js？
【发布时间】：2012-03-12 07:14:32
【问题描述】：

我正在使用引导程序，我查看了它的 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

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

首先，我不是 jQuery 插件方面的专家，而且编码风格恕我直言，不太可读。另外，我不确定我是否理解您的确切要求，但我会尽力回答。

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

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

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

最后一部分（“Alert Data-API”）将点击事件分配给关闭链接，这会触发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 的“hash”部分的语法与 CSS id 选择器相同，因此可以用作选择器。 IE7部分是因为即使属性只包含hash部分，浏览器还是会返回完整的URL。

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

是的，这可以写成

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

我不知道他们为什么选择这种语法。恕我直言，这是不必要的神秘，因此无法阅读。

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

【讨论】：

谢谢~你能解释一下if (!selector) { selector = $this.attr('href') selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 }部分是做什么的吗？对我来说，它就像a="#"，所以选择器最终是#。还有$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())部分。它可以写成if 子句，对吗？使用 || 编写这样的代码是否更“惯用”？

【解决方案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

【讨论】：