Watch Star Fork

Yashin / EastWebManagerJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
BSUI(软件部web管理后台通用模板)
Loading...
README.md 9.14 KB

BSUI

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

定位

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

浏览器兼容性

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

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

市面上有很多大而全的 UI 框架,热门的有:BootstrapAmaze UIElementEasyUIjQuery 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 采用了一套命名空间,规则如下:

nsnamespace 的缩写形式。

命名前缀 类型 对应的 Sass 变量 描述
l- 布局 (layouts) $ns-lyt 大的布局区块。例如头部、主栏、侧栏、栅格等。
o- 对象 (objects) $ns-obj 一般是不可再分的较小个体,通常被复用于各个组件、模块中。
c- 组件 (components) $ns-comp 通常是一个语义化的、能实现某个较复杂功能,且可以重复使用的组合整体。例如弹出框、滑块等。
is- 状态类 (state classes) $ns-is 作为对象、组件等的语义化状态类样式的钩子。
has- 状态类 (state classes) $ns-has 同上,区别是 is 表示“是什么”;has 表示“有什么”。
u- 实用类 (utility classes) $ns-util 包含一些使用率较高的常用样式。如清除浮动等。

项目构成

文件目录

  • [assets](资源)
    • dest(分发资源)
      • css
      • fonts(iconfont 字体资源)
      • js(脚本)
    • src(源码资源)
  • build(构建任务)
  • demo(示例、演示)
  • dist(发布版)
  • template(模板)

第三方开源库或插件

项目点评 ( 0 )

你可以在登录后,发表评论

搜索帮助