Bootstrap JS插件Alert源码分析

1、先附上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);

2、使用

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

3、调用
当我们调用

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

的时候,就会调用源码中Plugin函数,遍历所有的警告框,并关闭。

4、解除警告框点击关闭事件,传入对应的事件命名空间(namespace)即可

$(document).off('.bs.alert.data-api') 
    原文作者:cjf_580232abde0df
    原文地址: https://segmentfault.com/a/1190000012185280
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞