Bootstrap深入理解(三)

·  阅读 126
Bootstrap深入理解(三)

这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战

Bootstrap中JavaScript插件架构

1, 前言

Bootstrap所有的插件在开发的时候都遵循了同样的规则,同时开发人员在使用的时候也遵循类似的规则,这些规则奠定了Bootstrap插件开发的基础,也为我们自定义插件提供了规范和依据。这些规则可以归纳为以下3种:

  • HTML布局规则: 基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性等

  • JavaScript实现步骤: 所有的插件都遵循jQuery插件开发的标准步骤,所有的事件都保持了统一标准

  • 插件调用方法:所有插件的使用方式都非常类似,可以是HTML声明式,也可以是调用式(JavaScript代码),并且支持多种回调和可选参数。

2, HTML布局规划

默认情况下,所有的插件都可以通过设置特定的HTML代码和相应的属性(或自定义属性)来实现。也就是说,在网页加载的时候,JavaScript代码会自动检测这些标记,并自动绑定相应的事件,而无需再添加额外的JavaScript代码。示例如下:

<div class="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
<strong>警告!</strong> 你输入的项目不合法!
</div>
复制代码

同理,单击的button按钮添加了data-toggle="dropdown"属性,在单击按钮的时候,默认隐藏的下拉菜单就会显示出来。

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-  toggle="dropdown"> 
   我的书籍<span class="caret"></span>
</button>
<ul class="dropdown-menu">
   <li>
       <a href="#">JavaScript编程精解</a>
   </li> 
   <li>
       <a href="#">JavaScript设计模式</a>
   </li> 
   <li>
      <a href="#">JavaScript启示录</a>
    </li> 
   <li class="divider">
   </li>
 <li>
    <a href="#">深入理解Bootstrap3</a>
  </li> 
</ul>
</div>
复制代码

注意:

JavaScript默认先检测data-target属性,如果没有,再检测href属性,如果还没有,则默认为父元素。另外,其他所有的JavaScript插件也都遵循同样的检测规则。

3, JavaScript实现步骤

Bootstrap里提供的所有JavaScript插件都遵守了统一的实现步骤,好处自然就不用多说了,除了维护方便以外,学习和自定义其他插件也都很方便。要做到统一,需要有5个步骤

image.png

  • 步骤一:定义一个立即调用的函数声明

  • 步骤二:定义该插件的核心代码,也就是在触发特定行为(通常是单击行为)后要进行处理的代码

  • 步骤三: 在jQuery上定义插件,以便通过jQuery.插件名称 的方式,也能够使用该插件,也就是在触发特定行为(通常是单 击行为)后要进行处理的通用代码。最后在这里再调用插件类或 原型方法

  • 步骤四: 防冲突处理,目的是让Bootstrap插件和其他UI库的同名插件共存Bootstrap所有的插件都支持防冲突(noConflict)功能。

  • 步骤五: 在一切都就绪之后,绑定默认的触发事件。由于已经 为jQuery提供了默认的$.fn.alert扩展插件功能,已经可以通过手 工编写JavaScript代码来触发事件了。这里的第五步主要是为声明 式的HTML触发事件,即:在HTML文档里已经按照布局规则声明 了相关的自定义属性(比如data-dismiss="alert"),然后通过这 里的代码初始化默认的单击事件行为(或其他相关插件需要用到 的行为)

4, 通用技术

首先,不同插件的JS代码都是单独放在一个JS文件中的,开发人员在使用的时候可以一次性编译到Bootstrap.js,也可以单独使用某一个或者多个JS插件文件。唯一需要注意的是:有些JS插件依赖于其他JS插件,所以不要遗漏了依赖引用。

Bootstrap所有的JavaScript插件都可以通过配置使用,即通过特定的HTML设置,而不需要任何JavaScript再次触发。但如果需要启用手动触发事件的行为,可以禁用默认的行为,禁用方法非常简单,只需要将body元素上的命名空间为data-api下的全部事件禁用即可.

$(document).off('.data-api');
复制代码

如果想禁用特定插件的默认行为,只需要禁用该插件所在命名空间下的事件即可。

代码如下所示:

$(document).off('.alert.data-api'); 
/* 禁用alert插件的所有默认行为*/
复制代码

注意:

off语法是jQuery提供的语法功能,用户在使用on进行绑定事件的时候,可以加命名空间,比如$().on('click.alert.data-api'),这样在卸载事件的时候,如果只想卸载该元素的该特定事件,可以使用off('click.alert.data-api')。如果不这样,仅仅使用off('click'),这样该元素上的所有click事件都将被卸载(导致该元素的其他click事件失效)。同理,如果执off('.data-api')代码,则所有在data-api命名空间下的事件都会被卸载禁用,不管是该选择器内部的哪个元素、哪种事件

5, 禁用响应式布局

Bootstrap是一个移动先行的框架,默认情况下,针对不同的屏幕尺寸,会自动地调整页面,使其在不同尺寸的屏幕上都表现得很好。但是,如果不想使用这种特性,也可以禁用它。下面列出了禁用响应式布局的步骤:

1)删除名称为viewpot的meta元素,例如:<meta name="viewport"....../>。

2)为.container设置一个固定的宽度值,从而覆盖框架的默 认width设置,例如width: 970px!important;
并且要确保这些设 置全部放在默认的Bootstrap CSS后面。

3)如果使用了导航条组件,还需要移除所有的折叠行为和展 开行为。

4)对于栅格布局,额外增加.col-xs-*样式,或替换.col-md-* 和.col-lg-*样式。
不要太担心,超小屏幕设备的栅格系统样式可以 适应于所有分辨率的环境。
复制代码
分类:
前端
标签:
分类:
前端
标签: