jquery – 为我解释bootstrap-alert.js？

我正在使用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',Alert.prototype.close)
  })

}( window.jQuery )

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

1.什么是选择器？数据目标无处可寻……那么,$this.attr(‘data-target’)是做什么的？

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

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

functionremoveElement(){
            $parent.remove()
            $parent.trigger( ‘封闭’)
          }

首先你删除元素,然后以某种方式你调用一个完全没有定义的函数,使用一些已被删除的对象.哪里有关闭？
谢谢,G

解决方法

首先,我不是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’)来检查关闭按钮是否具有数据目标属性.如果没有,那么它在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实例,如果插件的参数(选项)是“关闭”,它将调用close方法.在它上面创建实例是有点无意义的.唯一的原因是匹配其他插件的模式.

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

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

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

06003

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

06001

是的,这可以写成

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

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

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

jquery – 为我解释bootstrap-alert.js？

解决方法

相关文章