前端开发
未读123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136class MyPromise { // 构造函数接受一个执行器函数，该函数会立即执行 constructor(executor) { // 初始化状态为 'pending' this.state = 'pending'; this.value = undefined; // 存储成功的值 this.reaso ...
前端开发
未读前言原型和原型链的这个东西，似乎是大部分同学在学习javaScript时都会有疑问的点，感觉理解起来很困难，搞不懂，最后采取死记硬背的方式，但这只能形成短期的记忆，可能一觉醒来，甚至喝一杯水的功夫就忘掉了。本文将以一种通俗易懂的描述方式去讲原型和原型链相关的东西，让你知其然又知其所以然，真正明白什么是原型和原型链。
1、构造函数构造函数和普通函数本质上没什么区别，只不过是使用了new关键字创建对象的函数，才被叫做构造函数。构造函数的首字母一般是大写，用以区分普通函数，但是你不大写也没问题。
下面我们写一个制造车的构造函数，我们可以通过这个构造函数去创造更多的车出来。
123456789101112function Car(color, length) { this.color = color; this.length = length; this.type = '车'; this.drive = function () { console.log("驾驶"); } ...
本文将从常见的分页器组件设计出发，讲解如何规划一个组件的设计方案，涵盖需求分析、API 设计、实现细节等。
一、需求分析在设计组件之前，首先要明确组件的功能需求和非功能需求。
1. 功能需求
基本分页功能：
支持上一页、下一页操作。
支持跳转到指定页码。
每页显示条数：
支持用户选择每页显示 10、20、50、100 条数据。
数据同步：
分页器的状态（当前页码、每页条数）需要与父组件同步。
边界处理：
在第一页时禁用“上一页”按钮，在最后一页时禁用“下一页”按钮。
2. 非功能需求
可复用性：组件应设计为通用，适用于不同的表格和数据场景。
可定制性：支持自定义样式。
性能优化：避免不必要的渲染，提升组件性能。
二、组件设计原则在设计分页器组件时，遵循以下原则：
单一职责：组件只负责分页逻辑，不处理数据请求或表格渲染。
高内聚低耦合：通过 props 和 events 与父组件通信，保持独立性。
可扩展性：预留插槽和配置项，便于后续功能扩展。
三、API 设计组件的 API 是与外部交互的桥梁，设计时需要清晰、简洁。
1. Props
total：总数据 ...
引言在Vue.js开发中，Mixins曾经是一种常见的代码复用方式。通过Mixins，开发者可以将一些通用的逻辑提取出来，并在多个组件中复用。然而，随着项目规模的增大和复杂度的提升，Mixins的缺点逐渐暴露出来，许多开发者（包括我自己）开始对Mixins产生抵触情绪。本文将详细分析Mixins的痛点，并探讨如何解决适用于Mixins的场景。
1. Mixins的痛点分析1.1 命名冲突Mixins最大的问题之一是命名冲突。当一个组件引入了多个Mixins时，如果这些Mixins中有相同名称的属性或方法，就会导致冲突。Vue.js并不会对这种冲突进行警告或错误提示，而是会默默地覆盖掉之前的属性或方法，这可能会导致难以调试的Bug。
示例：
12345678910111213141516171819202122const mixinA = { data() { return { message: 'Hello from Mixin A' } }}const mixinB = ...
引言随着项目的不断扩大，代码的结构和维护性变得尤为重要。设计模式作为一种经验的总结与抽象，帮助我们以高效、可维护和可扩展的方式组织代码。我们在项目中开发中会用到很多设计模式去处理问题，但是很多前端同学一谈到设计模式就支支吾吾讲不出来，一方面是 JavaScript 并不完全遵循面向对象的设计思想，另一方面是平时过于专注业务代码而缺少了经验总结。看完本篇文章你就会恍然大悟，原来我平时一直都在用各种设计模式解决问题。
1.什么是设计模式？设计模式是面向对象设计中常见问题的解决方案的总结。它们并不是现成的代码，而是经验的提炼和指导思想。通过设计模式，开发者可以用成熟的设计方案来解决常见的编程问题，从而提高代码的复用性、可维护性和可扩展性。
在前端开发中，尽管 JavaScript 并不完全遵循传统的面向对象设计思想，但许多设计模式仍然能够通过特定的实现方式得到应用。
2.常见的前端设计模式 单例模式（Singleton）
概念 ：确保某个类只有一个实例，并提供全局访问点。
应用场景 ：在前端开发中，单例模式常用于需要全局共享状态的场景，比如全局配置管理、日志记录等。通过单例模式，可以避免创 ...
1. 浏览器是如何来比较优先级的？优先级通常用一个四元组（a, b, c, d）来表示，其中：
a ：是否使用!important。
b ：内联样式的数量。
c ：ID选择器的数量。
d ：类选择器、属性选择器和伪类的数量。
e ：元素选择器和伪元素的数量。
通过比较这些值，浏览器可以确定哪个选择器的优先级更高。
2. 优先级计算规则优先级等级CSS选择器的优先级从高到低分为以下几个等级：
!important ：优先级最高，会覆盖所有其他规则。
内联样式 ：直接在HTML元素上使用style属性定义的样式。
ID选择器 ：通过#id定义的样式。
类选择器、属性选择器、伪类 ：例如.class、[type="text"]、:hover等。
元素选择器、伪元素 ：例如div、p、::before等。
通配符选择器、子选择器、相邻选择器 ：例如*、>、+等，优先级最低。
优先级计算示例以下是一些选择器及其优先级的按照四元组的计算示例：
选择器
优先级 (a, b, c, d)
div
(0, 0, 0, 1)
.cl ...
在前端开发中，z-index是一个用于控制元素堆叠顺序的CSS属性。它决定了元素在垂直于屏幕方向（Z轴）上的显示顺序。z-index的使用看似简单，但在复杂项目中，如果没有合理的规划，很容易导致层级混乱、样式冲突等问题。本文将探讨z-index的工作原理，并分享在复杂项目中如何规划和管理z-index。
1. z-index的基本概念1.1 什么是z-index？z-index是一个CSS属性，用于控制元素的堆叠顺序。它的值可以是正整数、负整数或auto：
正值 ：元素位于普通流的上方，值越大，层级越高。
负值 ：元素位于普通流的下方。
auto ：元素的堆叠顺序由其在DOM中的位置决定。
1.2 堆叠上下文（Stacking Context）z-index的效果依赖于堆叠上下文 。堆叠上下文是一个三维概念，它决定了元素在Z轴上的排列顺序。以下情况会创建新的堆叠上下文：
根元素（）。
position为absolute、relative、fixed或sticky，且z-index不为auto。
opacity小于1。
transform、filter、will-cha ...
1. 起源与背景1.1 Vue CLI 的起源Vue CLI 是 Vue.js 官方提供的标准工具链，旨在为 Vue.js 项目提供开箱即用的开发环境。它于 2017 年首次发布，迅速成为 Vue.js 开发者的首选工具。
核心功能：
提供项目脚手架（vue create）。
集成 Webpack 作为构建工具。
支持插件系统（如 Vue Router、Vuex、TypeScript 等）。
提供丰富的配置选项和开发工具（如热更新、代码分割等）。
定位：Vue CLI 是一个面向传统前端开发的工具，适合需要高度定制化配置的项目。
1.2 Vite 的起源Vite 是由 Vue.js 作者尤雨溪（Evan You）于 2020 年推出的新一代前端构建工具。它的设计目标是解决传统构建工具（如 Webpack）在开发环境下的性能瓶颈问题。
核心功能：
基于原生 ES 模块（ESM） 的开发服务器。
使用 Rollup 作为生产环境的构建工具。
支持按需加载和快速热更新。
提供开箱即用的 TypeScript、JSX、CSS 预处理器支持。
定位：Vite 是一个面向现代 ...
圣杯布局（Holy Grail Layout）和双飞翼布局（Double Flying Wings Layout）是两种经典的三栏布局方式，它们都实现了中间内容优先渲染、左右侧栏宽度固定、中间栏宽度自适应的效果。尽管它们在视觉效果上非常相似，但它们的实现方式和内部原理有显著的区别。本文将详细探讨这两种布局的区别，并通过多种方式（Flexbox、浮动、Grid）分别实现它们。
1. 圣杯布局与双飞翼布局的区别1.1 实现方式
圣杯布局 ：
使用Flexbox或浮动布局，通过order属性或负边距调整左右侧栏的位置。
中间内容、左侧栏、右侧栏通常放在同一个父容器中。
双飞翼布局 ：
通过负边距和相对定位实现布局。
中间内容单独放在一个容器中，左右侧栏放在中间内容之后。
1.2 核心特点
圣杯布局 ：
代码简洁，易于理解和维护。
使用Flexbox时，布局更加灵活。
双飞翼布局 ：
通过负边距实现布局，兼容性较好。
适合需要更复杂布局的场景。
1.3 适用场景
圣杯布局 ：简单三栏布局，适合快速实现。
双飞翼布局 ：复杂三栏布局，适合需要更精细 ...
在现代前端开发中，虚拟 DOM（Virtual DOM）已经成为许多框架（如 Vue 和 React）的核心功能之一。虚拟 DOM 的概念最早由 React 在 2013 年引入，它通过一种高效的方式管理 DOM 更新，提升应用程序的性能，Vue 也在 2014 年发布时也采用了虚拟 DOM的设计。本文将探讨虚拟 DOM 的概念、工作原理，以及 Vue 和 React 在虚拟 DOM 实现上的一些区别。
1. 什么是虚拟 DOM？1.1 虚拟 DOM 的定义虚拟 DOM 是一个JS对象，它用一种抽象的方式来表达一段真实 DOM 的结构。
1.2 虚拟 DOM 的结构虚拟 DOM 通常是一个 JavaScript 对象，包含以下属性：
type：节点类型（如 div、span）。
props：节点的属性（如 className、style）。
children：子节点（可以是文本、其他虚拟 DOM 节点）。
例如，以下 HTML：
123<div id="app" class="container"> <p>Hell ...
