- 博客(170)
- 收藏
- 关注
RSS订阅原创 一文搞懂HTML 属性（Attributes）和 DOM 属性（Properties）
HTML 属性：用于初始化元素的状态，通常是字符串类型。DOM 属性：表示元素在内存中的状态，可以是任何类型，并且可以通过 JavaScript 动态地读取和修改。理解这两者的区别有助于更有效地操作和管理 HTML 元素。
2024-08-15 12:32:58
368
原创 如何使用 React 为自己 创建一个 Google Chrome 插件
初衷是这样的 我工作的时候发现各种链接太多了 有时候需要访问某个链接 一时半会找不到 所以想着 如果有个插件 可以把我工作用到的链接 都放在一起 那该多好啊。
2024-08-15 12:31:46
370
原创 告别双引号时代！ES6模板字符串带你飞
模板字符串以其简洁、直观、强大的特性，已经成为现代前端开发中不可或缺的工具。无论是多行字符串、嵌入表达式，还是标签模板，模板字符串都能让你的代码更加优雅和高效。如果你还在使用传统的双引号或单引号来定义字符串，那么是时候升级你的技能，拥抱ES6模板字符串的无限魅力了！告别双引号时代，让模板字符串带你飞！原文：https://juejin.cn/post/7402932447211798537。
2024-08-15 12:29:21
230
原创 React Native无框架开发环境搭建
现在官网主推的是Expo框架进行开发，但是expo集成原生插件比较麻烦。公司用的app大多都会集成一些各种各样的第三方原生sdk（比如广告、支付类）或其它一些原生功能，这种情况下 推荐用无框架环境进行开发。如果Expo官方提供的原生插件功能满足项目需求，还是推荐用Expo框架进行开发的。
2024-08-08 16:51:12
747
原创 前端实现图片多选
在文档扫描过程中，我们可能需要选择多个图像以进行重新排序、编辑和导出等操作。这时我们通常需要一个支持多选的文档查看器。是一个提供该种功能的SDK。它提供了一组查看器用于文档相关的操作。在本文中，我们将演示如何使用它来浏览和选择多张图片。此外，我们还将探讨如何从头实现这样一个查看器。
2024-08-08 16:48:10
357
原创 Vue 中如何使用动态样式
在日常开发中随着用户需求的日益多样化，界面设计也日益复杂，如何在保持代码简洁的同时，实现界面的动态变化，是一项不小的挑战。动态样式作为实现界面动态变化的关键技术手段，不仅能够提升用户体验，还能为开发者提供更加丰富的设计空间。动态样式在Vue中的应用，主要体现在通过数据绑定、计算属性、条件渲染等技术，使得界面元素的样式能够根据数据状态、用户交互等条件实时调整。这不仅能够实现界面的个性化展示，还能根据不同的使用场景提供更为直观、响应式的视觉反馈。下面将总结几种动态样式常用的方法。
2024-07-31 19:07:25
1200
原创 手把手教你：JS 中实现深浅拷贝的方法
浅拷贝：只复制顶层属性的值，对于引用类型的属性仅复制引用。深拷贝：递归复制所有层级的属性，确保完全独立的副本。
2024-07-31 19:00:23
792
原创 CSS样式中奇奇怪怪的问题
在学习 CSS 样式的过程中总会遇到令人费解的 CSS 样式问题，比如行内元素与块元素不同的特性导致的覆盖问题，又或者十分经典的 margin 塌陷问题及 margin 合并问题，这些都是学习前端 CSS 中不可避免的，因此本文记录了一些在学习过程中遇到的 CSS 样式问题及解决方法以供参考。
2024-07-31 18:54:33
925
原创 如何使用nodejs的fsPromise.access()判断文件权限
大家如果需要联系博主，或者获取博主各系列文章对应的资源，可以通过我的主页来获取。本文虽然简单，但是涉及到的api比较偏，网络资料较少，所以在此记录一下，帮助对node官网不熟悉的同学，更容易理解api的使用。有任何前端项目、demo、教程需求，都可以联系博主，博主会视精力更新，免费的羊毛，不薅白不薅！原文：https://juejin.cn/post/7397615008391528458。
2024-07-31 18:44:05
259
原创 代码上传你的服务器（纯node环境完成）
目前很多公司，都不是在本地开发自己代码，或者本地开发完代码后需要把build后的文件上传给远程服务器。然后进行dev环境的测试。当然，现在有很多种方法，很多种语言或方法都可以上传代码服务器，通常简便的方法就是使���python3，但是这样需要安装python,以及安装各种插件，通常在安装的过程中并不是很安逸，都有各种报错，或者网络超时（可以切换源解决）这次我带来的方法是使用纯血node环境上传代码到服务器，不需要安装任何插件。只需要两个js脚本，即可完成选择本地文件夹，上传服务器的任意文件夹路径下。
2024-07-19 18:40:25
168
原创 浅谈CSS浮动及其清除方法
它允许一个元素向左或向右移动，直到其外边距触碰到包含它的父元素的边界或其他浮动元素的外边距。BFC（Block Formatting Context，块级格式化上下文）是CSS中一个重要的概念，它定义了一个独立的渲染区域，这个区域内的元素布局遵循特定的规则，并且不受外部元素的影响。当元素被设置为浮动时，它们会从正常的文档流中移出，可能会影响其他元素的位置和页面的整体布局。一共可以设置5个不同的浮动效果，一般使用居多的都是使用左右浮动。,分别表示清除左浮动，清除右浮动，左右浮动都清除。
2024-07-17 17:30:59
436
原创 vue3 ＜transition＞ 组件过渡动画速过
Vue 2.x 中就已经引入的，用于实现元素的过渡动画效果。它允许开发者在元素被插入、更新或移除时应用动画。Vue 3.x 中继续支持并改进了组件，包括对过渡类名的调整以提高清晰度（如使用等）
2024-07-16 15:39:55
977
原创 你不知道的JavaScript---强制类型转换
强制类型转换（Coercion）是指将一种数据类型转换为另一种数据类型的过程。在JavaScript中，这种转换可以是显式的（通过开发者明确调用转换函数）或隐式的（由JavaScript引擎自动进行）。
2024-07-16 15:27:56
775
原创 webpack2源码架构设计与构建流程
代码中的类：Compiler类，Compilation类，NormalModuleFactory类，NormalModule类，Dependency类，Chunk类，Parser类，MainTemplate类等。从options.entry开始到其依赖链上的解析是由dependency驱动，先有dependency再有模块，比如在这里构建从SingleEntryDependency开始的，然后创建该依赖关联的模块，创建依赖后再解析该模块的依赖，再从依赖到模块，因此是先有依赖再有模块。
2024-07-16 15:25:10
1213
原创 怎样让CSS的opacity过渡动画结束后元素真实消失
有这么一个常见需求：hover显示二维码，淡出一张图片，移出则图片消失。opacity很好做动画，问题是opacity为0时怎么让元素真的从页面消失当使用CSS的opacity过渡动画使元素逐渐消失时，元素并不会从DOM树中移除，因此它仍然存在页面上，尽管是完全透明的。
2024-07-16 15:22:31
716
原创 学习css的clip-path属性
通过本文的学习,你将会学到认识并学习css属性clip-path的一些用法搭配使用JS在网站上创建好玩的交互效果clip-path是 CSS 的一个属性，它允许你定义一个剪裁区域，用于裁剪元素的显示区域。这个剪裁区域可以是基本形状、SVG 路径、或是外部图像等。被裁剪的元素只会显示在定义的剪裁区域内，超出部分会被隐藏。
2024-07-11 17:39:19
505
原创 一根烟时间写个导出功能
大家好， 最近公司在做一个类似医疗的项目，由于前端的开发人员有些许变故，而且公司暂时没有找到合适的前端开发人员。所以，前端开发的任务也落在了我们后端的身上。没办法，时间紧任务重，只能硬着头皮上了。之前在刚开始的时候时候，我们是前后端不分离的，一直都是一个人来写。所以前端方面的知识我还是会一些的，所以当领导将任务下发下来的时候，不会说是“老虎吃天，无从下爪”。
2024-07-10 17:21:34
333
原创 CSS 中的外边距折叠及 BFC
外边距折叠是指当两个或多个块级元素的垂直外边距（即上边距和下边距）相遇时，它们会合并为一个外边距，而不是简单地相加。折叠后的外边距的高度等于参与折叠的各个外边距中的最大者。BFC（Block Formatting Context, 块级格式化上下文）是一种独立的渲染区域，它规定了内部元素如何布局，并且不会与外部的布局相互影响。BFC 可以用来解决很多 CSS 布局问题，比如清除浮动、避免外边距折叠等。
2024-07-10 17:14:30
889
原创 记录react-router中Prompt组件使用
前言： 当我们在操作页面时，如果页面中的某些内容被改变，我们又不希望操作者离开页面时数据丢失或者重置，这时我们通常会在取消按钮上绑定一个点击事件来提醒操作者，当前的操作可能会导致已填写的数据丢失，通常情况出现在表单提交时。但有一种例外就是操作人直接切换路由这个时候就需要我们用到今天所讲的Prompt组件。Prompt是react-router为我们提供的一个组件，他允许我们在切换路由的时候给出合理的提示来规避一些额外的情况。希望可以帮助到被这种变态需求困惑的人。
2024-07-09 14:36:39
1141
原创 css实现渐变色圆角边框
因此，实现这个效果的另一个思路是：利用两个圆角矩形的面积差形成边框。属性设置两组颜色，一组是内容颜色，另一组是border边框颜色，用逗号隔开。设置两个不同大小的背景，从而利用两个背景制造面积差，也可以实现上述效果。属性，该属性规定了背景的绘制区域相对于什么位置来定位。可以看出背景色并不是我们想要的效果，原因是这两组的绘制起点都是。（背景绘制区域以 padding 区域为参考），第二组为。使用伪元素充当背景也同样可以达到上述效果，注意设置。属性，该属性规定了背景的绘制区域。，并设置父元素的内边距。
2024-07-08 19:16:43
822
原创 ES6---变量的解构赋值
你好，我是小白Coding日志，一个热爱技术的程序员。在这里，我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客，一起在技术的世界里探索前行吧！看这篇文章前先问一个问题：为什么要使用变量解构赋值？它一般在什么场景下使用？
2024-07-05 17:42:27
647
原创 React 19 更新了什么之编译器篇
React 历史上一直缺乏编译器，而其他框架早已使用编译器来优化性能。React 编译器通过提供对组件渲染的细粒度控制改变了这一点。使用编译器后，React 应用程序中只有必要的部分会重新渲染，大大提高了效率。
2024-07-05 17:31:21
320
原创 面试官上机考我Vue3如何安装，我顺便给他讲“工作经历”模块，如何突出亮点
这篇文章，先是讲了Vue3的安装过程（你可以不用看，评论区我告诉你原因，主要是后面内容）。后面讲述了“工作经历”模块的注意点，也是希望我们尽量可以突出自己的亮点。这些属于是内功心法，正所谓紫霞秘籍，入门初级，简历宝典，登峰造极。下一节呢，我们会结合一些具体的招式，实战一下“工作经历”模块，该如何具体去写。原文：https://juejin.cn/post/7387915277345701925。
2024-07-05 17:27:40
689
原创 TypeScript 系列 -- Class 类的语法和继承
属性一般写在类里面的顶部// 定义属性name?: string;// 名称health?: number;// 血量damage?: number;// 伤害值// 定义属性// 为属性赋值（并规定好默认值）?'Unknown';?0;?0;// 定义方法console.log(`${this.name}向${direction}移动`);console.log(`${this.name}恢复血量：+${bloodVolume}`);
2024-07-04 18:52:05
339
原创 前端性能优化法宝：“文档碎片”
文档碎片虽小，却能在关键时刻发挥大作用。掌握这一技巧，不仅能提升你的前端开发技能，更能为用户提供更加流畅、高效的网页体验。在未来的项目中，不妨尝试应用文档碎片，见证它带来的性能奇迹吧！通过本文的学习，相信你已经对文档碎片有了深入的理解。无论是初学者还是经验丰富的开发者，掌握文档碎片的使用都将是你前端技能树上的一颗璀璨明珠。现在，就拿起你的VScode，开始实践吧！原文：https://juejin.cn/post/7387581960027488306。
2024-07-04 14:47:06
428
原创 这张图，把 vue3 的源码讲清楚了！
在了解Vue3框架设计之前，我们需要做两件事情，而这两件事情也是今天的主要内容。我们需要同步并明确一些词汇的概念，比如：声明式、命令式、运行时、编译时...。这些词汇将会在后面的框架设计中被经常涉及到。我们需要了解一些关于前端框架的一些基础的概念。框架的设计原则，开发者开发体验原则。以此来帮助大家解决一些固有的疑惑，从而揭开vue神秘的面纱。那么准备好了？我们开始吧！在Vue 3的源代码中存在一个的文件夹，该文件夹内存放的就是运行时的核心代码逻辑。中对外暴露了一个函数，叫做渲染函数render。
2024-07-03 17:37:34
1103
原创 2024年最新React大纲
React是一个用于创建用户界面的JavaScript库。它被用于超过3万个实时网站，并拥有超过7万个GitHub star。根据2021年Stack Overflow开发者调查报告，React已经超越jQuery成为最流行的Web框架，占据了大约40.14%的市场份额。React的声明性、高效性和灵活性使其成为开发者的首选。包括LinkedIn、Twitter和AirBnB在内的8千多个行业领导者都在使用React。
2024-07-02 16:53:52
599
原创 react出道101问-- 出水芙蓉
在添加 Hooks（即 React 16.8 及更高版本）后，始终建议在 React 中使用函数组件而不是类组件。因为您也可以在函数组件中使用仅在类组件中可用的状态、生命周期方法和其他功能。重点是，只要状态对象发生变化，组件就会重新渲染。始终建议使我们的状态尽可能简单，并尽量减少有状态组件的数量。State 与 props 类似，但它是私有的并且完全由组件控制，也就是说，在所有者组件决定传递它之前，任何其他组件都无法访问它。钩子已用于向 User 组件添加状态，并返回包含当前状态和更新它的函数的数组。
2024-07-01 16:45:47
533
原创 5步讲明Vue3 watch侦听器原理实现
一直是 Vue3 响应式系统中不可或缺的组成部分，他能实现对响应式变量的监听，有immediate、deep和 flush 等配置。但watch终究不是魔法，你知道项目中每一个watch的背后都发生了什么吗？本文不会粘贴大量源码，但会从流程图的角度讲解watch的原理实现，我会将watch的实现逻辑抽象成5个关键步骤，让你清晰的了解到 Vue3 的 watch 原理原来这么简单。在阅读本文之前，你需要对 Vue3 响应式原理有一定了解。如果你还不太了解，笔者前文一定要看看~
2024-06-28 12:11:45
651
原创 Vue2项目 在开发模式下 点击页面元素 唤起 IDE
你是否遇到以下的一些问题:需要使用到的 包有2个，分别是 (其中 依赖于 版本，如果项目中没有用到， 建议使用另一个包 ,两者参数一致，在不同的场景使用拥有不同的选择 ) 仓库链接 preTransformNode.ts 文件仓库链接 包的功能是: 在 打包阶段 调用 的 钩子去插入一段 ，被插入的 就是唤起 IDE 的。 ( 可在 编译阶段 插入任意一段 ， 欢迎大家在业务中使用) 仓库地址。 此插件基于~~~~~~~~ 实现的，所以你的项目如果没有使用 、~~~~~~~~ ，接入此插件不
2024-06-27 18:42:54
893
1
原创 前端需要知道的 console 命令详解
在如今的 Web 开发中，console命令是我们最得力的助手之一。它不仅仅是一个简单的日志输出工具，更是一个强大的调试和分析工具，能够帮助我们深入理解代码的运行机制，优化性能，以及快速定位问题。console对象是浏览器提供的全局对象，它提供了一系列的方法来输出信息到浏览器的控制台。然而，我们大多数人可能仅仅熟悉使用来输出信息或者 vscode 的 debuger，而忽略了其他同样强大但较少为人所知的命令。其实console对象为我们提供了很多打印的方法：接下来我将带大家一起尝试console。
2024-06-26 15:59:19
1197
原创 js中你认为的深拷贝真的够‘深’吗？
在我们日常编码的时候，经常会碰到一种情况，就是要拷贝某个对象（在js中拷贝只讨论在引用类型，也就是对象上，因为js中基本类型的拷贝直接赋值就好了），拿到一个“一模一样”的“新”对象，但是在js中，很多种方式的拷贝并不能有效地拿到这个“新”对象，<>而只是简单地拿到了这个对象的引用地址，这样的引用就有可能会影响到原对象的属性，并不能满足拿到一个一模一样的“新”对象这个需求，我们称这种拷贝为浅拷贝。而深拷贝则相反，是能够真正拿到一个“一模一样”并且使用起来不影响原对象的的对象。
2024-06-26 15:55:16
542
原创 vue3+ant-design-vue 实现 input 模拟密码框效果
网上找到了很多简单的方案，比如加 readonly 属性再去掉等，都没有效果。只剩下使用 input 模拟密码框交互的方案。备注：代码逻辑上，依赖于光标位置的赋值取值时机先后；selectionchange 会比 change 事件后触发。测试：怎么忘记密码和确认密码还有记住密码的提示框？测试：怎么忘记密码和确认密码被自动填充记住的密码了？我： 反手给密码框加上了 autocomplete="off"如果有不足或有问题的地方，欢迎留言评论。的思路做了 vue3 的版本。
2024-06-26 15:51:34
451
原创 从四个维度带你读懂HTTP
HTTP 协议作为 Web 的核心，其发展和创新从未停止。从最初的 HTTP/0.9 到现在的 HTTP/3，HTTP 协议不断演进，以满足不断变化的网络需求。了解 HTTP 的各个方面，对于任何希望在 Web 领域发展的开发者来说都是至关重要的。原文：https://juejin.cn/post/7384376473647742995。
2024-06-26 15:46:08
653
原创 Vue组件父子之间的通信
我们知道，在Vue中是组件化开发，每个组件通常负责特定的功能或界面部分。为了构建一个复杂的应用程序，不同的组件需要互相协作，这就需要组件之间进行通信，今天我们聊聊Vue中父子之间的通信。案例演示：现在我们有一个input输入框，和一个点击添加数据的按钮，当我们在输入框中输入完内容后，将数据渲染在页面上。今天我们聊了Vue中组件中父子组件之间相互通信的方法，父传子有一种，子传父有三种方法。
2024-06-26 15:39:07
384
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人