Bootstrap JS插件Alert源码分析

一、先附上alert的源代码
将Alert放在自执行函数中，避免变量污染

/* ====================================================================
 * Bootstrap: alert.js v3.3.7
 * http://getbootstrap.com/javascript/#alerts
 * ====================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */
+function ($) {
  'use strict'; //使用严格模式 执行js代码

  var dismiss = '[data-dismiss="alert"]' //alert警告框事件选择器
  var Alert   = function (el) {  //alert警告框构造函数
    $(el).on('click', dismiss, this.close)//选择器绑定点击关闭alert警告框的事件
  }

  Alert.VERSION = '3.3.7'//版本
  Alert.TRANSITION_DURATION = 150//过渡时间  为了让警告框在关闭时表现出动画效果

  Alert.prototype.close = function (e) {//在alert原型上添加close方法
    var $this    = $(this)//当前对象包装成jquery对象
    var selector = $this.attr('data-target') //获取jquery对象的date-target属性值

    if (!selector) {//若是没有获取到
      selector = $this.attr('href')//获取href属性值
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }

    var $parent = $(selector === '#' ? [] : selector)//若是selector是#则返回空数组，返回自身

    if (e) e.preventDefault()//取消事件的默认动做 a标签的连接不会打开

    if (!$parent.length) {
      $parent = $this.closest('.alert')//找到祖先中类名为alert的元素
    }

    $parent.trigger(e = $.Event('close.bs.alert'))//触发自定义的close.bs.alert事件 
    //并将e从新复制

    if (e.isDefaultPrevented()) return //e被从新赋值为jquery事件对象 e.isDefaultPrevented()值为false  不会走return语句

    $parent.removeClass('in')//删除具备动画效果的 类 

    function removeElement() {
      // detach from parent, fire event then clean up data
      //detach删除匹配元素，可是不从jquery对象上删除
      //remove删除元素，元素对应的事件，数据，所有移除
      //元素动画效果结束后触发closed.bs.alert事件，并移除
      $parent.detach().trigger('closed.bs.alert').remove()
    }
    //探测浏览器是否支持transition，以及祖先元素是否包含fade类，若是都支持，
    //在关闭alert警告框时，会有动画效果，若是不支持则直接删除

    $.support.transition && $parent.hasClass('fade') ?
      $parent
        .one('bsTransitionEnd', removeElement)
        .emulateTransitionEnd(Alert.TRANSITION_DURATION) :
      removeElement()
  }
  //对外暴露的函数
  function Plugin(option) {
    return this.each(function () {
      var $this = $(this)
      //获取元素上设置的数据
      var data  = $this.data('bs.alert')
    //若是没有对应的设置数据，则从新设置
      if (!data) $this.data('bs.alert', (data = new Alert(this)))
      //判断传入的option是否为String类型，是则调用Alert实例的对应方法
      if (typeof option == 'string') data[option].call($this)
    })
  } 
 //保存一份alert引用
  var old = $.fn.alert
 //jquery实例上的alert方法，当调用该方法是遍历全部的选中的元素，设置对应的data，并调用其原型的close方法，
  $.fn.alert             = Plugin
  $.fn.alert.Constructor = Alert

  //当alert方法冲突时，调用次方法避免冲突
  $.fn.alert.noConflict = function () {
    $.fn.alert = old
    return this
  }
  //在document上绑定事件 ,经过jquery的off方法，能够解除该事件
  $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
}(jQuery);

二、使用

<div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">
        &times;
    </button>
    警告！请不要提交。
</div>
<div class="alert alert-danger">
    <a href="#" class="close" data-dismiss="alert">
        &times;
    </a>
    错误！请进行一些更改。
</div>

三、调用
当咱们调用

$(".alert").alert('close')

的时候，就会调用源码中Plugin函数，遍历全部的警告框，并关闭。

四、解除警告框点击关闭事件，传入对应的事件命名空间（namespace）便可

$(document).off('.bs.alert.data-api')