前言在现代前端开发中，规范的版本管理和高效的持续集成/持续部署（CI/CD）是保障项目质量和迭代效率的关键。本文将探讨如何利用 npm（或 pnpm/yarn）对前端项目进行版本号管理，并结合 GitHub Actions 实现标签（tag）触发的自动化发布流程，从而构建一个简洁而强大的 CI/CD 工作流。核心工具：package.json 中的 version 字段所有基于 Node.js 的项目（包括绝大多数前端项目）都通过 package.json 文件来管理元数据，其中 version 字段是记录项目版本号的核心。我们通常遵循语义化版本规范（Semantic Versionin...
前言想写这篇文章已经很久很久了，最近狠下心来整理这些资料，希望能帮助到大家。合适的字体格式字体文件有很多种：ttf、otf、eot、svg、woff、woff2；不同的格式用于不同的使用场景，而且大部分格式其实都不推荐使用，最终最值得使用的就是 woff2 格式。格式推荐优先级WOFF2：面向所有现代浏览器，性能最优。WOFF：面向稍旧一些的浏览器，作为 WOFF2 的主要备选。TTF/OTF：面向更老旧的移动浏览器。EOT (可选)：仅在需要兼容 IE8 及以下浏览器时才添加。SVG (基本不用)：除非有极端罕见的兼容性需求。最佳实践代码一个健壮的@font-face 实践代码：@fo...
前言前端的复制功能第一次使用的时候还记忆犹新，那时根本不知道怎么操作，复制它到底是怎么实现的，该怎么去触发，百度查看了不知道多少所谓的复制功能文档，每篇都有不一样的用法，我总想着有一天能搞清楚这些，毕竟现在复制功能已经web功能开发中离不开了。execCommand API浏览器在document对象上暴露了execCommand方法，该方法允许使用者通过输入“命令”的方式来操作 可编辑内容区域 的元素。可编辑内容区域被官方认为是contenteditable="true"的html元素，但按道理，input这些应该也是算可编辑内容区域的。这些都不重要，我们这次关注的...
前言最近在开发一个Chrome插件，在阅读官方文档时发现它提供的都是js的方式，完全没有工程化的概念，而且插件的版本已经到v3了，v3版本限制了非常多的东西，比如我们使用vue的template渲染，由于vue用到了eval来实现，导致插件会报错，蛋疼的很，总不能写手写render函数吧，太累了。最好的解决办法就是用vite来打包vue项目，这样既可以用vue组件的方式开发，打包时也会将template转换成render函数，从而避免了eval的报错，我们还可以使用到ts和scss这些便利的工具。为此我们搭建一个开发模板需要实现以下功能：支持vite打包支持typescript支持scs...
前言在使用 Prisma 的 seed 功能时，我遇到了一个非常棘手的问题：默认情况下，ts-node 会将其运行的脚本视为一个独立的文件进行转换，这导致无法识别较新的 JavaScript API 或路径别名。这在一些复杂场景中特别麻烦，因为我们往往需要复用项目中的工具函数，而由于文件层级的原因，往往不得不使用大量的 ../../../ 路径。更糟糕的是，如果 A 文件引入 B 文件，而 B 文件又无法使用路径别名，这种链式问题使得项目结构变得更加复杂且难以维护。因此，我开始思考一下如何能够简化这一过程，并复用已有的 TypeScript 配置。教程[hide]首先我们先看下我的运行命...
前言这个是无意间看到b站的一个视频，发现挺好的，css实现本身还不吃太高的配置，视频链接如下：【Sass实现星空效果【渡一教育】】教程中使用了scss的除法运算法，但是这个用法在新版本中已经弃用了，现在推荐使用math语法，如果你的scss版本是新版本的，比如1.77.1，使用这种方式会报错。教程配置Math语法支持在vite的scss中配置如下;// vite.config.ts export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData:...
前言当我们使用Object.keys获取某个对象的key数组的时候，ts推导出来的类型是string[]，当我们再通过forEach去遍历这个key数组时，由于string类型与对象具体的key不一致，导致报错：素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型。我感觉ts这里的推导能力太差了，明明已经把具体的对象传递给他了，结果它直接返回一个string[]类型来一劳永逸，导致后续通过string类型去拿对象的value，就导致类型不匹配了。解决办法以前的我会这样写：const kindMap = { balance: 1, gpu: 2 };...
前言这是个非常有意思的情况，由于我一直没有平板设备，所以这个问题一直都没有遇到，我一直相信在pc端通过媒体查询就可以适配到所有的机型，加上我用手机查看的时候，也是没有问题的，所以一直相信至今。结果我最近收了一台二手平板来帮助我学习的时候，发现出了一个大问题，在pad端访问我的主题，首页文章的卡片字体会突然被放大了，我以为是css的问题，结果调试的时候发现css没有变化，但是实际渲染的字体大小由原来的13px变成了20.0549px，这显然有问题。而且我发现只有p元素字体会发生这种情况，贼奇怪，难道语义标签会带着隐性的兼容问题？这是在平板中的效果，p元素的字体比标题还大了。这张是我在电脑端...
前言在事件代理中，往往有的时候我们需要生效的部分会存在其他元素影响，比如我可能需要响应一个卡片的点击事件，但是这个卡片里面自身又有其它link元素，比如卡片的分类，tag标签等，当我们点击分类或者tag标签，由于事件冒泡的原因，他也会触发事件代理的click事件，也就是父级元素的click事件。但是显然我们不需要响应他们，如果单纯通过event.target去排查，是不够完善的，有可能这个target是一个无class的元素，或者是同时存在多个的元素，我们可能还希望通过指定他们的父级元素class来进行排除。教程const blackClassList = ["article-...
什么是接口接口是对象能响应的请求的集合我们经常说一个库或者模块对外提供了某某 API 接口。通过主动暴露的接口来通信，可以隐 藏软件系统内部的工作细节。这也是我们最熟悉的第一种接口含义。 第二种接口是一些语言提供的关键字，比如 Java 的 interface。interface 关键字可以产生一 个完全抽象的类。这个完全抽象的类用来表示一种契约，专门负责建立类与类之间的联系。 第三种接口即是我们谈论的“面向接口编程”中的接口，接口的含义在这里体现得更为抽象。Java中的抽象类java中为了实现对象的多态性会使用向上转型的超类型来作为值的约束，这个向上转型的超类型就是抽象类或者inter...
单一职责 SRP个类应该仅有一个引起它变化的原因。更具体地说，单一职责原则意味着一个类应该只负责一项职责或功能。如果一个类承担了过多的职责，那么在软件的修改过程中，修改某一功能可能会影响到由这一类管理的其他功能。遵循单一职责原则可以使类更加独立，从而容易理解、维护和扩展。在JavaScript中类往往是弱化的，因此单一职责往往更多的应用在对象和方法上。代理模式中的单一职责我们实现一个图片的懒加载它需要做两件事件，第一件是创建img图片并添加到页面中，第二件就是占位图设置和实际图片加载完成后重新赋值src。利用单一职责，我们将其拆分成两个方法：var myImage = (function...
前言适配器模式是一种结构型设计模式，它允许对象在不改变对象接口的前提下，在不兼容的系统之间进行交互。适配器模式通常用于将已有的类的接口转换为另一个接口，以便系统中的其他组件可以与之交互。在适配器模式中，通常涉及三个角色：目标(Target)接口：当前系统期望使用的接口，它定义了客户端所需的特定域的操作。需要适配的类(Adaptee)：已存在的类，其接口不符合目标接口的要求。适配器(Adapter)：实现目标接口，并在内部封装有一个需要适配的对象实例。适配器负责接收调用并将其转换为对适配对象的接口调用。适配器模式往往不是一开始就会去使用的，因为没有人能知道未来会发生了什么，使用它往往是因为...
前言状态模式是一种行为设计模式，用于在一个对象的内部状态改变时改变其行为。这种模式通过将每个状态封装成独立的类，并将动作委托到代表当前状态的对象，从而实现状态与行为的分离。状态模式的组成三个主要部分：环境类（Context）：维护一个指向当前状态对象的引用，并将所有与该状态相关的工作委托给它。抽象状态类（State）：定义一个接口以封装与环境类的一个特定状态相关的行为。具体状态类（Concrete State）：实现抽象状态类的接口的类，为具体状态提供了行为的实现。说白了就是将状态和状态具体的逻辑封装成一个个状态对象，通过抽象状态类统一接口方便调用，我们通过事件或者其他去触发的是环境类上...
前言装饰者模式是一种经典的设计模式，它允许向对象动态地添加额外的功能。这种模式通过创建装饰类来包裹原始类的实例，从而达到增强原始类功能的目的，同时不影响原始类的结构。装饰者模式在设计之初是想称为包装器模式的，因为从结构上看，这种说法更加符合它，通过一个对象包裹另一个对象，甚至多个对象进行嵌套。在JavaScript中实现一个装饰者模式是非常简单的一件事，因为是一本动态语言，它都不用像java那样需要写一个类来包装源对象，最简单的做法就是直接改写对象的原属性，在实际的代码中，常常用函数来进行实现装饰器模式。 var obj = { name: 'sven', ...
前言中介者模式（Mediator Pattern）是一种行为设计模式，其主要目的是降低多个对象间的通信复杂性。这种模式提供了一个中介者对象，这个对象通常封装有具体对象之间交互的方式，使得对象之间不需要显式地相互引用，从而使其耦合松散，可以独立地改变它们之间的交互。中介者模式就是为了解耦多个对象之间的关联，让他们不在相互依赖，而是依赖一个公共的对象，这个对象就是中介者。中介者模式优化后：中介者模式例子：购买商品我们有一个手机购买页面，手机目前配置选项有：颜色，我们需要根据用户选择的颜色和购买数量，来控制购买按钮是否可以点击，已经库存是否足够。<body> 选择颜色: &...
前言职责链模式，它为请求的发送者和请求者之间实现了解耦，他将具体的请求者连成一条链，并沿着这条链依次处理请求，直到有一个对象处理它为止。这么说可能不好理解，其实就是将复杂的条件判断进行了解耦处理，具体我们看下面的例子。商城购买我们现在有一个优惠活动，如果用户交了500元定金，他在购买的时候可以收到100元优惠卷，如果是交了200元定金则收到50元优惠卷，如果没有定金，那就没有优惠卷，库存有限的情况下不一定保证能买到。假设我们有这三个参数：orderType：表示订单类型（定金用户或者普通购买用户），code 的值为 1 的时候是 500 元 定金用户，为 2 的时候是 200 元定金用户...
前言享元模式是一种性能优化的模式，它通过共享对象的方式，减少实例对象的数量，它将对象的属性拆分为内部属性和外部属性，内部属性是可以共享的，外部属性是无法共享的，我们将共享的部分封装到对象中，然后大家共用这一个对象，通过方法或者直接赋值外部属性给这个对象，从而实现对象的复用。但是赋值的过程是会耗时的，这就是典型的时间换空间的优化方式了。享元模式是一种结构型设计模式，旨在减少应用程序中的内存使用或计算开销，通过共享对象实例来优化性能。初识享元模式假设有个内衣工厂，目前的产品有 50 种男式内衣和 50 种女士内衣，为了推销产品，工厂决 定生产一些塑料模特来穿上他们的内衣拍成广告照片。 正常情...
前言模板方法模式的核心在于：定义一个操作中的算法骨架（模板方法），并将某些步骤延迟到子类中实现。通常我们会抽象一个父类，父类封装了子类的算法框架，包括实现一些公共方法和所有方法的执行顺序，子类继承父类，可以自己重写父类的方法。在模板方法模式中，子类实现中相同部分被上移到父类中，而将不同的部分留给子类来实现，最后由父类的模板方法来控制整个算法的执行顺序和流程，子类只关心具体的算法实现。这种方式十分依赖抽象类，但是JavaScript中很难去模仿一个抽象，但是我们也可以用自己的方式去实现。咖啡和茶这个是一个非常经典的例子，有助于我们理解什么是模板方法模式。泡一杯咖啡泡咖啡的步骤通常如下：把水...
前言组合模式真的很难在一些业务项目上有所体现，但是当我们完完全全从零触发去构建一些东西的时候，组合模式还是很有用处的。组合模式是一种结构型设计模式，它可以让你将对象组合成树形结构以表示部分整体的层次结构。组合使得用户对单个对象和组合对象的使用具有一致性。在组合模式中，通常有两种类型的对象：叶子对象（Leaf）：不包含子对象的对象。容器对象（Composite）：包含叶子对象或其他容器对象。注意重点是这个一致性，我们通过上层类型约束，要求叶子对象和容器对象都需要实现我们指定的接口，然后我们就可以放心的进行组合了。最终我们可以发现，组合这些对象，得到的是一种树形结构，因此组合模式也被称为树枝...
前言命令模式（Command Pattern）是一种行为设计模式，它将一个请求或简单操作封装成一个对象，从而使你可以使用不同的请求、队列或日志请求来参数化其他对象。同时支持可撤销的操作。命令模式主要包含以下几个角色：命令（Command）接口 - 声明执行操作的接口。此接口通常定义了一个执行具体命令的方法。具体命令（Concrete Command） - Command 接口的实现对象，它定义了绑定在接收者上的动作之间的关联。当命令的 execute() 方法被调用时，将会把动作转发给接收者去执行。客户（Client） - 创建一个具体命令对象并设置其接收者。有时客户负责创建并设置命令对...
前言发布订阅模式使用上也非常广泛，比如vue的响应式数据就用到了发布订阅模式，前端的原生事件也是发布订阅模式，这种模式主要解决的就是异步的问题，用于代替回调函数，且使得两个对象是松耦合的联系再一起。发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状 态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型 来替代传统的发布—订阅模式。发布订阅实现var event = { eventMap: new Map(), on(eventName, callback) { let eventL...
迭代器模式是一种行为设计模式，它允许您遍历集合中的元素，而无需暴露其底层表示（列表、堆栈、树等）。简单点来说就是自己去实现一个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 ]...
前言代理模式应用非常广泛，比如es6的proxy，接口的反代，vue的响应式数据也用到了代理模式，由于用的很平常，导致对它的认知很模糊。代理模式是一种结构型设计模式，它允许你提供对象的替代品或占位符。代理控制着对原始对象的访问，并允许在将请求传递给对象前后执行一些操作。举个例子，比如前端常用的一个性能优化的方式：事件委托（事件代理）我们给子元素的父元素绑定click事件，通过冒泡的方式统一在父元素处理事件逻辑，这样减少了事件的绑定。这种方式其实又有点像是：中介者模式中介者模式是一种行为设计模式，它通过引入一个中介对象来管理一组对象之间的交互。中介者模式可以将对象之间的复杂多对多关系简化为...
前言策略模式常常用于解耦代码中的多种方案实现，比如表单校验，我们将校验的规则解耦出来，封装成一个个策略，然后在需要使用的dom上，使用这些策略，从而省去在具体的校验函数中一大堆if else的判断，当然也许不是if else。再举个例子，比如代码的压缩方式，我们可以使用gzip，或者br的方式，或者其他，他们都是为了达到压缩目的，又是多种方案可选的形式。使用策略模式计算奖金很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为 S 的人年终奖有 4 倍工资，绩效为 A 的人年终奖有 3 倍工资，而绩效为 B 的人年终奖是 2 倍工资。假设财务部要求我们提供一段代码，来方...
前言单例模式在强类型语言中常常是使用一个类来实现，哪怕在ts中，常见的单例示例也是使用class来实现，但是事实上在js中，不一定非得要用类来实现，我们不应该将实现方式看的太死板，使用class也只是手段的一种，在js中我们有很多种方式达到相同的效果。单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。拙劣的模仿在强类型语言中，会给类一个getInstance的方法用于获取实例对象，在js中我们也可以这么写：function User(name) { this.name = name; this.instance = null; } User.prototy...
最近评论