Bootstrap是Twitter推出的一個開源的用於前端開發的工具包,怎么用直接官網 http://twitter.github.io/bootstrap/
我博客的定位就是把這些年看過的源碼給慢慢的總結出來,才疏學淺,不到位的見諒~
- css部分呢Bootstrap由動態CSS語言Less寫成，在很多方面類似CSS框架Blueprint
- Bootstrap自帶了13個jQuery插件，jquery這個東東，也是個版本帝，現在都10.1了…
- 一直做移動app,都是用的自己的框架或者zepto,jquery就沒正兒八經的用過,源碼就看過1.42的后來改動太大了,具體慢慢分析看看源碼吧
引入
<script src="src/jquery.js"></script>
<script src="src/bootstrap-transition.js"></script>
<script src="src/bootstrap-modal.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
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是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
將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: }
構建的代碼被包裝過