bootstrap-modal 學習筆記源碼分析

時間 2019-11-18

標籤 bootstrap modal 學習筆記源碼分析欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包,怎麼用直接官網 http://twitter.github.io/bootstrap/javascript

我博客的定位就是把這些年看過的源碼給慢慢的總結出來,才疏學淺,不到位的見諒~css

css部分呢Bootstrap由動態CSS語言Less寫成，在不少方面相似CSS框架Blueprint
Bootstrap自帶了13個jQuery插件，jquery這個東東，也是個版本帝，如今都10.1了…
一直作移動app,都是用的本身的框架或者zepto,jquery就沒正兒八經的用過,源碼就看過1.42的後來改動太大了,具體慢慢分析看看源碼吧

引入html

git

   1:  <!-- Button to trigger modal -->

   2:  <a href="#myModal" role="button" class="btn" data-toggle="modal">查看演示案例</a>

3:

   4:  <!-- Modal -->

   5:  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

   6:      <div class="modal-header">

   7:          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

   8:          <h3 id="myModalLabel">Modal header</h3>

   9:      </div>

  10:      <div class="modal-body">

  11:          <p>One fine body…</p>

  12:      </div>

  13:      <div class="modal-footer">

  14:          <button class="btn" data-dismiss="modal" aria-hidden="true">關閉</button>

  15:          <button class="btn btn-primary">Save changes</button>

  16:      </div>

  17:  </div>

從所周知，javascript 採用事件驅動(event-driven)。它是在用形界面的環境下，使得一切輸入變化簡單化。一般鼠標或熱鍵的動做咱們稱之爲事件（Event），而由鼠標或熱鍵引起的一連串程序的動做，稱之爲事件驅動（Event Driver）。而對事件進行處理程序或函數，咱們稱之爲事件處理程序（Event Handler）bootstrap

Bootstrap是13個jquery插件，天然事件也是基於jquery處理的數組

咱們先看看Bootstrap插件源碼中經常使用的綁定機制

on方法

jQuery1.7開始，jQuery引入了全新的事件綁定機制，on()和off()兩個函數統一處理事件綁定，由於在此以前有bind(), live(), delegate()等方法來處理事件綁定，jQuery從性能優化以及方式統一方面考慮決定推出新的函數來統一事件綁定方法而且替換掉之前的方法，老版本還有live() 如今好像被廢棄掉了，至於那個版本去掉的，我就沒注意了

簡單的說下區別：

bind 是一對一的
live 是指默認綁定到document,經過冒泡過濾
delegate 則是直接綁定指定的content,而後經過冒泡過濾

呵呵考慮下 $('a').live() == $(document).delegate('a') ?

live廢棄的緣由,估計也是效率,而後不夠靈活吧,尤爲要提出來zepto的移動事件默認就綁定到document上,給項目帶來不便……

on的處理機制也很簡單,

看官方給的API的一個demo

   1:  <p>Click me!</p>

   2:  <span></span>

3:

   4:  <script>

   5:      var count = 0;

   6:      $("body").on("click", "p", function(){

   7:        $(this).after("<p>Another paragraph! "+(++count)+"</p>");

   8:      });

   9:  </script>

給body綁定一個點擊事件, p元素能夠響應，綁定事件的元素跟響應事件的元素其實不是同一個dom

<!DOCTYPE html><script type="text/javascript" src="http://code.jquery.com/jquery-1.7rc2.js" data-mce-src="http://code.jquery.com/jquery-1.7rc2.js"></script><p>Click me!</p><script type="text/javascript"> var count = 0; $("body").on("click", "p", function(){ $(this).after("<p>Another paragraph! "+(++count)+"</p>"); }); </script>

將click事件綁定在body對象上，頁面上任何元素髮生的click事件都冒泡到document對象上獲得處理,發現捕獲到p元素就執行了代碼了

on最終仍是用 jQuery.event.add( this, types, fn, data, selector ); 爲元素elem添加類型types的句柄handler，事實上全部的事件綁定最後都經過jQuery.event.add來實現。其執行過程大體以下：

先調用jQuery._data從$.cache中取出已有的事件緩存若是是第一次在DOM元素上綁定該類型事件句柄，在DOM元素上綁定jQuery.event.handle，做爲統一的事件響應入口
將封裝後的事件句柄放入緩存中
傳入的事件句柄，會被封裝到對象handleObj的handle屬性上，此外handleObj還會填充guid、type、namespace、data屬性；DOM事件句柄elemData.handle指向jQuery.event.handle，即jQuery在DOM元素上綁定事件時老是綁定一樣的DOM事件句柄jQuery.event.handle。
事件句柄在緩存$.cache中的數據結構以下，事件類型和事件句柄都存儲在屬性events中，屬性handle存放的執行這些事件句柄的DOM事件句柄

來看正文：

bootstrap-modal.js中 240行

   1:    $target

   2:          .modal(option)

   3:          .one('hide', function() {

   4:          $this.focus()

   5:        })

就是具體的執行調用了

Modal是一個很標準的js類的寫法

經過$.fn.modal 擴展到了jquery的原型上了,返回this引用從而實現鏈式了

jquery是數組形式，因此擴展的時候須要 this.each

看看Modal提供的API

屬性：

backdrop ：包括一個模態的背景元素

keyboard：按退出鍵關掉模態對話框

show: 是否初始化就顯示模態

remote：若是是遠程地址,用jquery加載內容注入

方法

.modal(options)

讓你指定的內容變成一個模態對話框。接受一個可選的參數object.

   1:  $('#myModal').modal({  keyboard: false})

.modal('toggle')

手動打開或隱藏一個模態對話框。

   1:  $('#myModal').modal('toggle')

.modal('show')

手動打開一個模態對話框。

   1:  $('#myModal').modal('show')

.modal('hide')

手動隱藏一個模態對話框。

   1:  $('#myModal').modal('hide')

   1:    $.fn.modal = function(option) {

   2:      return this.each(function() {

   3:        var $this = $(this),

   4:          data = $this.data('modal'),

   5:          options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)

   6:          if (!data) $this.data('modal', (data = new Modal(this, options)))

   7:          if (typeof option == 'string') data[option]()

   8:          else if (options.show) data.show()

   9:      })

  10:    }

構建的代碼被包裝過

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

bootstrap-modal 學習筆記 源碼分析

on方法

屬性：

方法

bootstrap-modal 學習筆記源碼分析