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

<!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来实现。其执行过程大致如下：

  1. 先调用jQuery._data从$.cache中取出已有的事件缓存如果是第一次在DOM元素上绑定该类型事件句柄，在DOM元素上绑定jQuery.event.handle，作为统一的事件响应入口
  2. 将封装后的事件句柄放入缓存中
  3. 传入的事件句柄，会被封装到对象handleObj的handle属性上，此外handleObj还会填充guid、type、namespace、data属性；DOM事件句柄elemData.handle指向jQuery.event.handle，即jQuery在DOM元素上绑定事件时总是绑定同样的DOM事件句柄jQuery.event.handle。
  4. 事件句柄在缓存$.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 学习笔记 源码分析的更多相关文章

  1. DotNetty网络通信框架学习之源码分析

    DotNetty网络通信框架学习之源码分析 有关DotNetty框架,网上的详细资料不是很多,有不多的几个博友做了简单的介绍,也没有做深入的探究,我也根据源码中提供的demo做一下记录,方便后期查阅. ...

  2. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  3. 树莓派学习笔记—— 源码方式安装opencv

    0.前言     本文介绍怎样在树莓派中通过编译源码的方式安装opencv,并通过一个简单的样例说明怎样使用opencv.     很多其它内容请參考--[树莓派学习笔记--索引博文] 1.下载若干依 ...

  4. Vue2.x源码学习笔记-源码目录结构整理

    先从github上下载或者clone一个vue分支项目 https://github.com/vuejs/vue 查看下目录结果 先列出一些目录 Vue |— build 打包相关的配置文件,其中最重 ...

  5. 并发编程原理学习-reentrantlock源码分析

    ReentrantLock基本概念 ​ ReentrantLock是一个可重入锁,顾名思义,就是支持重进入的锁,它表示该锁能够支持一个线程对资源的重复加锁,并且在获取锁时支持选择公平模式或者非公平模式 ...

  6. Android FM模块学习之四源码分析（3）

    接着看FM模块的其他几个次要的类的源码.这样来看FM上层的东西不是太多. 请看android\vendor\qcom\opensource\fm\fmapp2\src\com\caf\fmradio\ ...

  7. Java基础系列--07_Object类的学习及源码分析

    Object: 超类 (1)Object是类层次结构的顶层类,是所有类的根类,超类.   所有的类都直接或者间接的继承自Object类.   所有对象(包括数组)都实现这个类的方法 (2)Object ...

  8. mybatis 学习四 源码分析 mybatis如何执行的一条sql

    总体三部分,创建sessionfactory,创建session,执行sql获取结果 1,创建sessionfactory      这里其实主要做的事情就是将xml的所有配置信息转换成一个Confi ...

  9. golang学习笔记----源码文件

    GO源码文件

随机推荐

  1. 使用VisualVM检测

    下载 https://visualvm.github.io/ 检测远程服务器 转自:http://blog.csdn.net/yangkangtq/article/details/52277794 授 ...

  2. MongoDB 由于目标计算机积极拒绝，无法连接 2014-07-25T11:00:48.634+0800 warning: Failed to connect to 127.0.0.1:27017, reason: errno:10061

    转载自:http://www.cnblogs.com/xiaoit/p/3867573.html 1:启动MongoDB 2014-07-25T11:00:48.634+0800 warning: F ...

  3. 一眼看懂深浅拷贝(clone)-C#

    这是使用的是序列化的方式实现深拷贝 [Serializable] class Person:ICloneable { /// <summary> /// 字符串在clone 中类似于值类型 ...

  4. ios 关于问题 no matching provisioning profiles found

    ios 关于问题 no matching provisioning profiles found

  5. Underscore-分析

    0.Ecmascript的版本重要时间点 Ecmascript262-3 1999年,ie5.5及以后完全支持,ff,chrome等全部支持Ecmascript262-4 因为跨越太大,废弃Ecmas ...

  6. cocoapods 命令

    1.使用CocoaPods a  新建一个项目,名字cocoapods

  7. Javascript判断两个日期是否相等

    大家一定遇到过这样的情况,有两个日期对象,然后需要判断他们是否相等. 例如: var date1 = new Date("2013-11-29"); var date2 = new ...

  8. ABP理论学习之发布说明

    返回总目录 查看更详细信息以及下载源代码请查看原文档 ABP v0.9.2.0 | [更新日期:2016/6/6 11:21:28 ] 解决方案转换成xproj/project.json格式. 添加了 ...

  9. Nodejs之MEAN栈开发（二）----视图与模型

    上一节做了对Express做了简单的介绍,提出了controller,介绍了路由.这一节将重点放到视图和模型上,完成几个静态页面并部署到heroku上. 导航 前端布局使用bootstrap,从官网下 ...

  10. MySQL InnoDB存储引擎

    200 ? "200px" : this.width)!important;} --> 介绍 本篇文章是对Innodb存储引擎的概念进行一个整体的概括,innodb存储引擎的 ...