壁虎前端

# 朝润

# 壁虎找票客户端

# 时间

2021.08.13 - 2021.09.26

# 实现功能

  • 自动接单

# 收获

  • 待补充

# 分布式爬虫

# 时间

2021.07.08 - 2021.08.02

# 实现功能

  • 集成在 Electron 项目中，通过打开隐藏窗口的方式实现用户无感的爬虫服务
  • 全自动化登录同城和深度，上报登录结果，并维护登录状态
  • 实现前端代理，绕过反爬限制。建立 mqtt 连接，接收后端指令，在对应前端页面发送接口请求，并将请求结果返回给服务器

# 收获

  • 封装点击、鼠标操作、文字输入等 DOM 操作
  • ipc 通信 Promise 化，简化渲染进程和主进程的通信
  • 通过 partition 实现对多个账户的会话隔离
  • 通过 MutationObserver 实现对 DOM 变动的监听
  • 通过 Proxy 实现对某些 api 的访问控制，如在生产环境下访问 console.log 时不实际打印内容，调用 electron-log 的打印方法时将密码等敏感信息用星号代替
  • 实现访问跨域 iframe 的内容
  • 封装 Node.js 下载和缓存文件功能
  • 利用 webpack 对 preload js 单独打包
  • 实现对 XMLHttpRequest 请求和响应的拦截
  • 通过 electron-log 保存日志，以便生产环境调试
  • 通过飞书机器人上报异常信息，以便及时发现和处理

# 壁虎识票

# 时间

2021.06

# 实现功能

# 收获

  • 实现无边框窗口
  • 多窗口管理

# 包分配

# 时间

2020.11 - 2021.05

# 实现功能

  • 包括 web 版本和 Electron 版本
  • 实现自动抢票和贴现、签收解付等功能

# 收获

# 其他

  • 学习《浏览器工作原理与实践》

# 每周收获

# 20210816-20210820

  • 阅读 shepherd 源码并进行二次开发，封装成业务组件（壁虎找票客户端）
  • 阅读 electron-notify 代码并修复高度设置的 bug，增加超过最大消息数自动替换功能，完善界面（壁虎找票客户端）
  • 对浏览器的分层和合成机制及优化方式有了更深的理解

# 20210823-20210827

  • 加深了对虚拟 DOM 的理解

# 20210830-20210903

  • 了解 PWA，完成《浏览器工作原理与实践》课程的学习

# 20210906-20210910

  • 巩固原型和原型链相关知识

# 20210913-20210917

  • 加深了对原型和原型链的理解
  • 加深了对正则表达式的理解

# 20210920-20210928

  • 实现分布式爬虫 preload.js 的无感更新
  • 调研 Sentry，了解其部署和使用方式

# 20211008-20211015

  • 通过 webpack-obfuscator (opens new window) 插件实现分布式爬虫代码混淆，增大打包出来的代码的阅读难度
  • Sentry 配置自动上传 SourceMap，方便定位代码位置
  • 通过阅读 vue-cli-plugin-electron-builder 源码了解其打包流程和传参方式，从而优化识票据打包流程，通过配置 files 和 extraFiles (opens new window) 避免 SourceMap 文件和其他不必要文件打包到最终的 exe 文件中。通过 npx vue-cli-service electron:build --skipBundle 命令可以忽略打包渲染进程和主进程的过程，直接打包 Electron 应用

# 20211018-20211022

# 20211025-20211029

# 20211101-20211105

# 20211129-20211203

  • 再次学习 mixpanel 的 alias、identify 和 reset
  • vue3 学习和实践

# 2021206-20211210

  • 学习和实践 vue3 的 teleport 组件
  • 学习和实践 vue3 的自定义 hook
  • 初步了解 vue3 中二次封装组件库的组件的方法

# 2021214-20211217

  • 了解 iframe 和微前端方案的优缺点
  • 使用 postMessage 跟跨域的 iframe 进行通信

# 2021220-20211224

  • 熟悉了 vue3 中使用 h 函数和 jsx 相关的一些写法

# 2021227-20211231

  • 解决阿里云 mqtt 连接不稳定问题，不要用 [MQTT.js](https:// github.com/mqttjs/MQTT.js)，要用阿里云官方文档中提供的 SDK (opens new window)，虽然是比较久远的库，但是稳定性和兼容性更好

# 20220103-20220107

# 20220110-20220114

# 20220117-20220121

  • nginx 多页面配置

# 20220124-20220128

  • electron 增量更新
  • 了解 electron asar 文件原理

# 20220221-20220225

# 20220228-20220304

  • 新增一个 Gitlab Runner，减少部署排队时间
  • 优化 element-ui 自动部署脚本，部署私钥从环境变量获取
  • 优化深度网前后台打包流程
    • 添加 .dockerignore，忽略与打包无关的文件
    • 减少打包出来镜像的体积，从 1.4G 优化为 146M
    • 使用官方镜像，提高透明性和可维护性
    • 了解 shell 脚本子进程和异步
  • 了解 expect 工具

# 20220314-20220318

# 20220404-20220408

  • 了解了一下 next.js，用来搭建新官网

# 20220411-20220508

  • 修复 electron-store 初始化失败问题
  • 使用状态机模式开发远程协助功能
  • 修复经纪商页面跨域问题

# 202205-202209

  • 深度上线
  • 使用 Next.js 完成多个官网项目开发
  • common-js 使用 TS 完善后封装成 npm 包、单元测试完善，发布到 壁虎 npm (opens new window)
  • 鹰信项目开发
  • 熟悉了 React 和 TS，新项目统一使用 React + TS，小程序使用 Taro + React + TS
  • 重新部署了 CDN，加深了对 CDN 的了解
  • 优化 Gitlab CI 自动化部署方案，本地不存放私钥文件，而是通过变量的形式保存在 Gitlab 中，提高服务器的安全性
  • 自动化部署完成后通知到飞书（待优化）
  • 从 0 到 1 配置了两三个服务器的 nginx 和前端代码自动部署，加深了对 nginx 的了解，总结了一套实现简单的自动化部署方案
  • 在 AWS 上申请服务器、配置 nginx 环境和自动化部署，申请 SSL 证书并配置 FAYAF Capital Solutions (opens new window)

# 20220926-20220930

  • 编写高阶组件实现路由拦截，解决小天下小程序审核时能进入任意路由的问题
  • Eslint 自定义规则开发，实现在 pages 下的组件强制使用 checkAudit 高阶函数，未使用时会自动加上

# 20221008-20221014

  • 开发分布式爬虫滑块服务，并埋点分析，了解了更多 mixpanel 的用法
  • 利用 oss 压缩 (opens new window)参数提高分布式爬虫 ocr 识别速度
  • 了解 Echarts 的一些基础用法

# 20221017-20221111

  • 分布式爬虫破解网易易盾，通过模拟鼠标轨迹、使用第三方服务识别坐标等方式破解行为式验证码中的滑动拼图、文字点选、语序点选，图标点选暂未实现
  • 通过编写 webpack loader 统一替换 antd 图标
  • 开发 AutoLoading 组件实现点击约束

# 20221128-20221202

  • 使用 NestJS 开发部署通知服务，通过 Gitlab Webhook 统一将所有项目的部署结果通知到飞书
  • 使用 TypeDoc 自动生成公共库文档

# 20221205-20221209

  • 使用 Puppeteer + NestJS 开发票面生成服务

# 20221212-20221223

  • 使用 web worker + 内网上传优化票面生成速度，生成和上传50张正面时间从 3942ms 提升到 2071ms
  • 票面生成服务健康检测，发现异常时上报到飞书

# 20221226-20230113

  • 了解了 PostMan 的更多用法，学会了如何编写 PostMan 脚本，用于自动保存和发送 token、校验接口响应等
  • Nginx 配置移动端和电脑端自动双向跳转
  • 实现 Nest.js jwt 校验
  • 了解了 MongoDB 的基本用法，学会在 Nest.js 中对 MongoDB 的数据进行增删查改
  • 学习了 vs code 调试技巧，能对不同项目编写不同的调试配置

# 20230114-20230616

  • 用 puppeteer 爬取 fsys 什么值得看的内容，并且调用 ChatGTP 接口翻译
  • 完善响应式网站开发方案（React Hook + SCSS px2vw 函数）
  • 完善团队 VS Code 插件 Bihu FE Tools，添加以下功能：
    • 格式化或将 JSON 转为 TS 类型(json2ts)
    • SCSS 中 px2vw 自定义函数的支持
    • 组件重命名
    • 不仅生成代码片段，还会智能导入对应模块
更新时间: 2023年6月16日星期五晚上7点12分

← 荣胜 →