孙飞i_社区达人页

2024年08月

• 08.12 22:10:22
  发表了文章 2024-08-12 22:10:22

  pinyin-pro的基本使用

  pinyin-pro的基本使用
• 08.12 22:08:52
  发表了文章 2024-08-12 22:08:52

  网站常用的卡片布局

  网站常用的卡片布局
• 08.12 22:06:18
  发表了文章 2024-08-12 22:06:18

  学习Particles.js 给网页来点粒子特效

  学习Particles.js 给网页来点粒子特效
• 08.12 22:04:37
  发表了文章 2024-08-12 22:04:37

  ThreeJs 基础学习

  ThreeJs 基础学习
• 08.12 21:55:03
  发表了文章 2024-08-12 21:55:03

  CSS常用滤镜属性讲解

  CSS常用滤镜属性讲解
• 08.12 21:48:27
  发表了文章 2024-08-12 21:48:27

  GSAP基础学习

  GSAP基础学习

  
• 08.12 21:46:18
  发表了文章 2024-08-12 21:46:18

  js数组的创建

  js数组的创建
• 08.12 21:42:56
  发表了文章 2024-08-12 21:42:56

  js确定数据类型typeof与instanceof

  js确定数据类型typeof与instanceof
• 08.12 21:41:56
  发表了文章 2024-08-12 21:41:56

  H5对话框元素<dialog>

  H5对话框元素<dialog>

  
• 08.12 21:38:35
  发表了文章 2024-08-12 21:38:35

  Ajax 概述

  Ajax 概述
• 08.11 19:54:58
  发表了文章 2024-08-11 19:54:58

  JavaScript中的every 和 some 讲解和实现

  `every()` 和 `some()` 是用于测试数组元素是否符合特定条件的两个方法。`every()` 验证所有元素是否都通过指定函数的测试，并返回一个布尔值。而 `some()` 则检查数组中是否存在至少一个元素能通过该测试。若找到符合条件的元素，即使只有一个，`some()` 也会立即返回 `true`；反之则返回 `false`。这两个方法都不会对原数组进行修改。
• 08.11 19:53:11
  发表了文章 2024-08-11 19:53:11

  find 和 findIndex 的讲解和实现

  `findIndex` 是 JavaScript 数组方法，用于查找数组中满足条件元素的索引。语法：`array.findIndex(callback[, thisArg])`。`callback` 定义查找条件，并可接收元素、索引和数组自身作为参数。`findIndex` 从头遍历数组，找到首个符合条件的元素即返回其索引，未找到则返回 -1。
• 08.11 19:50:26
  发表了文章 2024-08-11 19:50:26

  JavaScript中的深拷贝和浅拷贝的实现讲解

  在JavaScript中，浅拷贝与深拷贝用于复制对象。浅拷贝仅复制基本类型属性，对于引用类型仅复制引用，导致双方共享同一数据，一方修改会影响另一方。深拷贝则完全复制所有层级的数据，包括引用类型，确保双方独立。浅拷贝可通过简单属性赋值实现，而深拷贝需递归复制各层属性以避免共享数据。
• 08.11 19:48:44
  发表了文章 2024-08-11 19:48:44

  手写call , apply , bind 方法的实现

  本文通过实例讲解了JavaScript中`call`、`apply`及`bind`方法的用途与实现。以`call`为例，展示了如何改变函数内的`this`指向，并立即执行该函数。通过在`Function.prototype`上定义`myCall`，利用`Symbol`确保新增属性的唯一性，从而避免命名冲突。接着介绍了如何处理不定数量的参数传递，最终实现了自定义的`myCall`方法。随后简述了`apply`与`call`的区别，并展示了其实现方式，主要在于参数传递形式的不同。最后，通过`bind`方法创建了一个返回新函数的例子，该新函数具有固定的`this`上下文，同时支持分批参数传递。

  
• 08.11 19:45:45
  发表了文章 2024-08-11 19:45:45

  封装QueryString构造函数，实现stringify、parse方法

  这段代码实现了一个`QueryString`构造函数，其原型上有两个方法：`stringify`与`parse`。`stringify`方法可以将一个对象转换成查询字符串格式，如将`{a:1,b:2,c:[1,2]}`转换为`&#39;?a=1&b=2&c=1,2&#39;`；而`parse`方法则可以将查询字符串解析回对象。`stringify`方法支持两种实现方式：一种是基础的循环拼接，另一种则是利用ES6的新特性如`Object.keys()`、`map()`与`join()`等简化代码。`parse`方法通过字符串的分割与条件判断，完成从查询字符串到对象的转换。
• 08.11 19:42:57
  发表了文章 2024-08-11 19:42:57

  复习JavaScript中的数组API

  这段代码介绍了JavaScript数组的几种实用方法：`fill`用于用固定值覆盖指定范围内的元素；`find`查找符合条件的第一个元素；`findIndex`获取该元素的索引；`sort`对数组排序，需提供比较函数以正确排序数字；结合`slice`与`sort`可在不改动原数组的情况下进行排序；`reverse`反转数组元素；利用`map`可创建新数组并替换其中的特定元素，同时保持原数组不变。
• 08.11 19:38:10
  发表了文章 2024-08-11 19:38:10

  JavaScript中的DOM解析器DOMParser api的讲解

  `DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例，使用`.parseFromString(string, type)`方法进行解析，其中`string`为待解析的字符串，`type`指定解析类型如`text/html`或`text/xml`等，返回一个`Document`对象。例如，可解析包含`&lt;p&gt;666&lt;/p&gt;`的字符串并获取其文本内容`666`。
• 08.11 19:36:38
  发表了文章 2024-08-11 19:36:38

  js中的reduce()方法 讲解 和实现

  `reduce()` 方法对数组元素依次应用一个回调函数，将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器（初次为初始值或首元素）、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如，可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外，还可自定义实现 `reduce()` 方法
• 08.11 19:35:17
  发表了文章 2024-08-11 19:35:17

  JavaScript中的数组的内置方法全面讲解

  JavaScript 数组提供了多种内置方法来高效操作数据。如 `push()` 和 `unshift()` 分别在数组尾部和头部添加元素；`pop()` 和 `shift()` 则移除尾部和头部的元素；`splice()` 可增删元素；`slice()` 创建子数组；`join()` 将数组转化为字符串；`indexOf()` 和 `includes()` 用于查找元素；`forEach()` 遍历数组。此外，`reverse()` 和 `sort()` 改变数组顺序；`fill()` 填充数组值；`slice()` 和 `concat()` 则分别用于创建子数组和合并数组。
• 08.11 19:33:29
  发表了文章 2024-08-11 19:33:29

  深入理解JavaScript中的核心内容

  本文全面介绍了JavaScript的基础与进阶知识。首先，概述了JavaScript作为一门脚本语言的基本概念，包括ECMAScript、DOM及BOM的作用与重要性。接着，深入探讨了JavaScript的执行流程，从编译到执行阶段，并重点讲解了JIT编译技术如何提升执行效率。随后，介绍了进阶知识点，如闭包的强大功能及其潜在的内存问题，`this`关键字的不同行为，以及事件循环机制如何管理同步与异步代码。通过本文的学习，读者不仅能掌握JavaScript的核心概念，还能深入了解其实现细节与最佳实践，为高效开发打下坚实基础。

  
• 08.11 19:30:29
  发表了文章 2024-08-11 19:30:29

  在JavaScript如何确认数据的类型?

  # `typeof` 与 `instanceof` 数据类型判断 `typeof` 操作符用于确定变量的基本数据类型，例如： - "string" - "number" - "boolean" - "undefined" 但对于引用类型如对象和数组，包括 `null`，它返回 "object"。 `instanceof` 用于检查对象是否为特定构造函数的实例，返回布尔值。它能准确识别数组等复杂类型，通过检查对象的原型链来确定其是否属于某个构造函数的实例。 两者结合使用可全面判断数据类型。
• 08.11 19:25:41
  发表了文章 2024-08-11 19:25:41

  详细讲解JavaScript中的闭包问题附代码演示

  闭包是JavaScript中一关键概念，它允许内部函数访问外部函数的作用域，从而实现变量的封装与持久化。本文通过示例解释了闭包的工作原理及其优势，如数据隐藏和私有变量的实现；同时也指出了闭包可能导致的内存占用问题，强调合理使用的重要性。
• 08.11 19:24:21
  发表了文章 2024-08-11 19:24:21

  JavaScript中的闭包概念讲解

  闭包是指函数内部嵌套另一个函数，并且内部函数引用了外部函数的数据（如变量或函数）。这样的内部函数被称为闭包。以示例代码为例，`fn1` 中有两个闭包函数 `fn2` 和 `fn3`，它们都可以访问并修改 `fn1` 中的变量 `a`。
• 08.11 19:22:28
  发表了文章 2024-08-11 19:22:28

  ES6新增语法 对象解构

  ECMAScript6引入的对象解构语法允许在一行代码中完成多个赋值操作。例如，从一个包含姓名和年龄的对象中提取属性，传统方法需分别获取，而使用解构赋值可简洁实现相同功能。此外，它支持为未定义的属性设置默认值、对已声明变量的解构赋值（需加括号）、嵌套解构以及在函数参数中直接解构等特性，极大提升了代码的可读性和编写效率。

  
• 08.11 19:20:39
  发表了文章 2024-08-11 19:20:39

  JS 防抖与节流

  防抖和节流是优化高频事件处理的技术。针对如`scroll`、`resize`等频繁触发的事件，它们能有效减少不必要的回调执行，节省资源。防抖确保在一段时间内仅执行最后一次操作，适用于输入框自动补全等场景；而节流则按固定间隔执行函数，适合拖拽、滚动事件。通过简单的JavaScript实现，可以显著提升应用性能和用户体验。

  
• 08.11 19:17:52
  发表了文章 2024-08-11 19:17:52

  js数组的创建的方法讲解

  数组是ECMAScript中最常用的类型之一，它是一组有序数据的集合，每个位置可存储任意类型的数据，并且大小动态变化。创建数组可通过`new Array()`或数组字面量如`[&#39;苹果&#39;, &#39;橘子&#39;]`。ES6引入了`Array.from()`和`Array.of()`：前者可将类数组或可迭代对象转为数组，后者则直接从参数创建数组。例如，`Array.from(&#39;hello&#39;)`将字符串转为字符数组，`Array.of(&#39;张三&#39;, &#39;李四&#39;)`直接创建包含名字的数组。这些方法增强了处理数组的能力。
• 08.11 14:12:25
  发表了文章 2024-08-11 14:12:25

  FLex布局详解

  Flex布局通过`flex-direction`定义主轴方向，包括横向`row`、反向横向`row-reverse`、纵向`column`及反向纵向`column-reverse`。`justify-content`控制主轴上子元素的排列，如起始端`flex-start`、末端`flex-end`、居中`center`、等间距`space-around`或两端对齐`space-between`。在Y轴上设置这些同样有效。`flex-wrap: wrap`使子元素在需要时换行。`align-items: center`实现侧轴（交叉轴）上的居中对齐

  
• 08.11 14:07:06
  发表了文章 2024-08-11 14:07:06

  了解 css中 backface-visibility 属性

  `backface-visibility` 是一个CSS属性，用于3D转换时控制元素背面的可见性，以优化渲染性能。默认情况下，背面被隐藏以减少不必要的渲染。此属性有两值：`visible` 表示背面可见；`hidden`（默认值）则隐藏背面。 通过双面卡片案例演示了其用法：两个重叠盒子，一个显示图片，另一个显示文字且初始状态为背面朝外。鼠标悬停时，图片盒子翻转显示背面，文字盒子翻转显示正面，同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好，广泛支持现代浏览器。

  
• 08.11 14:02:29
  发表了文章 2024-08-11 14:02:29

  CSS常用滤镜属性讲解

  本文介绍了CSS滤镜的几种常用效果，包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如，使用`blur(10px)`可使图像产生模糊效果，包裹层设置`overflow: hidden`可避免边缘模糊；`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度；`grayscale(1)`将图像转为灰度；`invert(1)`实现图像颜色完全反转；`opacity(0.5)`调整图像半透明；`saturate(350%)`增加饱和度；`sepia(100%)`营造复古深褐色调；`hue-rotate(180deg)`改变

  
• 08.11 13:54:59
  发表了文章 2024-08-11 13:54:59

  css实现涂绘文字的效果

  如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本，并在其上使用绝对定位的伪元素与之重叠，实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程，同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了，便于理解和实践。

  
• 08.11 13:49:55
  发表了文章 2024-08-11 13:49:55

  css来实现一个好玩的按钮

  这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素，并设置初始状态下的透明度和尺寸，当鼠标悬停在按钮上时，背景色平滑过渡至另一种颜色，产生视觉上的动态扩展效果。为避免覆盖文字，特地调整了伪元素的层级，确保交互过程中文字始终可见。整体效果流畅自然，增强了用户界面的互动性与美观度。
• 08.11 13:47:28
  发表了文章 2024-08-11 13:47:28

  使用纯css制作类似轮播图效果

  通过纯CSS实现流畅的页面切换效果，利用三个全屏大小的盒子放置于一个宽300vw的容器内。用户可通过点击底部按钮切换不同页面，每个按钮对应一个隐藏的单选按钮，选中时会触发容器的水平位移，从而展现不同的背景色页面。动画效果由`transition`属性完成，平滑过渡至下一个页面。此外，还提供了渐变色生成网站供参考，以丰富页面视觉效果。
• 08.11 13:44:47
  发表了文章 2024-08-11 13:44:47

  H5对话框元素<dialog> 讲解

  元素定义对话框或窗口，如点击按钮弹出的对话框、警告提示等。通过 `open` 属性控制可见性，`showModal()` 方法展示模态框。支持基本样式调整，如背景颜色和边框。兼容性详情参见 MDN 文档。

  
• 08.11 13:40:26
  发表了文章 2024-08-11 13:40:26

  网络请求 Ajax 讲解

  AJAX（异步JavaScript与XML）允许浏览器向服务器发起异步请求，无需刷新页面即可获取数据，改善用户体验。XML是一种可扩展标记语言，用于传输和存储数据，与HTML不同，XML使用自定义标签。如今JSON已取代XML成为数据交换的标准格式。AJAX的关键优势包括与服务器后台通信时不需刷新页面及基于用户事件更新页面内容。然而，它也存在如无浏览历史记录、跨域问题及不利于搜索引擎优化等局限性。HTTP请求通过请求报文发送至服务器，服务器以响应报文形式回复，其中包含状态码、响应头及响应体。常见的请求方法包括GET（查询）、POST（新增）、PUT（修改）和DELETE（删除）。
• 08.11 13:37:25
  发表了文章 2024-08-11 13:37:25

  Vue3 异步组件实现骨架屏效果

  这是一个简单的自定义axios封装示例。`axios.ts`文件中定义了一个基本的GET请求方法，通过XMLHttpRequest发起网络请求，并返回解析后的响应体。在其他`.vue`组件中，通过导入此封装，利用定义好的数据接口类型`Data`，采用异步组件+顶层await的方式从本地`data.json`文件中获取数据。最后，在`app.vue`中通过Suspense和异步组件的方式展示数据加载过程。
• 08.11 13:32:03
  发表了文章 2024-08-11 13:32:03

  Go 语言 实现冒泡排序

  冒泡排序是大家熟知的经典算法。在Go语言中实现它，关键在于理解其核心思想：通过不断比较并交换相邻元素，让序列中的最大值像泡泡一样“浮”至顶端。每一轮比较都能确定一个最大值的位置。外层循环控制排序轮数，内层循环负责比较与交换。随着每轮排序完成，未排序部分逐渐缩小，直至整个数组有序。以下是Go语言实现示例及说明。

2024年07月

• 07.17 13:12:49
  发表了文章 2024-07-17 13:12:49

  深入理解css中的link 和 @import

  【7月更文挑战第3天】CSS中的link与@import有显著差异。link是HTML标签，用于并行加载CSS，支持动态插入，用途广泛，如加载图标。@import是CSS语法，加载顺序在页面解析后，不支持动态引入，但可在CSS中导入多个样式表。link在性能和兼容性上优于@import。优选link，@import适用于多文件组织样式。

  
• 07.16 22:26:11
  发表了文章 2024-07-16 22:26:11

  封装QueryString构造函数，实现stringify、parse方法

  【7月更文挑战第2天】实现QueryString构造函数，包含`stringify`和`parse`方法。`stringify`将对象转换为查询字符串，如`?a=1&b=2&c=1,2`。第一种实现使用for循环和模板字符串，第二种实现利用ES6的`Object.keys`, `map`和`join`。`parse`方法将查询字符串转换回对象，处理数组情况。主要使用`split`方法拆分字符串并遍历处理。
• 07.15 22:24:49
  发表了文章 2024-07-15 22:24:49

  WebSocket 学习

  WebSocket是用于创建低延迟、高效率双向通信的协议，适合实时数据传输如即时通讯和在线游戏。它通过一次性握手建立长期连接，允许服务器主动推送数据。WebSocket API包括WebSocket对象和事件处理程序，如onopen、onmessage、onerror和onclose。示例代码展示了如何创建WebSocket连接、发送和接收消息及处理各种事件。WebSocket服务器通常需要特定的框架支持，如Node.js中的`ws`库。使用WebSocket时，前端和后端都可以监听open、close、error和message事件来管理连接状态和数据交换。
• 07.15 18:10:42
  回答了问题 2024-07-15 18:10:42

  百问求答幻兽帕鲁专场！回答问题赢天猫精灵IN糖等好礼

  赞0 踩0 评论0
• 07.15 18:07:13
  发表了文章 2024-07-15 18:07:13

  前端实现打字机的效果 -- typed库的使用

  typed.js是一款轻量级JavaScript插件，模拟打字机效果，用于网页文本的动画输入。特点是易用、高度可配置，支持多种动画模式且无依赖。配置包括字符串、速度、显示延迟、循环选项等。安装可通过NPM或CDN。使用时在HTML中添加`&lt;span&gt;`标签，然后在JS中实例化Typed对象。丰富的回调函数可用于自定义行为。适用于展示性和个人博客网站，增加互动性。尝试不同配置，创建独特动态文本效果。
• 07.15 17:55:22
  发表了文章 2024-07-15 17:55:22

  学习css的clip-path属性

  【7月更文挑战第1天】了解CSS `clip-path`属性，用于定义元素显示区域的裁剪形状，如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画，可创建动态交互效果。例如，`clip-path: circle(radius at center);`用于创建圆形裁剪，`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐：bennettfeely.com/clippy/](https://bennettfeely.com/clippy/)，提供交互式工具测试不同形状。