BSUI

BSUI 是一套由基本组件构成，包含基本交互逻辑，通过固化、沉淀、梳理以往项目前端经验，而编写的用于 B/S 软件的前端 UI 框架，主要用于 B/S 软件项目，用以减少前端重复工作量，提高开发效率。

定位

1. 适用于后台管理类B/S软件；
2. 包含HTML模板、CSS样式库、JS插件、第三方插件等；
3. 采用模块化开发，可自由组合，可拓展，可按需定制；
4. 有颜值、实用、高效。

浏览器兼容性

• 完美兼容支持HTML5规范的现代浏览器。
• IE最低支持到IE9（放弃IE8及以下版本IE浏览器）。

为什么要“重复造轮子”？

市面上有很多大而全的 UI 框架，热门的有：Bootstrap、Amaze UI、Element、EasyUI、jQuery UI 等。这些 UI 框架都很强大，也各自有显著的优点，能解决前端 UI 方面的许多问题，但对于实际的 B/S 项目来讲，这些框架都或多或少无法完全普适项目需求，或者很难与现有项目的技术栈相融合：

- 这些 UI 框架大都无法较为全面顾及到 B/S 软件复杂的业务场景；
- 这些 UI 框架较多地顾及了用户普适性和浏览器兼容性，而大部分 B/S 项目不用过多考虑这些；
- Bootstrap 的 UI 侵入性太强，容易与其他 CSS 代码起冲突；
- Amaze UI 是移动优先的框架，而 B/S 项目大多是 PC 端的；
- Element 基于 Vue 这个 MVVM 框架，而很多 B/S 项目都是采用传统技术栈（基于 DOM），所以目前并不适合；
- 传统的 EasyUI 很强大，但颜值明显跟不上时代，显得落伍；
- jQuery UI 太重了……

BSUI 不是单纯为了做 UI 组件而做 UI 组件，而是从 B/S 项目的业务场景出发，根据需求反向推导出所需的 UI 组件，再考虑 UI 组件与后台的数据对接，最后进行 UI 组件的设计与编写。例如 Switch（开关）这个 UI 组件的推导过程：

1. B/S 项目中经常会用到一些“开关量”的设置项，例如：启用/禁用某个功能；
2. 以往怎么做？以往都是用两个单选框来做，但这样可视化效果较差，也不直观；
3. 期望怎么做？最直观的表达方式就是做一个“开关”来表示两种对立的状态；
4. 这个“开关”如何与后台对接？还是得用表单控件，这样对接成本最小；
5. 用哪个表单控件合适？可以用 checkbox，勾选表示“开”状态，不勾选表示“关”状态，则对应可传给后台 true 与 false 两种状态量；
6. UI 上如何实现？可以通过 label 响应 checkbox 勾选，用 checked 伪类，搭配伪元素来模拟开关交变……
7. 有哪些边界情况？有被禁用状态和初始化赋值被禁用，这两种情况要考虑 UI 上的变化……

如何解决样式冲突问题？

为避免样式冲突，BSUI 采用了一套命名空间，规则如下：

ns 为 namespace 的缩写形式。

项目构成

• 基础 Basic
  • 样式统一
  • 字体栈
  • 打印样式
  • 图标
  • 网格
• 表单 Form
  • 表单排版
  • 文本框
  • 数字文本框
  • 文件域
  • 输入框组
  • 选项框
  • 下拉框
  • 按钮
  • 按钮组
  • 开关
• UI组件 UI
  • 下拉菜单（未完成）
  • 滑块（未完成）
  • 穿梭框（未完成）
  • 日期选取器（未完成）
  • 时间选取器（未完成）
  • 颜色选取器（未完成）
  • 时间线（未完成）
  • 工具条（未完成）
  • 抽屉（未完成）
• 数据报表 Data
  • 表格（未完成）
  • 分页（未完成）
  • 列表（未完成）
  • 卡片（未完成）
  • 图表（未完成）
  • 树菜单（未完成）
• 导航 Nav
  • 导航菜单（未完成）
  • 面包屑（未完成）
  • 步骤条（未完成）
  • 标签页
• 通知提示 Notice
  • 标记（未完成）
  • 加载（未完成）
  • 进度条（未完成）
  • 消息提示框（未完成）
  • 通知（未完成）
  • 悬停提示框
  • 对话框（未完成）
• 辅助 Util
  • 情景文本
  • 纸张效果
  • 原子类样式（未完成）
  • 动画（未完成）

文件目录

• [assets]（资源）
  • dest（分发资源）
    • css
    • fonts（iconfont 字体资源）
    • js（脚本）
  • src（源码资源）
    • icons（图标svg源文件）
    • js
    • sass
• build（构建任务）
• demo（示例、演示）
• dist（发布版）
• template（模板）

第三方开源库或插件

• jQuery

  • 简介：迄今为止世界上最流行的 JavaScript 库
  • 依赖：无
  • 版本：1.11.3 (2015-04-28)
  • API：官方API（英文）、中文在线API、中文离线版

• SeaJS

  • 简介：遵循 CMD 规范的 JavaScript 模块加载框架
  • 依赖：无
  • 版本：2.1.1 (2013-07-11)
  • API：简易API、API快速参考

• My97DatePicker

  • 简介：日期选取器（原生皮肤比较Low，需要自己做）
  • 依赖：jQuery
  • 版本：4.8 Release (2017-07-30)
  • API：官方API（中文）

• zTree

  • 简介：树插件
  • 依赖：jQuery
  • 版本：3.5.29 (2017-06-23)
  • API：官方API（中文）

• ECharts

  • 简介：Javascript 数据可视化图表库
  • 依赖：无
  • 版本：3.6.2 Release (2017-06-15)
  • API：官方API（中文）