从17年的12月,到现在18年的4月,历时5个月,spirte框架从一开始的一个简单雏形,慢慢变得强大起来。

从简单的require+Vue+VueRouter实现了框架的整体骨架,到后来和公司的前端部门一起配合实现了今日校园和微信的SDK初始化,再到跟公司的权限体系结合后实现的页面授权和按钮授权,再到游客模式,再到可配置的页面按需加载的实现,最后又实现了可配置的多入口应用实现,还支持了关于公司的对于移动应用的合并式二开扩展模式。

在这5个月的过程中,我踩了不计其数的坑,框架代码也改的面目全非,我想现在的sprite框架代码基本就代表了我现如今最高的前端水平了。

今天就在这里展示一下这五个月来我们部门用sprite框架做出来的成果,一些校园应用,然后在分享出耗费我“无数心血”写出来的sprite框架的“完全体”代码。


基于sprite框架开发的应用展示

5个月来,我们部门基于sprite框架开发了二三十个移动应用,我从里面挑了一些功能齐全,“颜值”高的应用截图展示:

1.宿舍考勤(学生在规定的时间在宿舍内使用手机进行考勤,管理老师查看考勤情况,并对考勤异常的学生进行处理):

2.迎新系统(学生利用迎新系统进行秒级扫码报到,免去了到处奔波的麻烦,并且集成了很多便捷迎新服务,管理老师实时监控全校新生的报到情况,还可以根据到站统计信息合理安排学生的站点接送):

3.离校系统 (学生利用离校系统线上办理离校手续,管理老师实时监控全校学生的离校办理情况):

4.奖学金系统 (学生在线申请奖学金,系统自动推送符合条件的奖种列表,管理老师一键审核)

5.学生请销假系统:(学生在线进行请假,管理老师进行审核以及销假等操作):

sprite框架的“完全体”代码

我一直号称我有代码洁癖,而且是一个注释狂魔。

这是因为我在写代码的时候,会强迫症一般的反反复复的查看之前写过的代码,然后看着看着就想去重构它们,为的就是能让我在一个月两个月以后重新回来看我的代码,不需要思考就能直接看懂,也是为了让接手我代码的人能够更容易的进行维护。

可能会有人觉得这样写代码太麻烦,没必要,但是这样的人可能也体会不到当我再次阅读我重构调优后的代码时,那种赏心悦目的成就感,那是支撑着我不断前进的最大动力。

Talk is cheap,show you the Code!

spriteFrame.js:被我精简到极致的框架主体

requireConfig中有不少js文件都是我们公司提供的公共组件js文件,这些可以忽略,专注看代码逻辑即可。

spriteUtil.js:基于AMD规范开发的框架工具库

这个工具库的内容包括了应用初始化的回调机制实现,游客模式,基于正则扫描的按钮权限,可配置的页面按需加载以及微信SDK的初始化等等功能的实现:

mobutil.js封装的基于axios的异步Ajax请求工具:

对原有的axios方法进行了进一步的封装,并且使用mint-ui的组件进行统一的异常提示(这是基于我们所有api的统一返回格式)。

head.jsp:所有移动应用index.jsp中的的公共head

除了一些必要的外部js文件和css样式以及我们公司提供的一些组件和公共样式之外,框架只需要引入三个js文件即可,一个是require.js,一个是spriteFrame.js,还有就是mobutils.js(这个文件也可以替换为别的ajax实现)

body.jsp:所有移动应用的公共body

基于head.jsp和body.jsp,可以大大的精简每个应用的index.jsp文件,如下图:

这些就是sprite框架目前主要的代码了,当然很多代码时和我们公司的特有的代码结合起来生效的,所以看起来可能会有些不明白,不过没关系,我把sprite框架的主要代码帖在这里的目的只是想要展示一下我关于框架代码的优化和重构的思路和方法,所以不需要注重具体的实现,关注代码思想就好了~

发表评论

电子邮件地址不会被公开。 必填项已用*标注