have a good good study
index
· 阅读需 1 分钟
TODO
· 阅读需 1 分钟
术
· 阅读需 1 分钟
道
· 阅读需 11 分钟
道，侧重于根本性、指导性原则，代表事物的本源和规律。
common
- 切片组合思想（Fragment and Combination）
- 代码复用（Develop once, use everywhere）
路由（Router）
定义：
路由是指在应用中，根据特定的 URL 请求路径，将请求映射到相应的处理逻辑（例如控制器方法）。它是前后端通信的关键分，定义了应用程序 响应客户端请求的方式。
用途：
- 在前端：管理页面导航（如 React Router 或 Vue Router）。
- 在后端：处理 HTTP 请求，路由到对应的控制器（如 Express、NestJS 中的路由）。
相关概念：
- 动态路由： 根据路径参数动态匹配 URL（如 /user/:id）。
- 嵌套路由： 在一个路由中包含子路由（如 parent/child）。
- 路由守卫（Guard）： 用于限制特定路由的访问权限。
中间件（Middleware）
定义：
中间件是程序中一个用于拦截和处理请求或响应的函数。它可以在请求到达路由处理器之前，或者响应返回客户端之前，添加通逻辑（如日志记 录、认证检查等）。
用途：
- 在 Express 中，定义请求处理的管道。
- 在 NestJS 中，中间件是特定于模块的。
相关概念：
- 请求管道： 请求在到达最终路由之前通过的中间件队列。
- 全局中间件： 应用程序中对所有请求生效的中间件。
- 错误处理中间件： 专门用于捕获和处理错误的中间件。
拦截器（Interceptor）
定义：
拦截器用于在处理请求或响应时，拦截并对其进行预处理或后处理。它通常用于修改数据、日志记录、缓存、转换等。
用途：
- 在 NestJS 中，拦截器用于扩展请求管道的功能，例如对响应进行数据格式化。
- 在前端（如 Axios 拦截器），用于在 HTTP 请求或响应时统一添加操作。
相关概念：
- 过滤器（Filter）： 专门用于捕获异常或过滤特定数据。
- 钩子（Hooks）： 用于在特定生命周期中执行操作。
装饰器（Decorator）
定义：
装饰器是一种特殊的函数，用于在类、方法、属性、参数等上动态添加元数据或功能。它是元编程的一部分。
用途：
-
在 TypeScript 中，装饰器用于添加类型信息或行为（如 @Component）。
-
在 NestJS 中，用于定义控制器、路由等（如 @Controller, @Get, @Inject）。
相关概念：
-
元数据（Metadata）： 描述对象信息的数据（如 Reflect-metadata）。
-
注解（Annotations）： 装饰器的一种具体应用，常见于 Java 和 Spring。
依赖注入（Dependency Injection，DI）
定义：
依赖注入是一种设计模式，指将对象的依赖（例如服务或配置）从外部传递到对象中，而不是对象自己创建依赖。
用途：
- 提高代码可测试性和模块化。
- 在 NestJS 或 Angular 中，通过构造函数注入依赖（如服务）。
相关概念：
- 服务容器（Service Container）： 管理依赖关系的核心机制。
- 注入器（Injector）： 提供依赖实例的工具。
控制反转（Inversion of Control，IoC）
定义：
控制反转是一种设计原则，将对象的创建和管理的控制权从代码中移交给框架或容器。它是依赖注入的基础。
用途：
- 在 NestJS 中，通过 IoC 容器管理服务的实例化。
- 提供松耦合的设计。
相关概念：
- 工厂模式（Factory Pattern）： 通过工厂方法创建对象。
- DI 容器： IoC 的核心工具，用于自动注入依赖。
关注点分离（Separation of Concerns，SoC）
定义：
关注点分离是一种设计原则，旨在将系统的不同职责分离到独立模块或层次中，以便更容易维护和扩展。
用途：
- 将前端和后端逻辑分开。
- 在 MVC（Model-View-Controller）架构中分离模型、视图和控制器。
相关概念：
- 单一职责原则（SRP）： 每个模块或类只负责一个职责。
- 模块化设计： 将系统划分为多个独立模块。
- 分层架构： 例如三层架构（表示层、业务逻辑层、数据层）。
模块化（Modularity）
定义：
模块化是一种软件设计技术，将系统拆分为多个独立且高度内聚的模块，每个模块封装其特定功能，并通过定义良好的接口与其他模块交互。
用途：
- 代码组织：
-
提高代码的可读性、可维护性。
-
使项目结构清晰。
- 团队协作：
-
不同团队可以独立开发模块，降低耦合。
- 复用性：
-
通过封装和接口实现，模块可以在多个项目中复用。
- 调试和测试：
-
独立模块可以单独测试，降低复杂性。
相关概念：
- 模块（Module）：
- 封装功能的独立单元，包含代码和资源（如 ES Modules、CommonJS 模块）。
- 例如在 JavaScript 中，import 和 export 用于模块化。
- 封装（Encapsulation）：
- 将实现细节隐藏在模块中，仅暴露必要接口供外部使用。
- 组件化（Componentization）：
- 模块化的一种具体实现形式，常用于前端开发（如 React、Vue 中的组件）。
- 分层架构（Layered Architecture）：
- 通过逻辑分层（UI 层、业务逻辑层、数据层）实现模块化。
AOP（面向切面编程，Aspect-Oriented Programming）
定义：
AOP 是一种编程范式，旨在通过分离横切关注点（Cross-Cutting Concerns）来增强关注点分离。横切关注点是指影响多个模块但不属于主要 业务逻辑的功能，例如日志记录、安全检查、事务管理等。
用途：
- 增强关注点分离：
-
将非核心业务逻辑（如日志、缓存）从主要代码中提取出来。
- 简化代码：
-
避免在多个地方重复实现横切关注点，减少代码冗余。
- 动态扩展功能：
-
可以在不修改原代码的情况下动态添加行为（例如通过装饰器、拦截器）。
- 提高代码可维护性：
-
将关注点集中管理，使核心逻辑更加清晰。
相关概念：
- 横切关注点（Cross-Cutting Concerns）：
- 功能性需求，通常跨越多个模块（如安全性、事务性）。
- 切面（Aspect）：
- 表示横切关注点的实现单元（如日志切面、权限切面）。
- 切入点（Join Point）：
- 代码中允许横切逻辑插入的位置（如方法执行、属性访问）。
- 通知（Advice）：
- 在切入点处执行的操作（如方法前执行、方法后执行）。
- 装饰器和拦截器：
- 在 AOP 中实现横切关注点的常用工具。
微服务（Microservices）
定义：
微服务是一种架构风格，将单体应用拆分为多个独立的小服务，每个服务负责特定领域，具有独立的数据库、代码库和部署生命周期。服务之间通过 轻量协议（如 HTTP、消息队列）通信。
用途：
- 解耦：
- 各服务独立运行、部署和扩展，降低模块间的依赖性。
- 技术灵活性：
- 不同服务可以采用不同的技术栈和编程语言。
- 独立部署：
- 单一服务的修改不会影响整个系统，支持快速迭代。
- 弹性扩展：
- 根据流量需求，独立扩展某些服务（如只扩展用户服务）。
- 高可用性：
- 某些服务失败时，其他服务仍可运行，减少系统崩溃风险。
相关概念：
- 单体架构（Monolithic Architecture）：
- 与微服务对立，所有功能放在一个整体中。
- 适合小型项目，但扩展性和维护性差。
- 服务发现（Service Discovery）：
- 微服务动态注册和寻找其他服务的机制。
- API 网关（API Gateway）：
- 微服务的入口，负责路由请求、认证等功能。
- 轻量通信协议：
- 服务之间通过 REST、GraphQL 或消息队列（如 RabbitMQ、Kafka）通信。
- 容器化（Containerization）：
- 微服务通常通过容器（如 Docker）进行封装和部署。
Front End
- 设计Token
Back End
- 服务启动模式。前台启动（命令行）、后台启动（-d detached）
docker run my-service
docker run -d my-service
个人简历-前端开发工程师
· 阅读需 1 分钟
个人介绍
教育经历
工作经历
能力介绍
项目经历
vscode-note-manager
· 阅读需 1 分钟
give me a demo about developing a vscode extension include follow function:
Function points
- Explorer
- select and show a doc with a view name note-manger, height 200px
- shortcut key(option + command + N)
- Activity Bar
- File directory tree
- Select multi file/folder
- Add folder/file
- Delete folder/file
- Editor
- Rich text(tinymce)/Plain text
选择文件夹/文件，并筛选其中的文本文件和图片，并存在本地
// 自定义文件树结构
type IFileItem = {
path: string
isFolder: boolean
children: IFileItem[]
}
// vscode 文件数据结构
type FileItem = {
collapsibleState: 0,
label: 'code-frament.md',
data: '/Users/fanghaoming/Documents/docs/code-frament.md',
resourceUri: Zo {
scheme: 'file',
authority: '',
path: '/Users/fanghaoming/Documents/docs/code-frament.md',
query: '',
fragment: '',
_formatted: null,
_fsPath: null
},
command: {
command: 'fileTreeExplorer.itemClicked',
title: 'Item Clicked',
arguments: [ [Circular *1] ]
},
iconPath: sr { id: 'file', color: undefined }
}
前端学习网站
· 阅读需 1 分钟
前端杂记
· 阅读需 1 分钟
调试
- 第三方工具
一些常见场景
- 多语言
- 多主题（风格化）
- 数据层（graphQL）
- 微前端
「通过 js 在一个DOM容器中插入或更新节点树」
- 生命周期
- 通信（event bus）
- 调度（初始化、销毁等）
- js、css、webStorage隔离
- 服务端渲染
素养
杂
- 衡量代码的复杂度（圈复杂度Cyclomatic Complexity)
- 控制流图。（条件语句、循环语句）
- 递归深度
如何站在前端角度检查设计稿
· 阅读需 4 分钟
在需求开发过程中，设计稿的质量直接影响到开发效率和最终产品的效果。如果前端开发人员在拿到设计稿时未及时发现问题，可能会导致开发中途的返工和延误。
本文将从前端角度阐述如何全面、高效地检查设计稿，减少需求开发过程中因设计问题造成的反复沟通和调整。
设计稿宽度问题
- PC端：1920px
- 移动端：750px
- 对于需要全屏的版块，如首页顶部的banner，设计稿需按照固定的宽高设计。如PC端：1920 * 1080。因为背景图片会拉伸以适应全屏，设计时需考虑图片元素的位置。
切图问题
- 点击设计稿上需要切图的元素，确保元素可以选中、切图
包括但不限于以下情况需要切图：
- 艺术字
- 多个边框合成的一个边框
- 复杂SVG图标：图标或装饰性元素过于复杂，SVG 文件体积过大，影响性能
- 响应式图片：需要在不同屏幕尺寸上加载不同大小的图片，以优化性能。这要求同样宽高比的图片，PC端和移动端需要各自切图
- 渐变背景：CSS 无法实现的复杂渐变（如多层次颜色变化或不规则渐变）
- 纹理背景：设计中使用了细腻的纹理或复杂图案，CSS 难以实现
- 透明背景：需要背景图片具有部分透明效果，且不易用 CSS 或 SVG 模拟
元素选中问题
- 确保每个层级的元素都可选中
- 确保选中的元素的标注信息正确，包括尺寸、间距、颜色值、字体属性等。
字体问题
- 检查是否使用了免费可商用字体范围之外的字体
- 如果字体库不存在设计稿中用到的字体，需要提供对应的字体文件
颜色/色系问题
- 颜色规范：确认设计稿中的颜色是否来源于设计系统或品牌规范，避免临时添加的颜色
交互问题
如设计稿中没标明，默认无交互
- 确保所有交互式组件（如按钮、输入框、复选框）在设计稿中展示了不同状态（默认、悬停、激活、禁用）
多语言导致的排版问题
- 需要考虑切换语言后不同长度的文本对于排版、布局的影响
模块复用
- 尽量使用此前已在设计稿中用过的模块（如按钮、输入框、复选框）
写在最后
- 设计师应导出一份设计稿中的切图，以初步检查设计稿的切图问题
- 需求方应根据其需求检查设计稿中的交互样式
工具包
· 阅读需 1 分钟