分类
javascript 总结

约定俗成写代码守则

关于数据字典

数据字典的数据可以先用async获取,方便后面使用

数据字典前端要传后端code,后端不能存name,而是利用code获取name再传给前端

关于流程

如果写流程类的代码,就有节点的概念,每个节点都会有表单操作,每个节点都有它的特殊性去展示不同的页面,因此,节点不能写死,像1,2,3,4,5这样就写死了,建议1,3,5,7,9

关于echarts

记得合并模式,基础配置使用普通合并,后台传过来的数据用代替合并

定义一个resize监听器,改监听器可以用debounce,当监听到时更改resize:true,再监听resize,当它为true时给echars修改this.chart.resize({width: null})最后把resize改成false,resize这个值可放到公共store

每个图标一定要单独做成组件,组件里有一个config.js配置,这样容易复制,要是做在一起,这酸爽。。。。

关于公共组件

适合抽离的公共组件有1.上传 2.找人等常用又容易修改的组件3.严重占据代码量的组件

关于css

写好css很重要,知道在哪写css更重要,曾经在一个流程的vue文件下写css,后来这个流程复制了5遍。。。

css尽量别嵌套太深,不然找都不好找

关于用户体验

弹出框:点击按钮弹出,点击外部框消失或者点击按钮框消失

选择框:可搜索,可删除

分类
总结

FTS迁移时感悟

该系统是较为复杂的流程系统,最近它的流转引擎需要更改,所以前端需要配合迁移。重新审视代码吐槽一番。

吐槽点1:为什么我把每个节点的转发,转办,通知,同意等接口都写了一遍!

当时我把每个接口都写一遍是因为后台给的是不同的接口,就算是不同的接口,我也可以把接口地址作为变量写一个公共的方法啊!再说我觉得后台应该也是调用的一个公共方法,如果沟通好的话可能都不需要修改接口地址,而是只改接口内的参数。

吐槽点2:为什么我得前端判断按钮是否显示啊!

当初设计的时候有一个stepNo的概念,比如一个市场问题有17个步骤分六个模块,在原因分析模块有失效分析,责任认定,根本原因三块内容。这三块内容后面可能还有审批这步操作。我就根据stepNo分清它是在哪个步骤再决定按钮的显示。当然只有当事人在待办中看才能看到当前stepNo显示的按钮。这个设计我感觉没什么问题,但是我不能向后端获取按钮吗。只要约定好按钮的样式函数。

吐槽点3:为什么要用用户的loginName而不是id作为标识啊

有的节点需要判断下一个操作的用户是谁需要向后台传递后一位的操作者,但是用了loginName出了许多问题,比如人员同步是有问题,当时发生问题的根本原因是为了美观和登录方便去掉了同名用户后面的数字,呵呵。当然用loginName还有一个原因是当时的引擎只支持这个,想想也是,引擎数据库的用户id和公司内部的用户id不同步啊,因为引擎是别的公司的产品。

吐槽点4:为什么一个vue文件有两千行啊!

emmm,一个原因是当时在一个模块里的操作比较多,想上面的原因分析。又要初始化,又要填表,又要赋值,又要判断在stepNo做的操作。还有就是组件化做的不太好的原因。有些css还没有复用。毕竟是一年前做的系统,原谅一下自己。

总结

虽然当时代码写的烂,但是用户体验不错,也完成了需求(毕竟是定制开发)。说明项目的成功与否与客户是否满意有很大关系。

分类
总结

阶段性回顾(1)

记忆力一直不是我的强项,但有些东西总是值得回忆的。记录下前端生涯走过的路,获得的进步。多年以后再来看看也是一件十分有趣的事。

初战:一个复杂的流程系统

说它是初战是因为这是第一个,我作为唯一的前端负责开发的系统,在此之前也做了一些打杂性的工作,比如说学习了vue,改了改另一个系统的ui,参与了又另一个系统的接口联调及页面开发,也许是前端缺人,也许是同事老板的信任,也许两者都有,这个任务落到了我头上。

这个系统主要考验了我的程序思维,以这个系统中的一个流程来举例,一个流程至少有17个步骤,每个步骤可能由不同的人来操作,并且有并行的操作,即同一个步骤可能有多个人来完成,这样结果也就从单个变成了数组。同时,需要把这17个步骤放在6个页面当中,这就需要判断在这个页面中执行的是第几个步骤。在这样的一个流程中分为两条线路来操作,分别是填写流和审批流。当你处在填写流时,你可以执行的操作是提交,暂存,返回。竟然还有个暂存,这是不是意味着我还得把写的东西存下来,放进草稿。当你处在审批流时,你可以同意,驳回,转办,加签。这个加签也是比较烦的东西,因为加签后流程的步骤没有改变,但是加签的人可以输入意见然后提交,提交后在审批记录中有加签人的意见。而且这是一个长流程,在流程的后期你也得看到前面的流程。

总之,经过这个系统的洗礼,我感觉技术实力有了很大的进步,比如下载文件的操作、echart的操作(后期有报表)、判断超时时间是前端设置的时间超时取消调用还是后端的ngix服务器超时取消返回给前端(这样就能愉快的甩锅了)。再比如如何在页面切换时刷新,如何优化点击同一个流程时会返回已打开的流程而不是再次重新打开。熟悉了下ant-design-vue,和vue,vue-router,store等。

再战:一个订单系统

虽然上一个系统的业务十分之复杂,我也把它做了出来,但是一看单单一个页面的代码量,我的天!竟然有两千多行。显然这是不行的,在这个系统里,我得改正。于是组件化开始了。每个页面大致都有一个高级检索,于是把它做成了组件。在这个组件中添加了键盘快捷搜索,展开收起,页面自适应。把所有的搜索表单表单都放在一个组件内,通过name判断是否应该显示。这样我就能方便调用数据字典接口,为了更方便的调用数据字典,实现了只要在一个数组中加入一个单词,就能自动调用该单词的数据字典。

同时学习了一些组件通信的方法,比如如何暴露组件函数,作用域插槽的运用,子组件使用外部方法后接收结果进行再处理,利用这些知识做了一个动态增减表单项组件,成为了博客的内容。

git上的提升,能比较熟练的运用git操作,从之前的fix,merge提示记录改成符合angular团队规范的提交记录格式,从此每一个项目的gitlab都能成为航海日志,并且减少了分支至2条,一个是master一个是当前版本的分支。

一个比较快速的项目

这是一个知识教训库,在这个项目中的提升主要是弄清了env配置,组件运用更加全面,没有再出现一个页面复制到别的页面的情况。

用时三个星期,也算锻炼了自己快速实现的能力吧。

一个改密码的项目

在上一个项目和这个项目中间学习了一波webpack,所以这个项目的技术含量会有一些提升。首先此项目要在手机端和电脑端显示,通常我们会启动两个项目来分别写手机和电脑端。但是这个项目并不大,我用了一些css技巧识别了手机和pc的区别(没有用宽度识别)。在媒体查询下分别写他们的css,做到了一份代码,多端使用。然后就是国际化,rsa加密,并照着友商的改密码项目手写了一个人机校验插件,并把rsa功能放进该插件里。于是取名叫做rsa-verify,现在能从npm搜到。

优化的部分也从减少包体积入手,比如去掉不必要的包,cdn加速,从首页渲染速度入手的优化有包分割,ant-design-vue的按需引入,ant-design-icon的按需引入。

期间读了本身框架的路由逻辑,因此能比较从容的改路由白名单,防止地址随意跳转,也能配置与后台交互时header的属性。

空闲时学习的知识

正则

在改密码项目中修改密码用到的各种规则都是用正则办到的,正则就像一个好用的工具,就要系统的学习,之后对项目的影响也是潜移默化的。

svg

其中学习了svg如何绘制图形,如何制作smil动画,svg滤镜,其中使用了svg滤镜动画在改密码项目中做了一个噪音滤镜改造过的水波纹点击动效,不过惨遭ui删除555。到底啥时候能有他一展身手的机会啊。。。

canvas

只会照着api用,解决了一个后台传过来白底背景图片放到蓝色基调的页面不好看的问题。解决方案是这样的:白底=>黑底,就是图片数据扣到canvas上,形式是一串长一维数组,规律rgba,改rgb,值=|255-数据|。有了一个黑底的图片。放到页面上。再利用滤色模式screen规律,黑色碰上别的颜色计算出来的值都是那一个别的颜色。于是mix-mode-blend:screen;加上background-color:需要的颜色。其实还可用svg滤镜实现,feColorMatrix滤镜的luminanceToAlpha模式色调翻转,白边黑。feFlood蒙上需要的颜色。feBlend的mode设置为screen将两者的结果结合生成最终的滤镜效果。这种方式不需要改动页面,只需要在外边放个svg滤镜输出id。在该图片的类中加一个filter:url(#id)即可。

学习来源

阿里来的带我的师傅,姓康。也是我真正意义上的技术入门导师,所以我叫他师傅,而不是康师傅。

张鑫旭博客,张鑫旭css世界,张鑫旭选择器世界

mdn,css tricks,html草案,css草案

javascript高级程序设计第三版

下一步的方向

由于在大二起我就看了张鑫旭的博客一路走来,所以css基础应该算是不错的。我会从javascript入手再巩固一遍基础,我买了高性能javascript,和你不知道的javascript上中下这四本书来阅读。

会尝试滤镜的更多可能性。

从项目角度,希望解决service worker离线缓存带来的项目上线后再次上线用户需要清缓存才能看到更新的问题。