JQ-bootstrap我的开源前端框架

简介: 因为实在不知道写啥,所以迟迟没有相关的介绍。但是必须要积累过程资产,所以还是介绍一下,不定哪天就有人用了。       首先还是介绍遇到的问题,我是做传统后台管理系统的,公司赶时髦,要用bootstrap。
    因为实在不知道写啥,所以迟迟没有相关的介绍。但是必须要积累过程资产,所以还是介绍一下,不定哪天就有人用了。
 
    首先还是介绍遇到的问题,我是做传统后台管理系统的,公司赶时髦,要用bootstrap。公司其他团队已经用bootstrap作为前端做出一套系统了,算是当前系统的升级,我没参与,进入测试阶段后,我偷偷看了一眼——嗯,可能是我眼光高,可能是测试版,我可以忍住不吐槽,我又不上项目。抱着这样的心理,我被通知开发其中的一个模块,这时我又看到了jsp代码——嗯,可能是我开发经验少,可能是……。反正要让我开发我忍不了,一个表单,输入框能不一样长,一个保存按钮就挨在输入框旁边,换个行也行啊,这是我认识的bootstrap么,表格头和分页条挨着是什么鬼,没数据?有了数据要滚动整个屏幕是哪样,我在滚动到顶上看表头么;HTML你倒是缩进啊,倒是写注释啊,还有内部样式啊,以后不改了么,我新建个页面,要把写好的整个页面都粘贴过去,然后在一层一层的找就为修改个标题,然后拉到最下面修改数据源,还得靠搜索找到事件到底在哪。我百度了一下,发现bootstrap没有面向后台开发人员的框架,最多是组件控件,html和css还是要写一堆。
 
    1.由于后台管理程序界面大同小异,页面的大多数功能就是对数据的增删改查,复杂的逻辑由后台程序执行;所以当使用Bootstrap时有很多HTML是需要反复重复的粘贴复制,使用模板页又不能保证灵活性如果做了很多页面后需要统一修改,就会相当麻烦,对于专注后台代码人员是一个很大的工作量;
    2.后台代码人员对前端不是很熟悉,而且不会花大量时间优化前端代码,导致不同程序员开发的页面样式不统一,整个软件看着就不是一个风格;
    3.原生Bootstrap部分控件并不能满足客户需求,需要引用其他第三方插件,当多个第三方插件组合在一起的时候程序员的噩梦又开始了;
 
    所以如果公司没有专门的前端人员,也没有成熟的Bootstrap模板框架,将会遇到三个问题:重复的工作量,影响开发周期;页面风格不统一;前台代码逻辑复杂很难维护;
 
    当我发现这三个问题后着手用jquery封装原生Bootstrap和第三方插件,使页面引用统一的js和css,在尽量保证开发灵活的同时统一页面布局和样式。
 
    再来分享下具体的实现思路,
 
    1.首先作为控件要有一个统一的类,我命名为bsEx,随便起的,类包括 控件,基础属性和方法,事件也要走统一接口,要支持多语言,如果是第三方组件,要支持其所有属性和方法,这个类包含在一个js包里,组件要尽量减少前台html,保证一个控件一行或直接没有;
    2.要有一个css文件,调整组件样式;要为每个组件写出示例及API方便学习参考;
    3.要开源,以为只有我用到项目中了(jq22那上也有人用了但是没有跟踪不知道使用情况),源码要注释的明确方便修改;
    4.要有更新日志;
 
    实现的话就很简单了,只不过把属性提出来,输出html罢了。
 
    这是我的第一个开源项目,大家多多支持,有不好的地方一定要通知我,我会不要脸的接受的。

    项目源码

    https://gitee.com/shixixiyue/MyBootstrapEx

    可以通过右上角 [查看本页面源码] 进行在线查看,方便学习

    v2.0版本 https://shixixiyue.gitee.io/mybootstrapex/

目录
相关文章
|
6月前
|
前端开发 JavaScript 数据安全/隐私保护
推荐6款超级好看的开源中后台前端框架
推荐6款超级好看的开源中后台前端框架
630 0
|
6月前
|
编解码 移动开发 前端开发
【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
|
6月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
前端开发 JavaScript CDN
推荐一款稳定快速免费的前端开源项目 CDN 加速服务
推荐一款稳定快速免费的前端开源项目 CDN 加速服务
337 0
|
前端开发
前端基础 - Bootstrap简单案例
前端基础 - Bootstrap简单案例
56 0
|
前端开发 JavaScript 容器
前端基础 - Bootstrap简介
前端基础 - Bootstrap简介
57 0
|
2月前
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
128 3
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
156 1
|
3月前
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
285 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
3月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
下一篇
无影云桌面