- 博客(894)
- 资源 (39)
- 收藏
- 关注
RSS订阅原创 75.将插槽传递给子组件&不要在模板 ref 中使用响应式对象
将插槽传递给子组件在某些情况下，我们想将父组件的所有插槽传递给子组件。当创建一个为子组件添加一些功能的包装组件时，这尤其有用。假设我们有一个 Child.vue 组件，它有两个命名插槽， top 和 bottom ：<template> <div> <h2>Child</h2> <slot name="top" />...
2024-04-04 09:18:47
254
原创 我应该使用按钮还是链接
在网页无障碍领域，最具争议的问题之一是，在创建某些类型的交互元素时，应该使用按钮还是链接。为什么这个问题如此有争议？多年来，无障碍专家已经无数次回答了这个问题。同时，还有大量的参考文献提供了这个问题的答案。答案很简单，只有在没有考虑到为什么链接和按钮的外观和行为完全不同的情况下，才会引起争议。按钮和链接的行为有何不同？首先，了解按钮和链接的区别很重要。我曾看到有人错误地将它们混为一谈，过度简化为 ...
2024-03-17 10:18:28
674
原创 74.强制重新渲染 Vue 组件的最佳方法&检查组件是否附加了事件监听器
强制重新渲染 Vue 组件的最佳方法如果你需要强制重新渲染 Vue 组件，那么你很可能遇到了 Vue 响应性系统的问题。根据我的经验，你可能是做错了什么，没有正确使用 Vue 的响应性系统。不过，在某些情况下，有必要强制重新渲染组件。例如，当你使用的第三方库与 Vue 的响应性系统不兼容时。如果第三方库直接修改 DOM，并且不提供通知 Vue 更改的方法，那么就必须强制重新渲染组件。下面是使用 k...
2024-01-28 22:53:59
410
原创 73.自动导入组件&子组件中访问模板引用&unhead 管理 header&Pina 撤销和重做功能
如何在子组件中访问模板引用自动导入组件在 Vue3 中，我们可以使用 unplugin-vue-components 来帮我们自动导入组件。首先，安装插件：npmiunplugin-vue-components-D然后，将其添加到 vite.config.ts 中:importComponentsfrom'unplugin-vue-components/vite'exportde...
2024-01-14 09:58:26
485
原创 利用属性选择器对外部链接进行样式设计
你可能会注意到，你访问的一些网站上的外部链接旁边会显示一个小图标。这对用户来说非常有帮助，因为它让他们知道这个链接会将他们带到站点外部。我们可以简单地使用属性选择器来实现外部链接的自定义样式。使用属性选择器CSS 允许我们根据 HTML 元素的属性来设置样式，方法是将它们放在方括号中。例如，我们可以为具有 hidden 属性的任何元素设置 display 属性为 none：[hidden]{...
2023-11-30 08:35:45
935
原创 让你开发更舒适的 Tailwind 技巧
免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验使用 Tailwind CSS，我避免了在 React 项目中复制大量 CSS 文件的麻烦，使网页开发变得更加迅速高效。虽然 Tailwind 已经非常优秀，但我还是发现了一些技巧，可以进一步提升使用这个框架的体验。IDE 设置智能提示扩展Tailwind 智能提示是一款适用于 VSCode 和 JetBrains（如 ID...
2023-11-28 10:17:15
1221
原创 为什么margin、padding和其他间距技术应使用 px 单位
为什么 margin 和 padding 关系如此密切CSS margin 和 padding 属性经常被放在一起讨论，原因有两个：它们都影响空白区域，并且在 CSS 盒模型中紧挨着，只有在存在边框的情况下才会被边框分隔开来。它们的值接受几乎完全相同的 CSS 数据类型： length 和 percentage （ margin 也接受 auto ，但这对我们现在讨论的内容并不重要）。CSS 的长...
2023-11-27 11:50:42
1022
原创 从 ES2021 到 ES2023 的 13 个实用的 JavaScript 新功能
以下是 ECMAScript 从 ES2021 到 ES2023 中引入的一些有用且令人兴奋的功能：ES2021String.prototype.replaceAll()：使用该方法可以替换字符串中出现的所有子串。逻辑赋值运算符（&&=、||=、??=）：这些运算符将逻辑运算符（AND、OR、nullish coalescing）与赋值相结合ES2022（拟议）Array.prot...
2023-11-24 08:30:22
1064
原创 使用 Pinia 的五个技巧
在这篇文章中，想与大家分享使用 Pinia 的五大技巧。以下是简要总结：不要创建无用的 getter在 Option Stores 中使用组合式函数（composables）对于复杂的组合式函数，使用 Setup Stores使用 Setup Stores 注入全局变量，如路由器（Router）如何创建私有状态1.不要创建无用的 getter你并不需要为所有事情使用 getter。在 Vuex 中...
2023-11-23 10:20:59
428
原创 新 CSS Math方法：rem() 和 mod()
CSS 添加了许多新的数学函数来补充旧有的函数（如 calc() 和最近的 clamp() ）。这些函数最终都表示一个数值，但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数的常见用例以及不太常见的用例。rem() 函数的基础知识余数的数学概念来自除法，表示一个数不能平均除以另一个数时的余数。例如，在 9 ÷ 4 中， 9 不是 4 的倍数，因此 4 不能平均分成 9 。你可以把两个 ...
2023-11-22 08:40:33
936
原创 JSON非常慢：这里有更快的替代方案！
是的，你没听错！JSON，这种在网络开发中普遍用于数据交换的格式，可能正在拖慢我们的应用程序。在速度和响应性至关重要的世界里，检查 JSON 的性能影响至关重要。在这篇博客中，深入探讨 JSON 可能成为应用程序瓶颈的原因，并探索更快的替代方法和优化技术，使您的应用程序保持最佳运行状态。JSON 是什么，为什么要关心？JSON 是 JavaScript Object Notation 的缩写，一种...
2023-11-21 08:41:02
390
原创 干净的前端架构
干净的前端架构,围绕这个话题有很多原则：SOLID、KISS（保持简单明了）、DRY（不要重复自己）、DDD（领域驱动设计）等等。为什么需要前端架构？功能性和非功能性的要求不仅应该在后端应用，还应该在前端应用。因此，有了前端架构，我们就能满足业务需求。此外，我们能够更好地理解项目的复杂性，从而降低项目的风险、时间和成本。然而，作者认为，前端架构的最有价值的原因是任何项目的可维护性和可扩展性。那么，...
2023-11-20 10:20:14
34
原创 令人期待的 CSS 新功能：让编码更高效
CSS 是一种不断发展的语言。每一次迭代，它都会变得越来越好。因此，了解最新的 CSS 功能非常重要，这样你才能在项目中使用它们，减少对第三方库的依赖。本文将介绍一些即将推出的 CSS 新特性，这些特性将简化你的开发工作。虽然这些特性尚未在所有浏览器中支持，但可以提前使用它们，以适应未来的项目需求。在不支持这些特性的浏览器中，它们大多会被忽略。text-wrap 属性text-wrap 属性用于指...
2023-11-16 08:52:42
71
原创 不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度
为什么尽管一些网页设计工具为按钮等元素指定了 CSS 高度值，但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success Criterion 1.4.4 Resize Text.标准要求：除了字幕和文本图片外，文本可以在不使用辅助技术的情况下放大到 200% 而不会丢失内容或功能。如果对影响元素计算高度和宽度的 CSS 属性使用固定值，当文字大小增大时，元素内部的文字会被截断。还不信...
2023-11-14 09:16:48
35
原创 CSS @scope 如何取代 BEM
前端工程师最常见且最具挑战性的问题之一是 CSS 命名约定。随着 Block Element Modifier（BEM）方法的流行，许多人习惯于按照一种可维护的模式组织他们的样式。即将在 Chrome 浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分，从而进一步提高了 BEM 的性能。这将使样式表更易于维护，同时对 CSS 级联进行更严格的控制。在这篇文章中，我们将展示如何在 ...
2023-11-13 10:00:37
145
原创 as const：一个被低估的 TypeScript 特性
你有没有感觉 TypeScript中可能有一些被低估但却非常有用的工具，你并没有充分利用？的确有，今天我们要重点介绍一个：as const。它虽然沉默却强大，而且非常有力，是一个被低估的功能，但它的力量却强大无比。理解 'as const'以下是一个没有 as const 的代码片段：constmenu={home:'/home',about:'/about',...
2023-11-09 09:01:11
76
原创 JavaScript的大分水岭:CommonJS vs ES模块
所周知，JavaScript社区喜欢进行热烈的辩论。四年来，我们如何组织代码的问题上一直存在一个分歧——这是一个基本但令人意外地有争议的问题，继续将开发者分开。这种分歧围绕着 CommonJS 和 ES 模块，这是两个用于划分 JavaScript代码的主要系统。理解这个分歧当JavaScript最初被发明时，它的主要角色是作为Web浏览器的脚本语言。但是，随着Node.js的出现，似乎展现出了一...
2023-11-08 08:40:17
131
原创 这5道JavaScript题，90%的开发者都做不出来
让我们看看TOP-5最困难的JS挑战并分析它们。剧透：只有8%的回答者正确地解决了TOP-1测验TOP-5. 默认函数参数 & 函数长度属性。 18%的正确答案。functionfoo(a,b=10,c){console.log(foo.length);}foo(1,2,3);答案：1关键点是，函数的 length 属性应该提供关于函数的 arity 的信息，它...
2023-11-07 08:35:24
55
原创 2023年WebAssembly 现状
WebAssembly 2023的调查已经结束，结果揭晓……真的很吸引人！如果你想要简短的总结，这里有一些亮点：Rust 和 JavaScript 的使用仍在继续增加，但更值得注意的变化发生在下面—— Swift 和 Zig 的采纳率都有了显著的增长。与此同时，当涉及开发者“渴望”使用哪种语言时，Zig、Kotlin 和C#的受欢迎程度超过了当前的使用情况。WebAssembly 仍然主要用于we...
2023-11-06 08:40:19
80
原创 72.动态插槽名称&无渲染组件与可组合
动态插槽名称使用动态插槽名，这对于多步骤表单或表格组件等情况非常有用。下面我们看看如何在运行时动态生成插槽：Child.vue<script setup lang="ts">defineProps<{ items: Array<{ id: string; name: string }> }>();</script><template>...
2023-11-05 15:18:53
117
原创 慌了，我老板说：AI 将100% 取代前端
在这篇文章中，作者讨论了前端开发与人工智能之间的关系，以及AI是否会在未来取代前端开发工作。其中，文章还提到了一些AI在前端开发中的应用，如自动化重复性任务、生成模板代码和优化性能。这些应用可以提高前端开发的效率，但作者强调人类的创造力和设计能力仍然是不可替代的。下面是正文~~~~我是一名前端。所以，当老板告诉我们前端开发将被AI完全取代时，确实有些害怕。早在 Chatgpt 革命之前，他就已经预...
2023-11-03 08:36:03
125
原创 我们可以依靠HTTPS来保证我们的安全吗
正如我们的大部分技术社区都同意的那样，数字安全严重依赖于我们经常认为理所当然的缩写词。HTTPS是其中一个缩写词，它为你的网络浏览增加了额外的安全层。HTTPS 是 Web 连接的守护者大多数网址以 https开头，其中的's'表示与你正在访问的网站的安全连接。HTTPS 代表 Hypertext Transfer Protocol Secure，它加密了通过互联网发送的信息，主要是在你的设备（P...
2023-11-02 10:20:51
76
原创 Tailwind CSS vs 现代CSS，Tailwind CSS 会像CSS-in-JS 一样亡？
本文是 关于Tailwind CSS 与 现代 CSS之间比较的文章。文章中作者详细比较了这两种CSS开发方法的优缺点。他指出，Tailwind CSS是一种基于类的CSS框架，提供了快速开发网站的便利性，但可能导致HTML代码的臃肿。另一方面，现代CSS方法更加模块化和可维护，但编写速度可能较慢。下面是正文~~Tailwind 是一个深受喜爱的 CSS 框架，它拥有许多受欢迎的功能，用于创建用户...
2023-11-01 08:35:09
283
原创 Lodash 真的死了吗？Lodash 5 在哪里？
与一些传言相反，Lodash依然活跃，并正在迈向Lodash 5的发布！Lodash 是那些为 JavaScript 提供便利功能的实用程序库之一，它使编程变得更加轻松。许多开发者使用它来简化对象和数组的处理。它也是一个像 Moment.js那样被捕获得措手不及的库。由于没有模块化，它从一些项目中被丢弃，因为当你加载5MB的分析工具时，每多1kB的负担都太大了。我偶尔使用 Lodash，因为它很有...
2023-10-31 08:35:20
677
原创 JavaScript模式匹配的未来
今天，揭开一个令人兴奋的功能的面纱，这个功能通常在 Elixir 这样的函数式编程语言中看到，现在被提议用于 JavaScript ——模式匹配。"你好，JavaScript!"动手试试。这里有一个超基础的函数叫做 greet，它接受一个带有'ID'和'role'的用户，并根据用户角色返回问候语。听起来简单吗？functiongreet({id,role}){if(role==...
2023-10-30 10:20:13
42
原创 Vue 3.3.6 发布，得益于WeakMap，它更快了
性能改进和DOM节点的附加属性的类型检查使新的Vue值得更新。Vue团队确实做了很多工作。实际上，他们在同一天发布了两个子版本。Vue 3.3.5 和 3.3.6 都在2023年10月20日发布。WeakMaps其中一个得到改进的是在可能的情况下从 Maps 和 Sets 转移到WeakMaps 和WeakSets。那是什么，为什么这么重要？如果你在 Maps或 Sets 中存储东西，你会对这些东...
2023-10-26 16:13:38
157
原创 如何 通过使用优先级提示，来控制所有网页资源加载顺序
当你打开浏览器的网络标签时，你会看到大量的活动。资源正在下载，信息正在提交，事件正在记录，等等。由于有太多的活动，有效地管理这些流量的优先级变得至关重要。带宽争用是真实存在的，当所有请求同时触发时，有些HTTP请求的优先级并不像其他请求那样高。例如，如果你必须选择，你可能更希望某人的付款请求成功完成，而不是仅仅表示他们尝试过的分析请求。而让你的主要图片尽快显示无疑比在页面底部渲染你的标志更为重要。...
2023-10-25 10:21:00
412
原创 让图片完美适应：掌握 CSS 的object-fit与object-position
在CSS中，我们可以使用 background-size 和background-position属性为背景图像设置大小和位置。而 object-fit 和 object-position 属性则允许我们对嵌入的图像（以及其他替代元素，如视频）做类似的操作。在本文中，我们将深入探讨如何使用 object-fit 将图像适应到特定的空间中，以及如何使用 object-position 在该空间中进行...
2023-10-24 07:45:49
2446
原创 你 JavaScript 正在泄漏内存而你却不知道
内存泄漏可以被视为你家中的水泄漏；虽然一开始小滴水可能看起来不是什么大问题，但随着时间的推移，它们可能会造成严重的损害。同样，在JavaScript中，当不再需要的对象没有从内存中释放时，就会发生内存泄漏。随着时间的推移，这种累积的内存使用可以减慢甚至崩溃你的应用程序。垃圾收集器的角色在编程领域，尤其是在处理 JavaScript 等语言时，内存管理至关重要。幸运的是，JavaScript 内置了...
2023-10-23 08:45:36
57
原创 前端工作方式要换了？HTMX简介：无需JavaScript的动态HTML
HTMX允许你使用扩展的HTML语法代替 JavaScript 来实现交互性。HTMX 在标记中直接为你提供HTTP 交互，并支持许多其他交互需求，无需求助于 JavaScript。这是一个有趣的想法，可能最终会影响到web前端的工作方式。让我们看看如何使用HTMX以及它的吸引力。什么是HTMX？HTMX已经存在了一段时间，但它一直是一个不太为人知的项目。它最近被接受到 GitHub Accele...
2023-10-19 08:37:56
928
原创 现在就可以使用的 20 个 JavaScript 技巧和窍门
今天探讨 20 种 JavaScript 技巧和窍门，每种技巧和窍门都有通俗易懂的示例。让我们一起来提升你的 JavaScript 技能吧！1. 解构魔法：轻松提取值解构允许你轻松地从数组或对象中解包值。以下是一个例子：constperson={name:'Alice’,age:30};const{name,age}=person;console.log(name)...
2023-10-18 10:20:35
74
原创 Vue 中可重用组件的 3 个主要问题
当我们谈论或讨论在 Vue 中创建用户界面组件时，经常会提到可重用性。没错，Vue 的关键原则之一就是其基于组件的架构，这促进了可重用性和模块化。但这到底意味着什么呢？比方说，你创建了一个可重复使用的组件：你或你的同事真的能在系统的另一个部分重复使用它吗？有了新的需求，你可能不得不考虑修改 "可重复使用的组件"。如果需要拆分 "可重用组件"，以便将拆分后的组件应用到其他地方，该怎么办？在 Vue ...
2023-10-17 07:20:47
223
原创 为什么 HTTP/3 正在吞噬世界
超文本传输协议（HTTP）是互联网的基石，有助于加载网页、流式传输视频以及为我们喜爱的应用程序获取数据。去年，负责定义互联网技术的互联网工程任务组（IETF）对该协议的新版本 HTTP/3 进行了标准化。此后，HTTP/3 和相关的 QUIC 协议在公共网络上迅速普及。具体数字取决于资料来源和测量方法，全球支持 HTTP/3 的网络服务器和网络的比例从 19% 到 50% 以上不等。由于谷歌和 M...
2023-10-16 08:55:10
170
原创 71.同步使用你的可组合代码
你应该始终在setup()钩子或<script setup>中同步调用你的composables。调用composables时，最好不要使用await或Promise.all()。例如，以下使用setup()钩子的代码是不推荐的：<script>import { ref, watch, onMounted, onUnmounted } from 'vue'export ...
2023-10-15 18:08:20
64
原创 Tailwind CSS 真有那么好吗？讨厌它的前六大原因
Tailwind CSS 是一个受欢迎的“实用优先”的 CSS 框架，声称可以帮助你更快、更轻松地创建自定义设计。然而，并不是每个人都对 Tailwind CSS 感到满意。事实上，有很多原因让你应该避免使用它，而坚持使用纯 CSS 或其他框架。以下是你应该讨厌 Tailwind CSS 的主要原因：它失去了 HTML 和 CSS 的语义它在你的 HTML 中大量添加类它不具有可扩展性和可重用性它...
2023-10-13 08:37:38
113
原创 一劳永逸地搞懂 JavaScript中‘this’
引言：this 在 JS 中 —— 为什么它如此重要你是否曾觉得 JavaScript 似乎在戏弄你，尤其是当它在你面前挥舞 this 关键字时？那种“好吧，JavaScript，今天我们玩什么游戏？”的感觉。特别是当你试图确定在某段代码中 this 引用的是什么时。理解 this 就像在JavaScript广阔的领域中握住指南针。这不仅仅是为了弄清楚一个关键字；它是为了打开通往高级编码技巧和模式...
2023-10-12 10:20:55
48
原创 大赞！Chrome 浏览器现在会显示每个活动标签页的内存使用情况了
Chrome 浏览器最近推出了悬停卡，可以显示每个打开的标签页的内存使用情况。当你将鼠标悬停在某个标签页上时，弹出窗口将显示该标签页的内存使用情况，以及 Chrome 浏览器的内存保护器功能是否冻结了该标签页以节省内存。该功能使 Chrome 浏览器的标签页节流行为透明化，并让用户深入了解网站的内存消耗情况。新的悬浮卡基于 Chrome 浏览器的内存节省功能(Memory Saver)，也可以通过...
2023-10-10 08:39:40
1292
原创 Node.js 正在逐渐被淘汰！Bun 1.0 正在改变 JavaScript 的游戏规则
在深入讨论之前，我们需要解释什么是 JavaScript 运行时以及为什么我们应该关心其速度。想象一下，你用 JavaScript 写了一个故事，需要有人大声读出来。JavaScript 运行时就像是那个友好的叙述者，为你的故事赋予生命！它是一个特殊的环境，你的 JavaScript 故事在这里被阅读和执行。更具体地说，这个“叙述者”包括了像 JavaScript 引擎这样的组件，这是运行时的核心...
2023-10-09 08:37:51
464
原创 Promise 和 Async/Await的区别
如果你正在阅读这篇文章，你可能已经理解了 promise 和 async/await 在执行上下文中的不同之处。在 JavaScript 中，promises 和 async/await 是处理异步操作的两种不同方法。但它们之间关系密切。PromisePromise 是最终导致异步操作完成或失败的对象。Promise 可以处于三种状态之一：待定、已完成或已拒绝。当异步操作完成时，Promise 要...
2023-10-08 10:20:42
181
原创 Astro是2023年最好的web框架，原因如下
以下解释是全面理解为什么 Astro 在2023年成为最佳 web 框架所必需的。问题：JavaScript过多在 Web 开发世界中，变化发生得非常快，尤其是对前端JavaScript开发者而言。变化之快，以至于我们有时会忘记为谁创建网站和 web 应用：用户。自从 BackboneJS 和 AngularJS 在2011/2012年变得非常流行后，web 就被SPA（单页应用）淹没了。别误会...
2023-10-07 10:00:13
5066
ZigBee和重力传感器
2013-01-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人