Wang's Blog-CSDN博客

原创设计模式: 行为型之备忘录模式(13)

备忘录模式（Memento Pattern）是一种行为设计模式，它允许在不破坏封装性的前提下捕获一个对象的内部状态，并在对象之外保存这个状态这样以后就可将该对象恢复到原先保存的状态。这种类型的设计模式属于行为模式在备忘录模式中，主要涉及三种角色：发起人（Originator）角色记录当前时刻它的内部状态，并可使用备忘录恢复内部状态发起人可以根据需要决定备忘录存储发起人的哪些状态备忘录（Memento）角色负责存储发起人对象的内部状态，并可防止发起人以外的其他对象访问备忘录。

2024-04-11 23:45:00 584

原创设计模式: 结构型之装饰器模式(12)

装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许在不改变现有类的情况下，动态地给对象添加新的职责或功能在 TypeScript 中，装饰器模式可以通过装饰器（Decorators）这一特性来实现装饰器在 TypeScript 中是一种特殊的声明，它可以附加到类声明、方法、属性或参数上装饰器使用 @expression 的形式，其中 expression 必须求值为一个函数，该函数将在运行时被调用，并且会被传入有关其装饰的声明的信息。

2024-04-11 21:45:00 781

原创设计模式: 结构型之外观模式(11)

外观模式（Facade Pattern）是一种结构型设计模式，它为复杂的系统、程序库或框架提供一个简单（但有限）的接口这种模式的核心理念是隐藏系统的复杂性，仅对外暴露一个简化的接口，使得外部代码能够更容易地与系统进行交互。

2024-04-11 19:15:00 516

原创设计模式: 结构型之代理模式(10)

代理模式（Proxy Pattern）是一种结构型设计模式，它提供了一种将类的功能委托给另一个类的机制在代理模式中，代理类（Proxy）充当客户端与被代理类（Real Subject）之间的中介，客户端通过代理类来间接地访问被代理类1 ) 代理模式的核心思想代理模式的核心思想是为其他对象提供一个代理以控制对这个对象的访问代理类负责在客户端与被代理类之间建立一种关系，使得客户端能够间接地访问被代理类通过这种方式，我们可以在不修改原有代码的情况下，增加额外的功能，如权限校验、日志记录、性能监控等。

2024-04-11 12:30:00 666

原创设计模式: 结构型之桥接模式(9)

桥接模式（Bridge Pattern）是一种结构型设计模式，它将抽象部分与它的实现部分分离，使得它们都可以独立地变化在TypeScript中，这种模式可以通过接口和类的组合来实现，下面将详细解释桥接模式及其在TypeScript中的应用1 ) 桥接模式的核心思想桥接模式的核心在于将抽象与实现解耦，使得它们可以独立变化通过组合的方式，而不是继承，建立抽象类与实现类之间的联系这种模式使得抽象部分和实现部分可以沿着各自的维度进行扩展，而不会相互影响2 ) 桥接模式的结构。

2024-04-11 08:45:00 1012

原创设计模式: 结构型之适配器模式(8)

适配器模式（Adapter Pattern）是一种结构型设计模式，它允许将一个类的接口转换成客户端所期望的另一种接口，从而使得原本不兼容的类可以一起工作在开发中，适配器模式经常用于解决接口不兼容、第三方库或组件的集成等问题适配器模式通常用于以下几种情况当你想使用现有的类，但是其接口不符合你的需求当你想创建一个可以重复使用的类，可以与其他不相关的类或遗留系统协同工作。

2024-04-11 07:00:00 844

原创设计模式: 结构型之享元模式(7)

享元模式（Flyweight Pattern）是一种用于优化性能的结构型设计模式，它通过共享对象来减少内存中对象的数量享元模式通常用于当系统中存在大量相同或相似对象时，通过共享这些对象的状态来减少内存消耗我们会充分利用类型系统的优势来确保内部分享状态和外部状态的有效区分。

2024-04-11 00:00:00 1423

原创设计模式: 结构型之组合模式(6)

组合模式（Composite Pattern）是一种结构型设计模式，它允许你将对象组合成树形结构以表示“部分-整体”的层次结构组合模式使得客户端对单个对象和复合对象的使用具有一致性在 TypeScript 中，组合模式通常涉及到一个接口（或抽象类），它定义了用于操作组件的方法然后，有两个具体的类实现这个接口一个是叶子节点类，它表示树形结构中的基本对象另一个是组合类，它表示包含其他组件的复合对象。

2024-04-10 21:45:00 874

原创 consul: 集群搭建和数据中心通信

对于当前的两台机器和单机部署的场景，每台机器上的Consul实例已经是其数据中心内的唯一服务器节点，因此它们不会通过WAN Gossip层进行通信。在大多数情况下，server节点需要这些配置来确保跨数据中心的通信，而client节点则主要关注与本地server节点的通信。在多数据中心的Consul配置中，client和server的配置会有所不同，具体取决于它们在架构中的角色和功能。同样的，并在 dc2 的 server.json 中添加指向dc1的配置，这里不再赘述。

2024-04-05 00:55:18 825

原创 nginx: 集群环境配置搭建

在构建和管理NGINX集群时，有许多关键的注意事项，如下。从这里可以看到，每个端口都可以自行配置管理。4 ）服务器的硬件与配置。2 ) 目录结构配置。3 ）网络带宽与延迟。

2024-04-04 19:30:00 1172 1

原创 Nginx: proxy_set_header 与 add_header 区别

proxy_set_header 和 add_header 是 Nginx 配置中两个不同的指令, 它们各自有不同的用途proxy_set_header 指令用于修改转发到代理服务器（通常是后端应用服务器）的 HTTP 请求头它允许您设置或覆盖请求头中的字段，以便后端服务器能够接收正确的信息或根据这些信息做出响应例如，有时可能会使用 proxy_set_header 来设置 Host 头，这样后端服务器就知道它正在为哪个域名提供服务有时候，还可以设置 X-Real-IP 和 X-Forwarded-

2024-04-01 20:59:42 686

原创 Typescript高级: 函数重载和constructor重载

在 TypeScript 中，类的重载主要涉及到方法的重载（Overloading），而很少涉及构造函数的重载因为 TypeScript 的类构造函数不支持像一些其他语言（如 C++ 或 Java）那样的传统意义上的重载类的构造函数（constructor）本身并不支持传统意义上的重载，因为构造函数只有一个实际的实现但是，可以通过为构造函数提供不同的参数类型或数量来模拟构造函数的重载效果这通常是通过使用联合类型（union types）和类型守卫（type guards）来实现的。

2024-03-27 21:08:40 832

原创 Typescript高级: is 类型守卫

在 TypeScript 中，is关键字主要用于类型守卫（Type Guards）类型守卫是一种表达式，它执行一些运行时检查，并缩小变量的类型范围is关键字通常与类型断言一起使用，以提供更精确的类型信息。

2024-03-27 20:36:34 332

原创 Github: Github actions自动化工作原理与多workflow创建和部署

参考：https://docs.github.com/en/actions/learn-github-actions/environment-variables。可以看到，在里面可以使用环境变量和自定义变量, 同时，类似 jobs 下可定义多个任务，比如再加一个 Test2。在项目目录下新建 .github/workflows 目录, 在里面新建 test.yml。如果没有触发，可能由于提交到真实的主机上，或workspaces 目录或具体配置错误。上面的简单示例可以很明白的看清楚会发生什么。

2024-03-17 11:20:30 894

原创 Jenkins: 配合docker来部署项目

测试将jenkins构建后的项目部署到docker的nginx镜像中nginx 镜像内的默认目录在 /usr/share/nginx/html将待部署项目存放在 /usr/share/nginx/html 项目名称目录在Mac环境下的 jenkins系统中，工程项目默认的路径在 ~/.jenkins/workspace/项目名称目录

2024-03-16 21:38:41 553

原创 Jenkins: 配置自动化发布脚本

在Jenkins的一个工程项目任务中, 点击左侧配置栏在下面的 Build Steps 中，点击上面的可用的环境变量列表找到里面有一个 WORKSPACE 的变量这个变量指向我们的jenkins下工程项目源码的目录需要把这个变量利用起来

2024-03-16 17:49:31 650

原创 Jenkins: 搭建Jenkins服务，调通Webhook链路

成功后，每次触发push, 就会在 Recent Deliveries 中添加一条 ping 的记录。当在本地项目中提交并推送代码到 github 远程的时候, 可以看到 smee 终端出现了一条记录。而 github 的webhook Recent Deliveries 中也出现了一条记录。接下来，通过 webhook 触发的时候，触发的是通过本机构建的。同时，jenkins 项目任务中也有一条新的构建任务生成。这些就是我们想要的结果, 说明这条链路已经打通了。5 ）Jenkins 的工作流配置。

2024-03-16 14:58:34 1061

原创 Go微服务: 基于GRPC结合Consul实现微服务调用

刷新发现 127.0.0.1:8500 这个 consul 注册中心面板出来了一个新的服务。以上的调用，可以进行适当的封装来满足不同业务的调用，仅供演示。主要关注 main 函数中，注册consul服务相关代码。当然结合数据库操作封装功能完成闭环调用，不再赘述。新建 demo/server/main.go。新建 demo/client/main.go。发现服务端，客户端控制台都打印输出出来了。在 demo/client 下执行 $

2024-03-11 22:12:50 756

原创 Go微服务: 基于Go Micro框架实现微服务调用

在具体的项目开发过程中，开发者聚焦的是业务逻辑的开发和功能的实现大量的环境配置，调试搭建等基础性工作会耗费相当一部分的精力因此有必要将微服务架构中所涉及到的，相关的解决方案做集中管理和维护Go Micro 帮助我们解决了大部分上述问题，它是一个简化分布式开发的微服务生态系统该系统为开发分布式应用程序提供了高效，便捷的模块构建, 主要目的是简化分布式系统的开发它默认实现了consul 作为服务发现，通过http进行通信，通过protobuf和json进行编解码

2024-03-10 22:11:45 1275 2

原创 Go微服务: 基于ProtoBuf实现GRPC的微服务调用

运行起来这个客户端，即可看到客户端打印出来的服务端回复信息，同时服务端自身也打印出来了。新建 demo/server/main.go。新建 demo/client/main.go。

2024-03-10 13:41:19 901

原创 Go微服务: 基于ProtoBuf实现序列化和反序列化

关于 protoBuf 参考：选择合适的版本安装后注意检查环境变量安装后，查看版本本机安装 protobuf的件protoc-gen-go插件和protoc-gen-go-grpc插件这个插件把 protobuf 文件转化为 go 文件目前这个 protoc-gen-go 插件包安装可能会有问题，跟随我的步骤来解决这个包按照上述命令安装后，不会在, 则进行检查 go env 中的GOBIN查看 $go env，看下GOBIN是否为 “”, 如果如此，则进行设置，类似。

2024-03-09 15:42:04 608

原创 Go微服务: 基于net/rpc/jsonrpc模块实现微服务跨语言调用

Golang 提供库来实现rpc方法采用 json 方式进行数据编解码，支持跨语言调用这里演示了，基于go语言为服务端，nodejs 和 golang 为客户端的3种示范注意，上面 nodejs版本中的 params 的格式与 golang 中的区别标准库的RPC默认采用Go语言特有的gob编码，没法实现跨语言调用golang官方还提供了 net/rpc/jsonrpc 库实现RPC方法JSON RPC采用JSON进行数据编解码，因而支持跨语言调用。

2024-03-08 17:17:39 1136

原创 Go微服务:基于net/rpc模块实现微服务远程调用

这里在 client 项目目录中，新建一个 main.go 文件。编辑 client/main.go 文件。新建 client 目录，后执行 $2 ）添加客户端退出时的关闭连接处理。1 ）要连接的话，首先要建立连接。

2024-03-07 21:44:50 769

原创前端架构: 脚手架通用框架封装之添加测试框架(教程六)

jest 默认集成了 babel, 我们利用这个特性，创建 babel 的配置文件，新建 abc-cli/packages/cli/babel.config.cjs。之后，在 abc-cli/packages/cli/package.json 中的 scripts 进行修改。现在就可以继续完善了，修改 abc-cli/packages/cli/再次在 abc-cli/packages/cli 目录下，执行 $安装 babel, 在 abc-cli 目录中，$在 abc-cli/packages/cli/

2024-03-07 15:17:39 913

原创前端架构: 脚手架通用框架封装之CommonJS和ESM混合开发兼容解决(教程五)

1 ）未指定 package.json 中的 type, 但是使用了。3 ）ESM 去加载其他ESM模块时会有找不到模块的报错。3 ）CommonJS 和 ESModule 混用。3.1 在 CommonJS 中引用 ESM。3.2 在 ESM 中引用 CommonJS。2 ）require 语法无法加载ESM模块。

2024-03-03 21:36:52 1189

原创前端架构: 脚手架通用框架封装之启动检查功能开发(教程四)

接上文，仍旧在 abc-cli 项目中参考：https://blog.csdn.net/Tyro_java/article/details/136431320现在要在脚手架启动前要做一些逻辑，可以在 hook 钩子函数中去书写比如，进行node版本的对比，使用 semver 工具在 abc-cli 目录下，执行 $ npm i semver -w packages/cli

2024-03-03 16:04:01 776

原创前端架构: 脚手架通用框架封装之日志功能封装(教程三)

同样，也可以添加日志的level功能，在 abc-cli/packages/utils/lib/log.js 中添加。在 abc-cli/packages/cli/lib/index.js 中的module.exports第一行修改为。把 abc-cli/packages/utils/lib/utils.js 重命名为 index.js, 并编辑。同样，可以根据条件来做这块，在 abc-cli/packages/utils/lib/log.js 中。在 abc-cli 目录下创建 utils 包，$

2024-03-03 14:26:01 1115

原创前端架构: 脚手架通用框架封装之脚手架注册和命令注册开发(教程二)

接上文，仍旧在 abc-cli 项目中，参考：https://blog.csdn.net/Tyro_java/article/details/136381086，之前初始化的时候，使用的是 yargs, 现在我们想要使用 commander

2024-03-02 20:38:21 1063

原创解决 MacOS Sonoma 14 系统下修改用户名无法进入系统的历史Bug

在MacOS中如果在系统偏好设置/用户和群组中尝试修改用户名或用户ID，当且仅当只有一个管理员账号的时候重启，就可能面临到无法进入操作系统，即使出现了登录框，但是一直是 loading状态在这个期间，你有可能因为人的正常思维修改用户名的同时也修改了用户对应的路径官方其实知道这块会有问题，在文档上也给出过警告提示，如下但是这类操作是非常敏感而且是有风险的，但是大家要理解小白用户有恐怖的破坏力。

2024-03-02 12:58:09 999

原创前端架构: 脚手架通用框架封装之入口文件开发(教程一)

因为之前在 cli 包内执行了 npm link, 所以，这里一定会走 else。到 abc-cli/packages/cli/package.json 中修改。新建文件 abc-cli/packages/cli/lib/index.js。新建 abc-cli/packages/cli/bin/cli.js。修改 abc-cli/packages/cli/bin/cli.js。现在为cli包添加依赖, 在顶层 abc-cli 目录下执行。在 abc-cli/packages/cli 中执行 $

2024-02-29 21:15:15 349

原创前端架构: 脚手架包管理工具之lerna的全流程开发教程

Lerna 文档，https://www.npmjs.com/package/lerna，https://lerna.js.org ，使用 Lerna 帮助我们做包管理，并不复杂，中间常用的命令并不是很多，这里是命令直达：https://lerna.js.org/docs/api-reference/commands

2024-02-29 17:05:26 1939

原创前端架构: 脚手架之包管理工具的案例对比及workspaces特性的使用与发布过程

vue-cli 这个脚手架使用 Lerna 管理，它的项目显得非常清晰，在 vue-cli 中包含很多 package 点开进去，每一个包都有package.json，它里面有很多项目，再没有 Lerna 之前去维护和管理这么多包是会非常困难的，而 webpack 至今还没有用任何的包管理工具，在其 lib 下会有非常多的模块，而且它还自己写了很多脚本来进行管理各种功能

2024-02-28 21:03:08 1496

原创前端架构: 脚手架之多package项目管理和架构

通常来说，当一个项目变大了以后，我们就要对这个项目进行拆分，在前端当中，对于项目进行拆分的方式，通常把它称之为javascript包管理，需要使用一个工具叫做 npm (Node Package Management)，它是使用nodeJS来对包进行一个管理，用了这个包管理以后，项目就可以以大化小，把一个复杂的项目拆分成若干个小的项目，如何把一个大的项目进行一个拆分

2024-02-28 13:37:37 1046

原创前端架构: 脚手架工具rxjs的快速上手应用

文档：https://www.npmjs.com/package/rxjs。Weekly Downloads 44,474,389 (动态数据)rxjs 是一个异步的库和Promise是非常的相似。这个库看起来并不复杂，但是会给我们带来很多方便。比如在inqury源码中的处理，这里不过多叙述。说明这个库也是非常的流行。

2024-02-27 20:02:43 274

原创前端架构: 脚手架命令行交互核心实现之inquirer和readline的应用教程

核心目标：实现命令行行交互，如List，命令行的交互呢比命令行的渲难度要更大，因为它涉及的技术点会更多，它涉及以下技术点：键盘输入的一个监听 (这里通过 readline来实现)，计算命令行窗口的尺寸，清屏，光标的移动，输出流的静默 (我们输出的内容, 不让它去输出到当前的这个终端中)，借助输入输出流，引出输入输出流的一个监听以及事件库 events，ansi escaped code 转义字符，命行交互其实是有一定复杂度的, 在这个过程中，最重点的库和命行交互最重点库是两个 readline 和 inq

2024-02-27 18:11:19 1415

原创 Nestjs框架: 可集成在Nestjs上的日志模块pino和winston的使用

两个第三方的包：winston, pinowinston好处：DailyRotateFile 方便winston缺点：是需要在自己手动加入日志，, 麻烦pino的好处：开箱即用pino的缺点：配置没有winston丰富Nest官方内置的日志，够用，但是不详细关于选择懒人用pino, 而且性能较高用 winston，一般日志手动加，方便调试。

2024-02-25 23:12:20 786

原创 Nestjs框架: 日志和官方日志

1 ）如果项目中，使用 typeORM，需要关闭，日志开关如下。2 ）关闭整个程序的日志。3 ) 在Nestjs中记录日志。4 ）在控制器中使用。

2024-02-25 17:56:44 479

原创 React18源码: Fiber树的初次创建过程图文详解

首先我们有一个探寻的过程，首先探寻到App，然后从App到div，再到 header，发现没有子元元素了所以到 Content，到Content之前会做一件事情，就是把它自己需要的dom，在内存中创建出来包括包含的哪些属性也创建出来，生成一个effect的一个属性，合并到div里面去这个就是说白了，探寻到header, header进行回溯，我在内存中创建了一些东西因为这个在更新的时候要用，总得找个地方存起来，存起来的东西就叫做 effect存在哪里呢？

2024-02-25 14:23:28 1374

原创 React18源码: Fiber树中的优先级与帧栈模型

针对fiber对象或update对象，只要它们的优先级（如：fiber.lanes和update.lane）比渲染优先级低，都将会被忽略。在前文 double buffering 中分析过，HostRootFiber.alternate 是正在构造的fiber树的根节点。可以看到，无论是应用初始化或者发起组件更新，创建update.lane的逻辑都是一样的。此处返回的lanes会作为全局渲染的优先级，用于fiber树构造过程中。所以每次fiber树构造是一个独立的过程，需要独立的一组全局变量。

2024-02-24 12:19:53 769

原创 React18源码: Fiber树中的全局状态与双缓冲

从React工作循环的角度来看，整个构造过程被包裹在fiber树构造循环中（对应源码位于ReactFiberWorkLoop.js).比如说：Legacy模式下的首次更新，不会经过调度中心（第2阶段）而是直接进入fiber树构造（第3阶段）.在源码中，大部分变量都带有英文注释（读者可自行查阅），此处只列举了fiber树构造循环中最核心的变量。1 ）构造过程中，fiberRoot.current 指向当前界面对应的fiber树。fiber树的构造过程，就是把ReactElement转换成fiber树的过程。

2024-02-24 10:13:00 1091

空空如也

空空如也