猿急送>

上海前端兼职程序员

ID：239456

小包包身份已认证

前端开发工程师

公司信息：
上海鲁班软件

工作经验：
3年

兼职日薪：
600元/8小时

兼职时间：
可工作日远程
可工作日驻场（自由职业原因）

所在区域：
上海
杨浦

技术能力

从事前端开发工程师3年，平台为web端和移动端微信，主要负责以下几个类别的项目：
1. web端管理、平台类系统
2. 官网搭建
3. 微信h5
4. 基础组件类别开发

使用的语言是JavaScript，能胜任的技术框架有React和Vue。细则如下：
1. 具备独立搭建构建环境的能力，不依赖于官方脚手架。
2. 能使用React16配合Typescript开发。
3. 能使用vue3.0配合Typescript开发。
4. 具有较好的算法以及数据结构的基础。
5. 能书写单元测试对流程进行校验。
6. 能基于打包工具对项目进行优化。
7. 具有较多的第三方库使用经验。（例如使用echarts开发可视化数据分析，wow.js动画制作）
8. 具有使用node.js搭建中台的项目经验。

（注：基础的技能未列入，例如css，html，jquery等）

项目经验

【项目一】后台管理系统
角色：独立开发
开发周期：4 周
项目简介：达瑟儿素材库管理系统，服务于内部员工小程序项目（类朋友圈），为提供运营人员撰写朋友圈数据。
主技术栈：
- 使用 Vue 框架+ElementUi 搭建项目。
- 权限模块采用树状表单和穿梭框的方案，配置了动态路由菜单数据，角色权限。
- 使用第三方库处理拖拽排序，日期格式化，富文本编辑，二维码生成，canvas 绘制视频封面等需求。
- 简单使用 Echarts 在首页中对数据（例如访问量）进行了可视化处理。
》技术难点、闪光点
由于公司项目开发时间普遍较少，加上管理系统通常涵盖多个重复的功能场景。为了大幅提升开发效率，同
时减少冗余的 coding 时间，并将剩余开发时间用于项目的调优。我结合以往的后台项目经验。提出：
a) 对 Element UI 进行符合公司需求的二次封装。
开发前期大约花了 1 周的时间进行搭建。过程中在对定义表格内容渲染的部分，基于 ant design 中表格字段
定义里 render 函数的启发，设计通过传入 render 函数，返回 jsx 语法，并使用 Vue 的 component 组件渲
染的模式，轻松解决了以传入配置对象的方式来定义表格渲染内容。后续对该二次封装骨架进行了推广，撰
写了 api 文档，并应用于公司的后台管理项目。
b) 设计了媒体库模块
管理系统服务于公司内部类朋友圈的小程序项目，考虑到运营人员频繁上传媒体资源的场景。经由和产品经
理商讨，为管理系统添加了独立的媒体库模块。媒体库包含了具有公司特色的各类图片和 logo，各种尺寸和
类型的媒体资源，运营人员使用系统时，也可以主动上传当前系统常用的图片以便后续重复使用。后续该模
块作为管理系统常驻模块在公司中使用。
c) 本地搭建 mock 服务器闭环开发
基于二次封装骨架的开发效率大幅提升的状态下，和后端人员进行了简单沟通，确定了开发前期将定义的字
段名和结构先行确认。我使用 mockjs 搭建本地服务器对数据进行了 mock，脱离了前端与后端对接接口的
环节，后期修改服务器地址并进行简单调整，大幅缩短联调时间，并推广该模式为执行标准。
d) 额外构建 webpack 配置单独打包页面
项目中有一处手机扫码编辑文案（为了能够方便运营人员使用手机自带的 emoji 表情）的需求功能。此页面
不需要鉴权，同时考虑到页面加载性能（将不相关的依赖打入 vendor 中导致加载时间过长），又不能嵌入
后台项目的路由中。思考之后在项目中额外建立 webpack 配置文件和 html 模板，单独打包该页面进入 dist
文件夹，通过读取环境变量配置开发与生产请求的 ip 地址，同时打包进页面的依赖仅仅是所用到的 jquery
和 axios，大幅度减少了页面加载时间。在 package.json 中的构建指令加入我新增的额外打包步骤，实现了
该需求。

【项目二】技术组件开发（高级表格）
角色：独立开发
开发周期：长期持续（长期持续迭代的技术组件）
项目简介：统一公司内部对表格这一组件类型的需求开发独特的、符合公司项目需求的高级表格组件，供公司内部其他项目组使用。项目采用了纯前端架构模式对表格数据进行增删改查，并且赋予了诸多便捷的功能，例如插入删除行，树型结构数据展示，行内实时修改保存，定向批量可折叠等。
主要技术栈：
- React+Typescript进行纯函数式开发
- 使用jest+enzyme书写单元测试
- 使用materialui作为基础的输入控件
》技术难点、闪光点
a）使用了虚拟列表的技术绘制表格，配合Map结构的表格数据，实现了超大批量可行内编辑且具有较好滚动性能的表格。
b）采用对行、列和行内单元格进行分别的配置：
1. 列中实现了多级表头，列宽的拖拽，冻结列等功能。
2. 行中可定义不同类型的行，每种类型的行都可配置对应列的单元格类型，配合行内编辑使用。可定义不同层级的行实现树形
结构的表格数据。
3. 单元格可进行权限配置，只读/显隐，初始数据，计算公式（依赖于其他数据进行公式计算）等。
c）对数据的控制采用了redux，实现插入删除行，excel数据导入（增量型和覆盖型）等。
d）使用react-jss主题颜色的动态修改（不依赖于css预处理语言）
4. 配合后端采用存储配置（模板）+读取配置（基于配置生成模板实例）的方式对表格进行协同工作。

案例展示

技术组件（高级表格）

技术组件开发（高级表格）角色：独立开发开发周期：长期持续（长期持续迭代的技术组件）项目简介：统一公司内部对表格这一组件类型的需求开发独特的、符合公司项目需求的高级表格组件，供公司内部其他项目组使用。项目采用了纯前端架构模式对表格数据进行增删改查，并且赋予了诸多便捷的功
后台管理系统

后台管理系统角色：独立开发开发周期：4 周项目简介：管理系统，服务于内部员工小程序项目（类朋友圈），为提供运营人员撰写朋友圈数据。主技术栈： - 使用 Vue 框架+ElementUi 搭建项目。 - 权限模块采用树状表单和穿梭框的方案，配置了动
后台管理系统

后台管理系统角色：独立开发开发周期：4 周项目简介：管理系统，服务于内部员工小程序项目（类朋友圈），为提供运营人员撰写朋友圈数据。主技术栈： - 使用 Vue 框架+ElementUi 搭建项目。 - 权限模块采用树状表单和穿梭框的方案，配置了动