Before…

OAuth 2.0 通过授权机制，让第三方应用可以获取用户或者系统数据。

前后端在进行通信(或者称之为数据请求)时，需要在请求时携带用户 token，用来验证用户的登录情况减轻服务器压力。

OAuth 的核心作用就是向客户端颁发令牌(token)。

通常所说的令牌token，分为两种：客户端令牌(任何时候都能访问资源的凭证，通常由 client_id(身份id)/client_secret(密钥：只能保存到后端) 生成)、用户令牌(完成登录后生成)。

问题描述

前段时间，实现一个表单字段提交校验功能时碰到的一个有趣的问题…v-for的元素居然失去响应式了？what...开始怀疑人生 🙄🙄🙄

代码大致如下：

了解css-tree

CSSTree is a tool set for CSS: fast detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations. The main goal is to be efficient and W3C spec compliant, with focus on CSS analyzing and source-to-source transforming tasks.

为什么使用它？

最近项目上有个需求：提供一个界面化的css代码编辑器，管理员可以输入css代码配置修改表单/组件的一些默认样式，从而针对不同业务需求实现不同的界面呈现效果。

为了避免样式的全局污染，需要对配置的样式添加默认前置导航，通过属性选择器约束样式的生效范围。如果通过string的一些方法粗暴的对样式进行替换or正则匹配，有很大的局限性，同时也不符合规范。

思考再三，找到了css -> ast -> css.方案，并通过css-tree的API实现。

根据产品业务的区别，如果只是想实现样式自定义，不需要通过代码配置达到更强的交互，那么可以内置class，编写默认的一些style，用户通过在界面选择主题来实现该效果。参考百度amis

lerna是什么？

Lerna is a fast modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository.

lerna and nx的其他博客文章

为什么要用lerna?

官方解释：

Lerna 在 repo 中链接不同的项目，因此它们可以相互导入，而无需向 NPM 发布任何内容

Lerna 对任意数量的项目运行命令，它以最有效的方式、以正确的顺序执行它，并且可以将其分布在多台机器上

Lerna 管理您的发布流程，从版本管理到发布再到 NPM，它提供了多种选项来确保可以适应任何工作流程

结合工作中的实际体验，谈谈我的看法：

公司一般都有自己的 npm 私库，有很多的 package 相互之间存在或多或少的关联。随着业务需求的不断升级，我在维护这些 package 的时候就碰到了一个很操蛋的问题：比如我改了 packageA 然后发布，那么所有用到了 packageA 的其他 package，也要跟着升级 packageA 的依赖，然后再发布，过程显得很是繁琐，此时如果你的 package 是通过 lerna 管理，就可以很好的避免这个问题。

了解测试用例和单元测试

• 测试用例：是为某个特殊目标而编制的一组测试输入、执行条件以及预期结果，测试是否满足特定需求；

• 单元测试：(是测试的级别)。unit testing 针对某一个功能的[最小部分(单元)]测试，比如(函数？类？)的执行结果是否符合预期。

  不同的企业可能对不同测试级别有不同的称谓，比如单元测试、增量测试、集成测试、回归测试、冒烟测试….. 谷歌对此创立了自己的命名方式：小型测试(具体到某个函数？)、中型测试(多个模块之间交互)、大型测试(端对端？系统整体验证)。

为什么是eslint和prettier？

在ESlint推出--fix参数前ESLint并没有自动化格式代码的功能，要对一些格式问题做批量格式化只能用Prettier这样的工具。并且Prettier在代码风格的检测上比ESlint更全面，所以两者通常是结合在一起使用的。

对typescript代码进行linting时，有两个主要的linting工具可供选择：tslint、eslint，tslint是一个只能用于typescript项目的linter，而eslint同时支持typescript、javascript.

据typescript核心团队解释：ESLint 具有比 TSLint 更高性能的架构，并且后续在为typescript中linting集成时，只会关注eslint，另外官方自2019起已经弃用tslint，**TSLint has been deprecated as of 2019**

在 typescript 代码日常编写过程中，会经常性的遇到一些符号，这里对一些符号进行一个汇总。

例如：?、??、?.、!、_等一系列的符号，其中，除了!，其他都是js提供的，更方便的服务于ts。

类型查询操作符

typeof T； [类型查询操作符] 结果为 T 上已知的 公共属性类型的 联合。 'XXX' | 'YYY'...