前端

BootStrap4核心源码学习之JS部分

BootStrap4, front-end

Bootstrap 是全球最受欢迎的前端组件库，未读过不足以谈前端人生。

BootStrap4的核心源码，也就是我们在项目中常引用的bootstrap.min.css/bootstrap.min.js，
主要来自bootstrap/scss和bootstrap/js，本篇解读JS部分。

内容

js目录说明

通过目录，我们来了解js的放置规则和涉及哪些内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
bootstrap/js
├── dist/ // 通过babel打包将src中es6书写的各组件转es5
├── src/ // es6书写的各组件
│   ├── alert.js // 警告-组件
│   ├── buttons.js // 按钮-组件
│   ├── carousel.js // 滚屏-组件
│   ├── collapse.js // 折叠-组件
│   ├── dropdown.js // 下拉菜单-组件
│   ├── index.js // Jquery及版本引入检测
│   ├── modal.js // 模态框-组件
│   ├── popover.js // 弹出框-组件
│   ├── scrollspy.js // 滚动监听-组件
│   ├── tab.js // 导航（选项卡）-组件
│   ├── tooltip.js // 工具提示-组件
│   └── util.js // 完成过度效果后的处理
├── tests/ // 各组件对应的测试
└── .eslintrc.json // eslint配置文件

从目录看主要分为4部分：

  • dist文件夹：转换后的各组件文件；
  • src文件夹：es6书写的各组件js源码，其中index.js、util.js为公共特殊用途，将在精选组件详解章节将举例解读；
  • tests文件夹：根据组件书写的测试用例，将在单元测试章节细说；
  • .eslintrc.json：eslint配置文件

精选组件详解

本节将挑选模态框组件进行解读。
util.js:该模块使所有程序API方法异步执行，在过度效果开始后结束前回调，使得方法在过渡效果完成时执行；

1.引入Jquery$方法，Util的Util对象；

1
2
import $ from 'jquery'
import Util from './util'

2.申明Modal方法，定义常量、数据集属性-对外option、事件Events、class名称、选择器

1
2
3
4
5
6
7
8
9
10
11
12
const NAME\VERSION\DATA_KEY\EVENT_KEY...

const Default = {...
}
const DefaultType = {...
}
const Event = {...
}
const ClassName = {...
}
const Selector = {...
}

3.申明类Class，来构造对象实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Modal {
  // 构造实例使用的内部变量
  // getters
  // public：定义弹窗暴露给用户使用的方法
  toggle()方法
  show()方法
  hide()方法
  dispose()方法
  handleUpdate()方法
  // private：定义私有方法，private里的方法仅用于整个函数内部
  附加：弹窗溢出的私有方法，未来可能会从modal.js提出
  // static 静态函数
  _jQueryInterface：将方法以Jquery形式输出，也就是$(document).modal(‘{method}’)
  }

4.API使用：对外暴露的事件Events，用于Modal实用性的钩子：show、shown、hide、hidden

5.jQuery构造，命名空间冲突处理No conflict

1
2
3
4
5
6
7
8
$.fn[NAME]             = Modal._jQueryInterface
$.fn[NAME].Constructor = Modal
$.fn[NAME].noConflict  = function () {
  $.fn[NAME] = JQUERY_NO_CONFLICT
  return Modal._jQueryInterface
}

return Modal

单元测试

本节将了解bootstrap架构中如何对js进行测试。通过阅读README.md文件了解目录结构、怎么增加单元测试、编码规范

1
2
3
4
5
6
7
8
bootstrap/js/tests
├── unit/ // 各组件的单元测试
├── vendor/ // 单元测试相关的第三方代码
├── visual/ // 可视化测试：展现在真实浏览器中，需要人工测试
├── .eslintrc.json // eslint配置文件
├── index.html // 可视化的测试报告
├── karma.conf.js //karma配置
└── README.md

主要的测试框架是Qunit，同时涉及到karma(测试管理工具)、sourcelabs(浏览器环境云测试)，这样可以通过命令行测试，同时不用安装各个版本浏览器进行测试。

分享到