教育经历
武汉大学
| 硕士 | 地图学与地理信息系统
2019.9 - 2022.6
中国矿业大学
| 本科 | 土地资源管理
2011.9 - 2015.6
技能栈
- 前端基础：熟练掌握 JavaScript、HTML5、CSS3；熟悉 W3C 规范和 ECMAScript 标准
- MVVM 框架：熟练掌握 Vuejs 、React、Rax 框架，有实际项目经验
- 跨端：有 小程序、H5 等移动端开发经验
- 工程化：熟悉 Webpack 构建工具；熟悉 GIT 工作流
- Nodejs：有 Express 使用经验；使用 puppeteer 写过爬虫工具
- TypeScript：有 TypeScript 开发经验
实习经历
阿里巴巴淘系技术部 |
前端开发实习生
2021.6 - 2021.8
- 实习期间做了三个需求，owner 了两个完整的项目
- 技术收获：
- 基于 Rax 框架，陆续接触了 Rax 小程序、支付宝小程序、Rax MPA 等场景，熟悉了移动端的开发
- 学习并熟悉了 React、TypeScript 等技术
- 维护团队基础组件库，并对部分组件功能进行升级
- 亮点工作：
- 在理解业务的基础上，全流程负责了一个 H5 多页项目：技术方案设计、评审、人员分工、实施、devshow、上线
- 实习结束时，被团队领导推荐为实习生代表，在实习生沟通会上分享实习感受
项目经历
某服务承接页 H5 页面（实习项目）
| 前端 PM
- Situation：为支持汽车业务发展，需要为相关商品订单增加服务能力，该服务能力以内嵌 H5 的形式实现，方便多处投放。
- Task：项目有服务工单申请、工单详情、地址选择、订单选择、门店选择等页面。 团队之前已有一个类似的服务类多页项目，功能和 UI 均比较相似。原项目基于阿里开源跨端框架 Rax 的 MPA，技术上具备拓展的可行性，考虑对该项目的相关功能组件进行复用。
- Action：
- 原项目的重构：从原项目相关页面需要复用的功能组件进行抽取重构
- 团队协作：实施上需要熟悉原项目，为提高开发进度，降低外包同学的上手难度，只把一些功能相对独立的页面分配出去
- 项目开发：工程使用 TypeScript 开发，过程中大量复用团队沉淀的基础组件、业务组件、功能 Api，提高开发效率
- 协调测试：该方案可能会对原项目功能产生副作用，需要与相关测试同学沟通到位，做好回归测试
- Result：通过重构，预估需要三周完成的项目，提前一周实现了提测上线，且未对原项目产生副作用。
某测绘院互联网地图服务平台（实验室项目）
| 项目 PM
- Situation：一个实验室项目，甲方有许多历史地图成果需要向公众提供网络浏览服务，同时希望支持一定的专题定制。
- Task：实验室有类似功能的历史项目，但技术栈较为落后，需要在理解历史代码的基础上进行重构，以支持项目要求。
- Action：
- 前端重构：将历史项目的 jQuery 技术栈切换至 Vuejs 生态
- 地图框架：地图实现上，摒弃笨重的 ArcGIS Api for JavaScript ，选用轻量开源的 Leaflet 库及第三方插件实现。
- 重写制图引擎：历史项目的定制部分，使用了后端渲染方案，前端展示后端返回的符号图片；借助前端图形库 D3js 、ECcharts 等开源符号库，在前端封装了一套 Leaflet 符号渲染系统，替换后端服务引擎
- 启用 Node 服务端：原后端栈是 Java，由于语言的限制，加上抽离制图引擎后，后端服务相对简单，使用 Express 进行了重写
- Result：
- 开发效率提升：转至 Vuejs 技术栈后，借助其组件化、数据驱动的设计思想，提高了代码复用，降低了维护成本
- 用户体验：引入 MVVM 框架使网页加载渲染速度更快；可交互的符号系统提升了用户体验
个人小项目
leaflet.charts 插件
| 仓库地址
- 仓库介绍：一个向 Leaflet 地图插入点状分布式统计图的插件，支持 D3js 和 ECharts 图表。
- 技术思路：
- 借助 Leaflet 提供的 L.divIcon 功能，向指定制图位置传入一批 div 容器
- 对容器进行批量管理，处理数据，生成指定统计符号
- 引入 ECharts 可以借助其动态图表的能力，快速生成动态可交互的统计图形
- 引入 D3js 能够支持更多异形符号
leaflet.snip 插件
| 仓库地址
- 仓库介绍：一个框选截图的 Leaflet 插件，向地图工具栏中添加一个按钮，可在地图中画出一个矩形框并获取框选范围内的地图。
- 技术思路：
- 通过监听鼠标事件，获取框选的起止点经纬度坐标
- 使用 Leaflet 提供的 api 将经纬度坐标转换为屏幕坐标
- 通过 html2canvas 库，获取地图容器截图
- 使用框选的屏幕坐标对容器截图进行截取，返回框选部分的截图
个人博客
| 仓库地址
- 仓库介绍：使用 Vuejs 驱动的静态网站生成器 VuePress 开发，部署在 GitHub Pages 中。
其它经历
上海华测导航技术股份有限公司
| 上海分公司 | 区域经理
2015.7 - 2018.4