Bootstrap JS插件Alert源码分析

dreamans 发布于2019-08-21 17:48 / 966人阅读

摘要：调用当我们调用的时候，就会调用源码中函数，遍历所有的警告框，并关闭。解除警告框点击关闭事件，传入对应的事件命名空间即可

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、使用


    
    警告！请不要提交。


    
        ×
    
    错误！请进行一些更改。

3、调用
当我们调用

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

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

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

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

云服务器 GPU云服务器 alert.js插件 alert插件图片插件bootstrap Bootstrap按钮插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90034.html

推送近期三波关于Vue.js的资讯

摘要：原文来自集前端最近很火的框架资源定时更新，欢迎一下。推送自己整理近期三波关于的资讯这里就抛砖引玉了，望有更屌的资源送助攻。原文来自：集web前端最近很火的vue2框架资源；定时更新，欢迎Star一下。推送自己整理近期三波关于Vue.js的资讯；这里就抛砖引玉了，望有更屌的资源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...

Anonymous1 2019-08-22 11:10 评论0 收藏0
实现element-ui的按需引入，按需打包加载

摘要：简单说明原理使用实现按需引入打包。这里采用多入口配置，实现各个功能模块分别打包成一个文件，并使用将样式进行抽离后，按入口进行打包为对应的文件。只要在指定入口名为。这个相关配置已经发布了包。简单说明原理：使用babel-plugin-component实现按需引入、打包。将webpack配置成多入口，保证最终打包的目录结构符合babel-plugin-component插件的要求，实...

TesterHome 2019-08-23 10:41 评论0 收藏0
列表——表头自定义显示字段

摘要：今天我就来讲讲插件的使用，它是如何实现列表表头自定义显示字段的，我把我的经验分享出来，满足一下不懂英语的人，给你们搭个快车。需求分析实现列表表头自定义显示字段，自定义表头排序。序言 Yii2框架的扩展性能真的很不错，很多效果都可以通过插件去实现，你想不到的老外都帮你想好了，于是，人群中就流传了这么一句话：效果不会写不要紧，会用插件也不错。GitHub是一个庞大而且开放的资源库，平时有...

Yangyang 2019-07-01 12:15 评论0 收藏0
JavaWEB开发05_Bootstrap

摘要：类用于宽度，占据全部视口的容器。通过行在水平方向创建一组列。通过为列设置属性，从而创建列与列之间的间隔。上次课内容:什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库基本选择器: ID选择器: #ID名称类选择器: .类名元素选择器: 元素的名称通配符选择器: * 找出页面上...

_Dreams 2019-08-02 11:50 评论0 收藏0
JavaWEB开发05_Bootstrap

摘要：类用于宽度，占据全部视口的容器。通过行在水平方向创建一组列。通过为列设置属性，从而创建列与列之间的间隔。上次课内容:什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库基本选择器: ID选择器: #ID名称类选择器: .类名元素选择器: 元素的名称通配符选择器: * 找出页面上...

coolpail 2019-08-29 17:06 评论0 收藏0