1、Bootstrap的作用域
2、Bootstrap的类定义
3、Bootstrap的插件定义
4、Bootstrap的事件代理
5、Bootstrap的对象数据缓存
6、Bootstrap的防冲突
7、作用域外如何使用Button类
8、Bootstrap的单元测试
Bootstrap的作用域
Bootstrap每个插件都定义在下面这段作用域代码中:
+function ($) { "use strict"; ... }(window.jQuery);请看《IIFE》和《严格模式》编译环境。
在插件的作用域之外,全局范围执行代码的第一行,检测了jQuery是否定义。在Grunt的concat任务中,合并所有插件时,检测代码添加在目标文件的banner说明后面。Grunt.js的相关代码:
jqueryCheck: 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }\n\n', concat: { options: { banner: '<%= banner %><%= jqueryCheck %>', stripBanners: false }, bootstrap: { src: [ 'js/transition.js', 'js/alert.js', 'js/button.js', 'js/carousel.js', 'js/collapse.js', 'js/dropdown.js', 'js/modal.js', 'js/tooltip.js', 'js/popover.js', 'js/scrollspy.js', 'js/tab.js', 'js/affix.js' ], dest: 'dist/js/<%= pkg.name %>.js' } }
Bootstrap的类定义
var Button = function (element, options) { this.$element = $(element) this.options = $.extend({}, Button.DEFAULTS, options) } Button.DEFAULTS = { loadingText: 'loading...' } Button.prototype.setState = function (state) { ... } Button.prototype.toggle = function () { ... }
Bootstrap采用这种类定义方式的好处,以及Javascript其他几种类定义的方式,请参照《Javascript面向对象编程(一):封装》 或者阅读《Javascript高级程序设计(第3版)》7.4章节。
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。在Button函数体内部定义的属性和方法可以看做是类的私有属性和方法, 为Button.prototype对象定义的属性和方法都可以看做是类的公共属性和方法。这个类封装了插件对象初始化所需的方法和属性。
Bootstrap的插件定义
请参看《jQuery插件开发快速入门》,注意两个this指向的是不同对象
$.fn.button = function (option) { return this.each(function () { var $this = $(this) ... }) }
Bootstrap的事件代理
Bootstrap Button插件定义最后一部分,事件绑定是这么写的
$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) { ... })
这段JavaScript代码将click委托事件监听器绑定在document元素上,并给click事件赋予命名空间click.bs.button.data-api,选择器匹配的是属性data-toggle的值为"button"开头的标签。
关于jQuery将事件绑定在document文档对象上的好处,就是js事件代理的优点,性能上做了一个测试比较。
关于jQuery命名空间的好处,请参看《jQuery .on() and .off() 命名空间》
Bootstrap的防止冲突
jQuery是全局对象,所以jQuery的插件定义$.fn.button并不受作用域限制。如果在别的插件中同样定义了button插件,后加载的button插件将会覆盖先加载的button插件,jsbin示例:
// Old button +function($){ $.fn.button = function() { alert('Old button') } }(window.jQuery) // Bootstrap button +function($){ $.fn.button = function() { alert('Bootstrap button') } }(window.jQuery) $('a').button() // alert('Bootstrap button')
相关推荐
主要为大家详细解析了Bootstrap模态窗口源码,基本每行都加了注释,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
深入理解Bootstrap-5
bootstrap的fileinput源码以及js文档、bootstrap的fileinput源码以及js文档
主要为大家详细解析了BootStrap的Tooltip插件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文通过源码给大家解析bootstrap进度条样式,分为条纹进度条,动态条纹进度条,层叠进度条和带Label的进度条,下面通过代码给大家简单介绍下,感兴趣的朋友一起看看吧
使用 thinkphp+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。 搭建教程: 1.整个主机 2.绑定解析域名 3.上传源码,解压 把解压出来的 nav.sql ...
主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
源码文件: tab.js 实现原理: 1、单击一个元素时,首先将原来高亮的元素取消 2、然后给被单击元素进行高亮 3、如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5、如果定义了动画,先执行动画,然后回...
响应式框架bootstrap框架教程,包括源码,课件,课后习题
Tomcat8.5.X原始解析 IDEA开发工具,JDK1.8,已解决控制台中文乱码问题,500异常。 注意事项 环境建设参考 主类:org.apache.catalina.startup.Bootstrap 参数配置 虚拟机选项: -Dcatalina.home = catalina-home -...
BJUI(jQuery)前端框架源码分享, 结合jq+bootstrap+divTab 涵盖1.2和1.3版本, 各种组件api使用方法(tip: 建议用火狐浏览器打开)
基于同一种数据结构基于不同的页面展示(对于不同的页面模板)或者同一区域展示不同数据结构的需求,欲实现页面表达复杂度和数据表达形式多样化的...该demo是基于Jquery和bootstrap库来实现特效、解析及加载等效果。
一、源码文件 _grid.scss:格子系统类文件 Mixins/_grid.scss:支持格子系统实现的mixin集合 Mixins/_grid-framework.scss:格子系统实现的核心mixin 二、支持的功能 1. 实现按百分比布局 2. 实现格子的定位 3. ...
主要介绍了Bootstrap Navbar Component实现响应式导航的相关资料,讲解了Bootstrap Navbar应用及源码解析,需要的朋友可以参考下
【源码】mysql版本_spring3.0 系统模块 1. 组织管理:角色管理,分角色组和成员,有组权限和成员权限。 2. 系统用户:对各个基本的组会员增删改查,单发、群发邮件短信,导入导出excel表格,批量删除 3. 会员管理:...
JSP基于SSM多媒体英语学习网站设计可升级Springboot毕业源码案例设计 前台框架: Bootstrap(一个HTML5响应式框架) 开发环境:myEclipse8.5以上或者Eclipse或者Idea + mysql数据库 后台框架: SSM(SpringMVC + ...