• 韩潮/Coiven
  • 工作年限：3年

  • Github：https://github.com/coiven

  • 期望职位：前端专家

  • 联系我：1270300956@qq.com

技术栈

  • 前端开发：es5 / es6 / typescript
  • 前端框架：react / vue / electron / next.js
  • web框架：express / koa
  • 前端工具：webpack / rollup / eslint / storybook
  • 数据库相关：postgresql
  • 版本管理、文档和自动化部署工具：git / docker / pm2
  • 单元测试：jest
  • 安全相关：代码混淆 / 调试与反调试 / 数据采集 / 异常检测

极验验证码

  • 地址：极验验证码
  • 工作：项目 4.0 架构、实施与维护
  • 描述：基于用户的行为特征，结合人工智能技术对用户进行人机识别，常见形式：滑动拼图完成验证。
  • 架构：
    • 采用 rollup 作为打包框架，es6 + babel 兼容低版本浏览器
    • eslint 等约束代码规范
    • 使用面向对象编程的思想实现多种验证形式的模块化与公共功能的继承、重写
    • 封装 dom方法/eventBus 对 dom 事件与自定义事件进行处理
    • 封装 ajax 实现请求方式的向下兼容
    • 封装异步队列处理请求/异步方法的时序问题
    • 封装 sass 预渲染方法以实现不同验证形式的 css 文件打包、雪碧图生成
    • 抽离公共方法作为公共库单独发布
    • 使用 jest 和 puppeteer 实现 e2e 测试
  • 成果：
    • 用户接入学习成本降低，验证形式更为多变/可定制性变强
    • banchmark 代码执行速度提升 20%
    • 交互流程较旧版减少 3 个请求，降低了整体复杂程度
    • 测试链路更加完善，打通自动化开发-测试-上线整体链路
  • 亮点：
    • 新版架构较旧版耦合更低，公共模块的抽离使得代码结构更清晰
    • 多种验证形式的验证码代码复用更高，打包效率更高
    • 由于 rollup 强大的 treeshaking，代码体积更低
    • 使用 es6 特性解决部分代码鲁棒性问题（例如箭头函数解决上下文问题）
    • 将 css 打包与 js 打包逻辑分离，解决问题更加专注
    • e2e 测试使得上线前可保证最小可用性，减少代码 UI 层面问题

Figma.Cool

  • 介绍： Figma.Cool 是一个致力于在国内推广 Figma （设计协同软件）的组织，我们完成了 Figma 的汉化工作，于19年 6 月 28 日上线了 Figma.Cool 资源站，持续开发了多款提高效率的 Figma 插件。
  • 站点：
  • 架构：
    • UI 资源站基础架构为 Nextjs + Koa + TS + Postgresql + Docker
    • Nextjs 使用 function Component + hooks + ts 完成基本功能的开发，采用 mobx 集中管理状态。
    • Koa 部分，利用 pg 中间件与数据库交互，实现 server 的 CURD 功能。
    • 开发完成之后通过 github 的 action 实现自动化部署至 aws 服务器，使用 DockerFile 生成镜像并启动容器映射出端口
    • 所有静态资源均交由 oss + cdn 托管。
    • 其余站点均由 SPA 框架开发部署，通过预渲染实现 SEO。
  • 亮点：