姚永坤的小窝

什么是设计模式设计模式是针对软件开发人员在编码过程中遇到的反复出现的问题而提出的久经考验的解决方案。它们提供了一种解决难题的结构化方法，并促进了软件架构的最佳实践。通过采用设计模式，开发人员可以创建更健壮、可维护和可扩展的代码库。 为什么在 Node 中使用设计模式Node.js 以其非阻塞事件驱动架构而闻名，为软件设计带来了独特的挑战和机遇。应用为 Node.js 量身定制的设计模式可以提高应用程序的效率并优化应用程序。让我们来探讨一些在 Node.js 生态系统中特别有价值的关键设计模式： 1. 单例模式单例模式是一种创建型设计模式，它确保类只有一个实例，并提供一个全局访问点。在 Node.js 中，单例模式可以用于创建全局配置对象、数据库连接、日志记录器等。 1234567891011121314151617181920212223242526class Database { constructor() { this.connection = null; } static getInstance() { if (!Da ...

Object.groupByObject.groupBy 方法可以根据指定的键将数组分组为对象。参数 array: Array<T>: 需要分组的数组 key: Function: 分组的键 返回 return: Partial<Record<string, T[]>>: 返回分组后的对象 12345678910111213141516const data = [ { id: 1, name: 'Alice', age: 30, sex: 'F' }, { id: 2, name: 'Bob', age: 25, sex: 'M' }, { id: 3, name: 'Tom', age: 20, sex: 'M' }, { id: 4, name: 'Jerry', age: 35, sex: 'M' &# ...

useState 和 useRef 是 React 中两个常用的钩子，它们都可以用于保存组件状态。但是，它们之间有什么区别？在什么情况下应该使用哪一个？本文将详细介绍 useState 和 useRef 的区别和使用场景。 useStateuseState 是 React 中最基本的钩子之一，用于在函数组件中保存状态。它返回一个包含两个元素的数组：当前状态和更新状态的函数。当调用更新状态的函数时，React 会重新渲染组件，并将新状态传递给组件。 123456789101112131415161718import React, { useState } from 'react';const CounterComponent = () => { const [counter, setCounter] = useState(0); const incrementCounter = () => { setCounter(counter + 1); }; return ( <div> ...

本篇将介绍六种高级 TypeScript 技巧，并通过示例逐步说明每种技巧的作用和优点。 高级类型我们可以使用高级 TypeScript 类型（如映射类型和条件类型）在现有类型的基础上创建新类型。借助这些类型，可以以更强的方式更改和操作类型，从而提高代码的灵活性和可维护性。 1. 映射类型映射类型是 TypeScript 中的一种高级类型，它可以根据现有类型创建新类型。通过映射类型，我们可以轻松地将现有类型的每个属性转换为新类型的属性。 12345678910111213141516type Person = { name: string; age: number;};type ReadonlyPerson = { readonly [K in keyof Person]: Person[K];};const person: ReadonlyPerson = { name: 'Alice', age: 30,};// Error: Cannot assign to 'name ...

React 以其独特的方法管理组件中的状态，已成为前端主流的开发框架。一个常见的钩子useState是最基本的，但经常被误用。了解并避免这些常见错误，对于旨在创建高效、无错误应用程序的初学者和经验丰富的开发人员都至关重要。 本文将从四个方面讨论useState的误用，以及如何避免这些错误和正确使用。 忘记考虑先前的状态在使用 React 的 useState 钩子时，一个常见的错误是在更新时没有考虑最新状态。这种疏忽可能会导致意想不到的行为，尤其是在处理快速或多重状态更新时。我们看下面这个例子： Error code❌ 123456789101112131415161718import React, { useState } from 'react';const CounterComponent = () => { const [counter, setCounter] = useState(0); const incrementCounter = () => { setCounter(counter ...

当我们在进行前端开发时，通常会与 localhost 进行交互，在我们执行npm run或者yarn start时，会启动一个本地服务器，在浏览器中打开时地址栏会显示http://localhost:xxx/index.html 的内容，那么他们两者间有什么区别呢？ 什么是 localhost？localhost是一个域名（除了好记以外，它和其它域名没有什么区别），它指向的是本地主机，也就是你的计算机。其使用范围仅限于本地，不会被路由器转发到外网，所以只能在本地访问。比如：当A和B同时访问localhost，A访问的是自己的本地主机，B访问的是自己的本地主机，他们之间是没有任何关系的。 如何通过域名访问到程序（应用）的？（DNS解析） 为了深入理解localhost，我们需要讨论下用户是如何通过域名访问到程序（应用）的。 我们使用百度作为一个例子。 用户在浏览器中输入www.baidu.com，浏览器会向DNS服务器请求解析域名www.baidu.com对应的IP地址。 为什么需要 IP 地址？打个比方，如果有人向你的公司寄送包裹，快递单上会包括公司地址、姓名和收件人等详细 ...

提出问题我们看一个如下图的新闻提要布局示例。新闻提要是一个文章的集合，每篇文章都有图像、标题和文本摘要三部分。页面右侧还有一个侧边栏，列出了热门文章。如果此时需要将整个页面进行划分你会如何去划分呢？ 我们可以将其分为两个大的网格：左侧为 4 列网格，右侧为单列（侧边栏）。 左边：一篇横跨四栏的大型专题文章。 下面：两篇文章，各占两栏。它们具有水平布局，图像位于左侧，文本位于右侧。 下面：四篇较小的文章，每篇文章跨越一栏。右侧也会出现一栏相同风格的文章作为侧边栏。 我们可能会在这个布局中看到三种不同风格的文章，它们都将作为独立的组件进行开发。现在让我们看看较小视窗上（手机端）的设计会发生什么。 在手机尺寸下，所有文章（包括特写文章）的图片都堆叠在文字上方。它们的布局没有区别。尺寸稍大时，文章采用水平布局。在更大的视窗（可以认为是近似平板电脑大小的视窗）上，特写文章下有两篇横向文章，下面有四篇堆叠的文章。单篇文章总共有三种不同的布局。 如果使用媒体查询来查询视窗的大小，我们可能需要创建单独的组件来处理不同断点的不同文章布局的行为。我们的代码很容易变得有点笨重，而且难以维 ...

简介 LESS 是一个CSS预处理器，可为网站提供可定制、可管理和可重用的样式表。 变量 使用@定义一个变量，变量可以被复用。 12345678910111213// less@height: 100px;@width: 200px;.container { height: @height; width: @width;}//css.container { height: 100px; width: 200px;} 混入 混入是一种将一组属性从一个规则集中包含（”混合进入”）到另一个规则集中的方法。 例如现在有这样一个场景：现在有两个容器，除了背景色以外其余属性均相同 1234567891011121314151617181920212223242526272829303132333435//less.commonContainer{ width: 100px; height: 50px; border: 1.5px solid black;}.leftContainer{ backgroun ...

一、Cookies 是怎么来的？ 90 年代初期，Netscape 的开发人员 Lou Montoulli 遇到了一个问题 —— 他正在为另一家公司 MCI 开发一个在线商店，该商店会在服务器中存储每个客户购物车中的商品。这意味着人们必须首先创建一个帐户，创建账户需要花费一些时间，存储每个用户购物车的内容也会占用大量存储空间。MCI 要求将这些数据存储在客户自己的计算机上。他们还希望客户在没有登录时也能添加商品到购物车。为了解决这个问题，Lou 提出了一个在程序员中已经广为人知的想法：魔力 cookie。 因此，使用cookie最初的想法是： 可以在客户端和服务器之间传递少量数据。 通常在cookie中村的数据是随机密钥或令牌，只对使用它的软件才有意义。 二、Cookies 是怎么工作的？Cookies 是由谁创建的 虽然浏览器提供了 document.cookie 来创建（前端），但大部分时间主要是由 backend 在生成 response 的时候，设置需要让客户端记住的 cookie，并发送到 client（后端）。 当我们说 backend 的时候，可能指的有两种情况： ...

安装123npm install styled-componentsyarn add styled-components 优点 自动关键 CSS：styled-components 会跟踪页面上呈现的组件，并完全自动地注入它们的样式，而不会注入其他样式。 没有类名错误：styled-components 会为你的样式生成唯一的类名。 更容易删除 CSS：要知道代码库中的某个类名是否被使用可能很难。styled-components 可以让这一点一目了然，因为每一个样式都与特定的组件绑定。如果组件未被使用（工具可以检测到）并被删除，其所有样式也会随之删除。 简单的动态样式：根据组件的道具或全局主题调整组件样式简单直观，无需手动管理数十个类。 无忧维护：你无需在不同的文件中寻找影响组件的样式，因此无论你的代码库有多大，维护都是小菜一碟。 自动供应商前缀：根据当前标准编写 CSS，其余的交给样式化组件处理。