木灵鱼儿

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 适配器模式

前言适配器模式是一种结构型设计模式，它允许对象在不改变对象接口的前提下，在不兼容的系统之间进行交互。适配器模式通常用于将已有的类的接口转换为另一个接口，以便系统中的其他组件可以与之交互。在适配器模式中，通常涉及三个角色：目标(Target)接口：当前系统期望使用的接口，它定义了客户端所需的特定域的操作。需要适配的类(Adaptee)：已存在的类，其接口不符合目标接口的要求。适配器(Adapter)：实现目标接口，并在内部封装有一个需要适配的对象实例。适配器负责接收调用并将其转换为对适配对象的接口调用。适配器模式往往不是一开始就会去使用的，因为没有人能知道未来会发生了什么，使用它往往是因为...

1608 4 0

JavaScript模式适配器模式

JavaScript 状态模式

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 状态模式

前言状态模式是一种行为设计模式，用于在一个对象的内部状态改变时改变其行为。这种模式通过将每个状态封装成独立的类，并将动作委托到代表当前状态的对象，从而实现状态与行为的分离。状态模式的组成三个主要部分：环境类（Context）：维护一个指向当前状态对象的引用，并将所有与该状态相关的工作委托给它。抽象状态类（State）：定义一个接口以封装与环境类的一个特定状态相关的行为。具体状态类（Concrete State）：实现抽象状态类的接口的类，为具体状态提供了行为的实现。说白了就是将状态和状态具体的逻辑封装成一个个状态对象，通过抽象状态类统一接口方便调用，我们通过事件或者其他去触发的是环境类上...

1691 0 0

JavaScript模式状态模式

JavaScript 装饰者模式

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 装饰者模式

前言装饰者模式是一种经典的设计模式，它允许向对象动态地添加额外的功能。这种模式通过创建装饰类来包裹原始类的实例，从而达到增强原始类功能的目的，同时不影响原始类的结构。装饰者模式在设计之初是想称为包装器模式的，因为从结构上看，这种说法更加符合它，通过一个对象包裹另一个对象，甚至多个对象进行嵌套。在JavaScript中实现一个装饰者模式是非常简单的一件事，因为是一本动态语言，它都不用像java那样需要写一个类来包装源对象，最简单的做法就是直接改写对象的原属性，在实际的代码中，常常用函数来进行实现装饰器模式。 var obj = { name: 'sven', ...

1840 1 0

JavaScript模式装饰者模式

JavaScript 中介者模式

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 中介者模式

前言中介者模式（Mediator Pattern）是一种行为设计模式，其主要目的是降低多个对象间的通信复杂性。这种模式提供了一个中介者对象，这个对象通常封装有具体对象之间交互的方式，使得对象之间不需要显式地相互引用，从而使其耦合松散，可以独立地改变它们之间的交互。中介者模式就是为了解耦多个对象之间的关联，让他们不在相互依赖，而是依赖一个公共的对象，这个对象就是中介者。中介者模式优化后：中介者模式例子：购买商品我们有一个手机购买页面，手机目前配置选项有：颜色，我们需要根据用户选择的颜色和购买数量，来控制购买按钮是否可以点击，已经库存是否足够。<body> 选择颜色: &...

1394 63 0

JavaScript模式中介者模式

JavaScript 职责链模式

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 职责链模式

前言职责链模式，它为请求的发送者和请求者之间实现了解耦，他将具体的请求者连成一条链，并沿着这条链依次处理请求，直到有一个对象处理它为止。这么说可能不好理解，其实就是将复杂的条件判断进行了解耦处理，具体我们看下面的例子。商城购买我们现在有一个优惠活动，如果用户交了500元定金，他在购买的时候可以收到100元优惠卷，如果是交了200元定金则收到50元优惠卷，如果没有定金，那就没有优惠卷，库存有限的情况下不一定保证能买到。假设我们有这三个参数：orderType：表示订单类型（定金用户或者普通购买用户），code 的值为 1 的时候是 500 元定金用户，为 2 的时候是 200 元定金用户...

1506 0 0

JavaScript模式职责链模式

JavaScript 享元模式

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 享元模式

前言享元模式是一种性能优化的模式，它通过共享对象的方式，减少实例对象的数量，它将对象的属性拆分为内部属性和外部属性，内部属性是可以共享的，外部属性是无法共享的，我们将共享的部分封装到对象中，然后大家共用这一个对象，通过方法或者直接赋值外部属性给这个对象，从而实现对象的复用。但是赋值的过程是会耗时的，这就是典型的时间换空间的优化方式了。享元模式是一种结构型设计模式，旨在减少应用程序中的内存使用或计算开销，通过共享对象实例来优化性能。初识享元模式假设有个内衣工厂，目前的产品有 50 种男式内衣和 50 种女士内衣，为了推销产品，工厂决定生产一些塑料模特来穿上他们的内衣拍成广告照片。正常情...

1505 103 0

JavaScript模式享元模式

JavaScript 模板方法模式

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 模板方法模式

前言模板方法模式的核心在于：定义一个操作中的算法骨架（模板方法），并将某些步骤延迟到子类中实现。通常我们会抽象一个父类，父类封装了子类的算法框架，包括实现一些公共方法和所有方法的执行顺序，子类继承父类，可以自己重写父类的方法。在模板方法模式中，子类实现中相同部分被上移到父类中，而将不同的部分留给子类来实现，最后由父类的模板方法来控制整个算法的执行顺序和流程，子类只关心具体的算法实现。这种方式十分依赖抽象类，但是JavaScript中很难去模仿一个抽象，但是我们也可以用自己的方式去实现。咖啡和茶这个是一个非常经典的例子，有助于我们理解什么是模板方法模式。泡一杯咖啡泡咖啡的步骤通常如下：把水...

1425 0 0

JavaScript模式模板方法模式

JavaScript 组合模式

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 组合模式

前言组合模式真的很难在一些业务项目上有所体现，但是当我们完完全全从零触发去构建一些东西的时候，组合模式还是很有用处的。组合模式是一种结构型设计模式，它可以让你将对象组合成树形结构以表示部分整体的层次结构。组合使得用户对单个对象和组合对象的使用具有一致性。在组合模式中，通常有两种类型的对象：叶子对象（Leaf）：不包含子对象的对象。容器对象（Composite）：包含叶子对象或其他容器对象。注意重点是这个一致性，我们通过上层类型约束，要求叶子对象和容器对象都需要实现我们指定的接口，然后我们就可以放心的进行组合了。最终我们可以发现，组合这些对象，得到的是一种树形结构，因此组合模式也被称为树枝...

1614 0 0

JavaScript模式组合模式

JavaScript 命令模式

木灵鱼儿 10月前 JavaScript设计模式与开发实践

JavaScript 命令模式

前言命令模式（Command Pattern）是一种行为设计模式，它将一个请求或简单操作封装成一个对象，从而使你可以使用不同的请求、队列或日志请求来参数化其他对象。同时支持可撤销的操作。命令模式主要包含以下几个角色：命令（Command）接口 - 声明执行操作的接口。此接口通常定义了一个执行具体命令的方法。具体命令（Concrete Command） - Command 接口的实现对象，它定义了绑定在接收者上的动作之间的关联。当命令的 execute() 方法被调用时，将会把动作转发给接收者去执行。客户（Client） - 创建一个具体命令对象并设置其接收者。有时客户负责创建并设置命令对...

1655 1 0

JavaScript模式命令模式

JavaScript 发布订阅模式

木灵鱼儿 10月前 JavaScript设计模式与开发实践

JavaScript 发布订阅模式

前言发布订阅模式使用上也非常广泛，比如vue的响应式数据就用到了发布订阅模式，前端的原生事件也是发布订阅模式，这种模式主要解决的就是异步的问题，用于代替回调函数，且使得两个对象是松耦合的联系再一起。发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式。发布订阅实现var event = { eventMap: new Map(), on(eventName, callback) { let eventL...

1303 74 0

JavaScript模式发布订阅模式

JavaScript 迭代器模式

木灵鱼儿 10月前 JavaScript设计模式与开发实践

JavaScript 迭代器模式

迭代器模式是一种行为设计模式，它允许您遍历集合中的元素，而无需暴露其底层表示（列表、堆栈、树等）。简单点来说就是自己去实现一个for循环。var each = function( ary, callback ){ for ( var i = 0, l = ary.length; i < l; i++ ){ callback.call( ary[i], i, ary[ i ] ); // 把下标和元素当作参数传给 callback 函数 } }; each( [ 1, 2, 3 ], function( i, n ){ alert ( [ i, n ]...

1391 2 0

JavaScript模式迭代器模式

JavaScript 代理模式

木灵鱼儿 10月前 JavaScript设计模式与开发实践

JavaScript 代理模式

前言代理模式应用非常广泛，比如es6的proxy，接口的反代，vue的响应式数据也用到了代理模式，由于用的很平常，导致对它的认知很模糊。代理模式是一种结构型设计模式，它允许你提供对象的替代品或占位符。代理控制着对原始对象的访问，并允许在将请求传递给对象前后执行一些操作。举个例子，比如前端常用的一个性能优化的方式：事件委托（事件代理）我们给子元素的父元素绑定click事件，通过冒泡的方式统一在父元素处理事件逻辑，这样减少了事件的绑定。这种方式其实又有点像是：中介者模式中介者模式是一种行为设计模式，它通过引入一个中介对象来管理一组对象之间的交互。中介者模式可以将对象之间的复杂多对多关系简化为...

1412 3 0

代理模式 JavaScript模式

JavaScript 策略模式

木灵鱼儿 10月前 JavaScript设计模式与开发实践

JavaScript 策略模式

前言策略模式常常用于解耦代码中的多种方案实现，比如表单校验，我们将校验的规则解耦出来，封装成一个个策略，然后在需要使用的dom上，使用这些策略，从而省去在具体的校验函数中一大堆if else的判断，当然也许不是if else。再举个例子，比如代码的压缩方式，我们可以使用gzip，或者br的方式，或者其他，他们都是为了达到压缩目的，又是多种方案可选的形式。使用策略模式计算奖金很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为 S 的人年终奖有 4 倍工资，绩效为 A 的人年终奖有 3 倍工资，而绩效为 B 的人年终奖是 2 倍工资。假设财务部要求我们提供一段代码，来方...

1598 2 0

JavaScript模式一等公民策略模式

JavaScript 单例模式

木灵鱼儿 10月前 JavaScript设计模式与开发实践

JavaScript 单例模式

前言单例模式在强类型语言中常常是使用一个类来实现，哪怕在ts中，常见的单例示例也是使用class来实现，但是事实上在js中，不一定非得要用类来实现，我们不应该将实现方式看的太死板，使用class也只是手段的一种，在js中我们有很多种方式达到相同的效果。单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。拙劣的模仿在强类型语言中，会给类一个getInstance的方法用于获取实例对象，在js中我们也可以这么写：function User(name) { this.name = name; this.instance = null; } User.prototy...

1552 0 0

JavaScript模式单例模式泛用型

JavaScript 多态

木灵鱼儿 10月前 JavaScript设计模式与开发实践

JavaScript 多态

前言一直很难去真正理解JavaScript的多态到底是什么，从各种教程上对多态的解释都是：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。举例说明：移动这个功能，作用在汽车上，他能实现100公里每小时，如果作用在自行车上，只有20公里每小时，一个加油，一个用脚蹬，实现方式和结果完全不同。但是这也没能解释js中的多态到底是什么？如果从代码上去看的话，可以如下：/** 汽车 */ function Car() {} /** 自行车 */ function Bicycle() {} /** 移动 */ function move(obj) { if (obj inst...

1689 0 0

javascript 设计模式多态

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

木灵鱼儿 10月前 nuxt

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

探讨nuxt3采用了Hydration水合这样一个概念，用于处理服务端生成静态html与客户端js脚本的结合，实现一个可动态交互的页面应用，这个过程被称之为水合。水合的过程可能会相对复杂一些，需要考虑到脚本加载、DOM的匹配、交互的激活（事件）、状态管理等等。其中状态的管理，我目前使用的时候，发现它并不是理想中的那种状态。理想中可能是：服务端渲染时发起了一个api请求，获得了用户的数据，此时我们会将其存储到状态管理中，比如pinia之类的，然后客户端获取到服务端返回的数据，然后自己将pinia的数据恢复到内存中，如果使用了持久化存储，应该会自己将其存储到local之中。但是，实际情况是，...

4.3w 365 122

cookie Nuxt3 请求

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

木灵鱼儿 10月前 nuxt

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

前言配置站点地图 sitemap.xml和robots.txt有利于SEO的快速抓取，对于一些站点工具来讲，站点地图可以帮助快速分析整个站点的内容，robots则更好的控制爬虫的抓取。准备工作安装nuxt的seo整合模块：@nuxtjs/seopnpm i @nuxtjs/seo -Dnuxt.config.ts中加入该模块：export default defineNuxtConfig({ modules: ['@nuxtjs/seo'] })配置站点链接事实上我们还应该配置一下站点的链接，站点链接用于在站点地图中拼接出完整的访问链接，但是在开发模式下站点地图的...

3495 473 2

爬虫 Nuxt3 SEO

Nuxt3 部署与PM2集群

木灵鱼儿 10月前 nuxt

Nuxt3 部署与PM2集群

前言最近项目开发完毕后一直在折腾部署这块，尝试使用宝塔的Node项目启动Nuxt3的SSR服务，但是非常不稳定，经常半夜就崩溃了，最后还是改用了原生PM2的形式，PM2现在已经支持集群了，还有很多不错的配置项，相比较宝塔的，更加适合Nuxt3Nuxt3打包的方式[hide]在了解打包方式之前，我们先看一下nuxt3项目在package.json文件中预设了哪些命令：{ "scripts": { "build": "nuxt build", "dev": "nuxt...

5195 0 19

spa 部署 Nuxt3

Typecho 使用highlight.js代码高亮如何实现代码行号

木灵鱼儿 10月前 Typecho博客教程

Typecho 使用highlight.js代码高亮如何实现代码行号

前言从写博客主题至今，对于代码高亮的行号，一直是比较头疼的，以前初学前端的时候，有过一些尝试，比如利用代码里面的行高是固定的，然后创建一个伪元素，伪元素的内容就是一行一个数字，然后通过脚本生成一个9999行的内容，然后伪元素父容器再做个内容溢出剪切，实现了一个代码行号的处理。最近博客主题评论下有人想要增加代码行号，我记得之前掘金是没有代码行号的，最近打开发现有了，于是就想办法给研究出来了。于是就有了这篇教程，方法也很简单。其实这个行号甚至与highlight.js关系不大，只是作为一个关联关系，可以用其他的同类竞品替代。教程[hide]在处理行号之前，我们需要保证代码已经被highlig...

7263 9 27

typecho 代码高亮 highlight.js

Proxmox VE（PVE）安装OpenWrt旁路由并共用一个网口

木灵鱼儿 10月前运维

Proxmox VE（PVE）安装OpenWrt旁路由并共用一个网口

前言该文章解决了以下问题：我有一台小主机，但是它只有一个网口，于是我安装了pve来进行服务器管理，但是我又想搞点魔法，因为软件层的代理，有时候无法满足一些偏门的网络请求，哪怕设置了全局啥的。于是我们就得安装OpenWrt来搞点魔法，并通过旁路由的形式共享同一个网口。但是魔法这个东西我们不想影响整个局域网内的设备，因为我们的实际需求，可能是个别设备，甚至只是个别时段才需要用到魔法，为此本教程就是来解决这些问题的。教程[hide]定制自己的固件我们可以自己去OpenWrt的官网实现自定义定制编译，也可以使用第三方的。官网：openwrt进去后输入x86，找到Generic x86/64选项。...

1.4w 0 51

OpenWrt Proxmox VE 旁路由

如何在项目中使用一个自定义的npm模块（如何使用一个魔改后的npm模块）

木灵鱼儿 11月前 vue 项目实战

如何在项目中使用一个自定义的npm模块（如何使用一个魔改后的npm模块）

前言一般情况下确实用不到这种极端处理方案，因为有名的插件依赖，基本上能碰到的bug情况是非常少见的。这篇文章解决的问题是：将 node_modules 中的模块自己修改后，又不想影响全局引入方式，或者说不方便去修改该模块的引入的时候使用的。教程中使用的是pnpm方式，如果你使用npm或者yarn，原理是一样的，可以参考完再自己去看对应的命令使用方式，大差不差的。[hide]教程假设我们已经将模块自己改好并打包好了，此时我们一般会得到一个dist目录，这个是模块打包后的产物，假设这个模块在node_modules中的文件夹夹名字是test，那么你就需要将dist放置在自己新创建的test目...

1900 0 3

硬链接魔改模块

Nestjs CORS配置和生产环境处理

木灵鱼儿 11月前 Nest.js

Nestjs CORS配置和生产环境处理

前言终于有机会上生产环境实战了，特意写上一篇文章方便以后使用。首先我们在本地开发的时候确实需要配置Nestjs的CORS，因为前端在开发阶段使用的api往往是我们本地起的服务，通过ip+端口的形式访问我们的后端，在浏览器中就会触发安全限制，报CORS跨域。为此在开发阶段我们就需要配置它。但是当我们上了生成环境后，就略有不同了。首先node本身没法去映射域名，所以我们需要通过Nginx或者其他做一个反向代理，想域名映射到本地的node服务上去，但是这就产生了问题，就是前端实际上请求的是nginx，nginx再跟nestjs沟通，但是nginx本身就是后端的，所以它不存在跨域的问题，反倒是前...

3382 1 7

跨域 nginx CORS

Debian12 SSH连接报错：Error Handshake failed no matching host key format

木灵鱼儿 11月前运维

Debian12 SSH连接报错：Error Handshake failed no matching host key format

前言最近重置debian12后，ssh连接发现报了错：Error: Handshake failed: no matching host key format于是我用运营商的vnc去查看ssh的配置文件，发现已经将PermitRootLogin yes开启了。就很奇怪，问了下ai发现是协议问题。教程输入：sudo -i先提权，再输入：nano /etc/ssh/sshd_config在配置文件末尾添加以下内容：HostKeyAlgorithms ssh-rsa然后CTRL + O保存，CTRL + X退出编辑。重启下ssh服务：service ssh restart此时再用root账号连...

2196 0 0

ssh debian12 协议

Prisma 使用MongoDB创建数据时报错：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.

木灵鱼儿 11月前 Nest.js

Prisma 使用MongoDB创建数据时报错：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.

前言当我在使用prisma配合MongoDB来创建数据的时候，发现后端报错了，提示：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.https://pris.ly/d/mongodb-replica-set主要原因是因为prisma在创建数据的时候需要使用到事务，但是MongoDB使用事务就需要副本集，副本集类似于一份数据存多份的处理方案。折腾了好久才搞定，特此分享。教程修改配置首先我们需要找到MongoDB的安装位置，在它的bin目录下...

3184 1 4

prisma MongoDB

Prisma 初始化MongoDB数据库下载报错reason unable to verify the first certificate解决方案

木灵鱼儿 11月前 Nest.js

Prisma 初始化MongoDB数据库下载报错reason unable to verify the first certificate解决方案

前言调用prisma的初始化命令并指定链接的数据库类型为MongoDB后:npx prisma init --datasource-provider mongodb它会自己去下载一些相关的依赖，但是此时报错了：Downloading Prisma engines for Node-API for windows [ ] 0%Error: request to https://binaries.prisma.sh/all_commits/efd2449663b3d73d637ea1fd226bafbcf45b3102/windows/query_eng...

1784 2 0

prisma MongoDB 证书校验

木灵鱼儿

JavaScript 适配器模式

JavaScript 状态模式

JavaScript 装饰者模式

JavaScript 中介者模式

JavaScript 职责链模式

JavaScript 享元模式

JavaScript 模板方法模式

JavaScript 组合模式

JavaScript 命令模式

JavaScript 发布订阅模式

JavaScript 迭代器模式

JavaScript 代理模式

JavaScript 策略模式

JavaScript 单例模式

JavaScript 多态

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

Nuxt3 部署与PM2集群

Typecho 使用highlight.js代码高亮如何实现代码行号

Proxmox VE（PVE）安装OpenWrt旁路由并共用一个网口

如何在项目中使用一个自定义的npm模块（如何使用一个魔改后的npm模块）

Nestjs CORS配置和生产环境处理

Debian12 SSH连接报错：Error Handshake failed no matching host key format

Prisma 使用MongoDB创建数据时报错：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.

Prisma 初始化MongoDB数据库下载报错reason unable to verify the first certificate解决方案

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

JavaScript 适配器模式

JavaScript 状态模式

JavaScript 装饰者模式

JavaScript 中介者模式

JavaScript 职责链模式

JavaScript 享元模式

JavaScript 模板方法模式

JavaScript 组合模式

JavaScript 命令模式

JavaScript 发布订阅模式

JavaScript 迭代器模式

JavaScript 代理模式

JavaScript 策略模式

JavaScript 单例模式

JavaScript 多态

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

Nuxt3 部署与PM2集群

Typecho 使用highlight.js代码高亮如何实现代码行号

Proxmox VE（PVE）安装OpenWrt旁路由并共用一个网口

如何在项目中使用一个自定义的npm模块（如何使用一个魔改后的npm模块）

Nestjs CORS配置和生产环境处理

Debian12 SSH连接报错：Error Handshake failed no matching host key format

Prisma 使用MongoDB创建数据时报错：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.

Prisma 初始化MongoDB数据库下载报错reason unable to verify the first certificate解决方案

最近评论

博客文章RSS订阅

博客评论RSS订阅