# 前言

最近在面试的过程中有被问及到websocket的连接过程（简历中项目有使用到websocket），一时有点懵，以为是在问使用方式，后来确定了下是在问网络层面的连接过程，是如何进行的，以及http和socket的过程。

我只做过心跳和断网重连的一些基本使用，对原理层面知之甚少。对于简历中的项目涉及到的websocket技术还是属于了解的比较浅的，问题很有点大啊。总的来说对于简历中的技术应该还是要做到比较熟悉才行，项目和技术栈还是有必要好好准备一番的。

# 背景

最近在开发公司官网项目时，使用到了Eggjs+React的SSR方案，众所周知，官网等门户网站对于SEO和首屏优化非常重视，因此结合该场景考虑，最终决定使用SSR服务端渲染方案，也是在技术调研的时候发现了一个比较完善的基于eggjs封装的一个SSR框架，在初步尝试和测试了一段时间后，最终决定了这个方案。

想必大家都知道eggjs是基于koa封装实现的，而对于koa而言，最知名的莫过于他的洋葱模型中间件方案，这是一个很巧妙的设计，也是经常接触的一个知识点。因此对于其实现原理和运行逻辑也很值得我们进一步探索，做到知其然、知其所以然。

# JS类型

最新的 ECMAScript 标准定义了 8 种数据类型:

• 7种原始类型：Number、String、Boolean、Null、Undefined、Symbol、BigInt
• Object引用类型：Array、Object、Date、RegExp、Error、Map、Set、WeakMap、WeakSet，几乎所有通过 new 创建的，即构造函数类型

众所周知，JS是单线程的，但是其在浏览器中的具体运行机制是怎样的呢？什么是微任务什么是宏任务呢？本篇文章我们从整体宏观层面进行梳理和分享。

本篇文章主要结合我最近的一个真实项目的具体业务场景的思考总结，以及相关的实战经验分享，希望能够帮助大家对权限设计有一个更深入的了解。

技术栈方面使用的是vue3 + ts + vue-router + pinia，不过，权限设计的整体思路和技术并无很深的关联，不影响整体思路。

# 起笔

晃晃悠悠，一年又一年，光阴荏苒，日月如梭

这一年给我的感觉就是“快”，尤其的快，现在提笔写年终，但停下细想，仿佛2021新年目标才刚刚写完，而现在就已经来到了2022年...

微信通知，每天给女朋友发早安、情话、诗句、天气信息等~

现阶段开发 vue3 项目使用 vite + ts 应该已成为标准范式了吧，新的语法体验 vue composition api 再配合 script setup 谁用谁知道啊，开发和构建方面，vite 作为下一代构建工具，想必大家也有所了解，使用 ES6 module + ESbuild 支持本地开发，速度和效率起飞啊，就一个字——爽，对于 TypeScript，感觉都没必要说了，现在还没上车的赶紧的了~

# 介绍

一个使用 vite + vue3 + pinia + ant-design-vue + typescript 完整技术路线开发的项目，秒级开发更新启动、新的vue3 composition api 结合 setup纵享丝滑般的开发体验、全新的 pinia状态管理器和优秀的设计体验（1k的size）、antd无障碍过渡使用UI组件库 ant-design-vue、安全高效的 typescript类型支持、代码规范验证、多级别的权限管理~

WakaTime 是一个可以统计你在不同系统、语言、项目上写代码时长的工具。它支持多种 IDE、编辑器。

它只在你敲键盘时统计，因此得到的是写代码的时间。另外它会根据你打开的文件夹来判断你在哪个项目上。

目前也提供有Chrome 浏览器插件，可以统计网上冲浪时长，以及每个页面的在线时长 👀