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/

目录
相关文章
|
29天前
|
前端开发 JavaScript 数据安全/隐私保护
推荐6款超级好看的开源中后台前端框架
推荐6款超级好看的开源中后台前端框架
49 0
|
7月前
|
JSON 前端开发 JavaScript
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
|
2月前
|
数据采集 移动开发 前端开发
2023年, 前端路上的开源总结(最新更新)
2023年, 前端路上的开源总结(最新更新)
18 0
|
7月前
|
前端开发 API
前端(十五)——开源一个用react封装的图片预览组件
前端(十五)——开源一个用react封装的图片预览组件
|
8月前
|
设计模式 JavaScript 前端开发
高质量前端免费开源书籍推荐
这篇文章中整理了一系列前端开发相关的开源书籍,全部都可以免费在线阅读,内容质量都非常的高,中文英文的都有,包括了 JavaScript、前端工程化、前端框架和面试四个主题。
105 0
高质量前端免费开源书籍推荐
|
9月前
|
SQL 前端开发 数据库
|
前端开发 JavaScript 安全
常用前端开源静态网站推荐
常用前端开源静态网站推荐
564 0
常用前端开源静态网站推荐
|
存储 缓存 JavaScript
来学习开源模块化前端框架—Layui【Layui 极致轻量前端框架】
它是一个开源的 Web UI 解决方案,采用自己的经典模块化规范,遵循原生 HTML/CSS/JS 开发模式。它很容易使用。它的风格简单轻巧,而组件优雅而丰富。从源代码到使用方法的每一个细节都经过精心雕琢,非常适合快速开发的 web 界面。Layui 不同于那些基于 MVVM 的前端框架,但它并不违背这条道路,而是相信回归自然的方式。准确地说,它更面向后端开发人员。不需要参与前端工具,只需面对浏览器本身,让您需要的所有元素和交互都来自这里。
|
前端开发 安全 API
关于DAO模式NFT盲盒玩法系统开发的详细原理(前端UNI后端PHP)|(全开源)
关于DAO模式NFT盲盒玩法系统开发的详细原理(前端UNI后端PHP)|(全开源)
275 0
EMQ
|
网络协议 前端开发 Linux
Neuron Newsletter 2022-06|新增 1 个南向驱动、开源前端代码
六月,我们发布了 Neuron 2.1.0 版本,这个版本主要与 eKuiper 进行了深度集成,可一键部署携带数据处理功能的 Neuron。
EMQ
153 0