四年前端开发工作经验,现就职于 ThoughtWorks 公司担任 UI 开发工程师。拥有很强的分析及调试能力,对于用户体验 有一定的追求,有一定的网页优化经验。加入 ThoughtWorks 公司之前,在知道创宇作为前端开发工程师,负责数据可 视化开发,沟通能力及学习技巧较为突出,曾经研究过 Antd 的源码,并编写成为博客分享。
ThoughtWorks 项目经历
职位:UI Developer (2018.4 - 至今)
招商银行内部系统 Design system 方案项目(2020.6 - 2020.7) 项目职责:design system 技术实施方案以及编写项目脚手架示例代码。 项目技术:vue,antd-design-vue,storybook,less
重要事迹:
1. 产出技术方案书 - 根据客户需求,编写以 antd-design-vue 为底层代码,按照设计师给出的设计规范,进行特殊化 配置,封装前端基础组件的方案书。
2. 自定义组件方案样例代码 - 使用 antd-design-vue 的 less 主题定制修改组件样式参数和样式前缀变量,使用 antd- design-vue 的 configProvider 重置组件样式前缀,达到自定义组件样式效果。
3. 组件库推广方案 - 使用 npm 将组件库代码发布在 npm 仓库中提供使用,使用 storybook 展示组件使用方法,传 入参数以及样例。
南方电网顺易充小程序(2020.3 - 2020.5) 项目职责:小程序界面开发和对接 API。 项目技术:react,taro,scss
重要事迹:
1. 骨架屏公共组件 - 根据设计规范,在列表第一次加载,将菊花转替换成骨架屏。
2. 无限滚动加载组件 - 项目中大量使用到列表加载,整合列表加载共有属性,结合骨架屏组件编写滚动加载组件,使得
列表加载体验上升和开发效率上升。
3. 水波球效果 - 使用 canvas 和三角函数公式,绘制水波效果,由于小程序中 canvas 动画效果在真机中的表现很 卡,所以将绘制的水波使用 canvas 导出图片,使用图片和 css 的 keyframe 和 animate 实现动画效果,解决卡顿 问题。
4. 价格曲线绘制 - 使用 canvas 绘制直角坐标系,使用 lineTo() 抽象价格曲线函数,将对应数据填入函数,进行曲线 绘制,其中包含了对于精度的控制和对于函数最大最小值展示的处理,展示对应时段价格曲线。
招商银行内部论坛系统 (2018.7 – 2019.12)
项目职责:参与 PC 端与手机端的项目网页开发、重构以及大量组件开发,项目前端主要输出者。 项目技术:手机端 angular2 + rxJS,PC 端 C# MVC+jQuery
重要事迹:
1. 重构 PC 端老项目 - 因为 PC 端是一个.net + jQuery 的老项目,按照拆分的 viewModule 进行页面的 JS 编写, 使用闭包的方式进行页面之间的变量隔离。
2. 制定 PC 端 jQuery 组件编写模式 - 如果是一个页面中只会出现一次的组件,使用单例模式编写组件,如果是一个页 面中会使用到多个的,使用工厂模式编写。
3. 制定 PC 端 CSS 样式规范 - 根据 airbnb 的 BEM 的 CSS 编写规范,重构项目 CSS,并在组内分享。
4. 更改 PC 端百度 ueditor 源码 - 因为业务的需求,需要在 ueditor 中进行图片的校验与样式装填和进行一些页面格 式的补充比如一个换行之后需要增加一个
,以达到排版要求。
5. 实现 PC 端水印解决方案 - 结合通过 canvas 生成图片的经验,提出在拿到用户数据之后,生成背景图放在页面上 形成水印的方案,为用户和小组高效解决问题。
6. 手机端 webapp 用户体验优化主导者 - 主导手机端提升用户体验事宜,增加骨架屏加载,弹窗动效,滑动特效等提 升用户体验。
7. 解决手机端 webapp 长页面滚动卡顿问题 - 结合之前的项目经验,按照 react 的卡顿解决手段,从 angular 的生 命周期开始着手,在需要更新的时候和动作之后再来更新重绘,避免无用重绘,解决卡顿问题。
8. 实现手机端 webapp 的返回上一页回到上次浏览状态方案 - 在 angular 的体系中,使用 angular 的 service 进 行这两个重要数据的存储,在检测到路由是 pushstate 的时候,就进行页面的恢复操作,先将页面的数据填充,填充完 毕之后再进行页面的位置定位,当然在这个阶段计算是需要时间的,为了避免在返回上一页的时候有一个闪现的状态出 现,所以在页面填充完成之前,都是以骨架加载的方式进行页面样式的预填充。
澳洲某银行网站项目 (2018.4 – 2018.6) 项目职责:负责网页页面日常维护和更新 项目技术:react+redux
重要事迹:
1. 实现重构 icon 的使用方案 - 项目中的遗留问题为项目的 icon 系统是将 icon 的代码编译完成之后存储在 react 的 context 中,这样做的弊端就是 context 臃肿,并且整个项目打包之后很大,于是提出解决方案为使用 iconfont 进行替换,使用 webfonts-generator 进行 iconfont 的和对应的 css 生成,在过程中遇到了多色彩的 iconfont 和 iconfont 文件不规范的问题,于是将这些错误的和多色的 icon 进行单独挑选出来,在用另一个任务,打包成为 svg 提供使用。
知道创宇工作经历
职位:知道创宇前端开发工程师 (2016.7 – 2018.4)
某数据分析系统 (2016.9 – 2018.3)
项目职责:参与 PC 端网页开发,使用 echarts 开发数据展示图表,结合 react 封装成为组件。 项目技术:react+redux+node(hapi)+echarts
重要事迹:
1. 表格的撤销和重做功能方案 - 使用栈的先进后出的特性,在利用 redux 存储临时状态,完成表格组件中的撤销和重做 功能。
2. 表格滑动卡顿问题解决方案 - 在网上查找解决方法,找到需要控制 react 的更新渲染,所以我在每次 react 的 shouldComponentUpdate 优化数据更新的条件,达到减少重绘,进而解决卡顿问题。
3. 大屏展示中的图标导出图片功能 - 在网上查找到有一个方案是将 html 转化成为 canvas,然后再使用 canvas 生成 图片,进行下载,就达到了到处部分页面的截取保存图片的功能。
可兼职时间
可兼职地点
0条评论 雇主评价