当前位置：首页 > news >正文

Bootstrap JS插件Alert源码分析

news 来源：原创 2024/4/20 22:51:24

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、调用
当我们调用