bootstrap-modal 学习笔记 源码分析===

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

bootstrap-modal 学习笔记源码分析

•css部分呢Bootstrap由动态CSS语言Less写成,在很多方面类似CSS框架Blueprint

•Bootstrap自带了13个jQuery插件,jquery这个东东,也是个版本帝,现在都10.1了…

•一直做移动app,都是用的自己的框架或者zepto,jquery就没正儿八经的用过,源码就看过1.42的后来改动太大了,具体慢慢分析看看源码吧

引入

1:

2: 查看演示案例

3:

4:

5:

从所周知,javascript 采用事件驱动(event-driven)。它是在用形界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理程序或函数,我们称之为事件处理程序(Event Handler)

Bootstrap是13个jquery插件,自然事件也是基于jquery处理的

我们先看看Bootstrap插件源码中常用的绑定机制

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:

Click me!

2:

3:

4: