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')