Bootstrap JS插件Alert源碼分析

dreamans 發布于2019-08-21 17:48 / 829人閱讀

摘要：調用當我們調用的時候，就會調用源碼中函數，遍歷所有的警告框，并關閉。解除警告框點擊關閉事件，傳入對應的事件命名空間即可

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"http://版本
  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按鈕插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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