- 博客(83)
- 收藏
- 关注
RSS订阅原创 前端模块化：认识CJS, AMD, UMD, ESM, System 和 IIFE
（AMD）AMD脱胎于 CJS，支持异步模块加载。AMD 和 CJS 的主要区别在于它是否支持异步模块加载。RequireJS 使用 AMD 在浏览器端工作。AMD 提供了一些 CJS 相似的特性。它允许在代码中使用类似的exports和require()接口，尽管它自己的define()接口更基础更受欢迎。（UMD）UMD 被设计用于任何地方 — 包括服务端和浏览器端。它试图兼容目前最流行的 script 加载器（如 RequireJS）。在许多情况下，它使用 AMD 作为基础，且兼容 CJS。
2025-03-10 22:52:09
708
原创 CDN 回源和回源率/缓存命中率
回源是指浏览器在发送请求报文时，响应该请求报文的是源站点的服务器，而不是通过各节点上的缓存服务器（比如Nginx开启缓存），那么这个过程就称作为回源。
2025-02-28 21:12:45
366
原创 域名系统（DNS）应知应会
域名系统DNS是因特网使用的命名系统，用来把便于人们记忆的，具有特定含义的主机名（如 www.baidu.com ）转化为便于机器处理的IP地址。DNS系统采用C/S模型，协议运行在UDP上，使用53好端口。
2025-02-28 20:50:55
294
原创 这代码要是这样写会被打吧？类型操作趣题分享，学习堆JavaScript堆内存和栈内存
最近吧，不是备战秋招所以在牛客上面刷题嘛，然后就发现了这神奇的一道题，不过还是有考察价值和值得学习的知识点的，我们来一起看看吧！😗。
2025-02-26 20:49:42
344
原创 axios、XHR、XML、AJAX和Fetch分不清怎么办？
axios 是一个轻量的HTTP客户端，它基于服务，支持丰富的配置，支持Promise。AJAX 不是新的编程语言，而是一种使用现有标准的新方法（编程实践），底层使用了宿主环境的（XHR）。fetch不是对 AJAX 的进一步封装，而是原生JavaScript，没有使用对象。Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道部分。XHR 是过去和现在很多网络请求方案、工具库的基础，可以用于获取任何类型的数据，而且不仅仅是 XML。
2025-02-26 20:49:03
992
原创 Nest.js 一键式 CRUD 生成器
在Nest.js项目的整个生命周期中，当我们构建新功能时，我们经常需要向我们的应用程序添加新资源。这个时候第一反应是使用生成器直接开始逐个输入指令，手动创建DTO、实体等等，是不是有点烦？（快说是！
2025-02-23 15:19:35
455
原创 JavaScript 图片的 Base64 编码及转换
Base64 是网络中存储和传输的二进制数据的普遍用法。Base64 一个字节只能表示 64 种情况，且编码格式每个字节的前两位都只能是 0，使用剩下的 6 位表示内容。Base64 最早是应用在邮件传输协议中的。当时邮件传输协议只支持 ASCII 字符传递，使用 ASCII 码来表示所有的英文字符。但是如果要在文件中传输图片、视频等资源的话，这些资源转成 ASCII 的时候会出现非英文数字的情况。而且邮件中还存在很多控制字符，这些控制字符又会成为不可见字符。
2025-02-23 15:18:23
1372
原创 04 用Vuex轻松管理组件通信
Vuex作为Vue生态的核心状态管理方案，通过规范化的数据流管理，解决了复杂应用中的状态共享难题。记住以下要点：遵循单向数据流：View → Action → Mutation → State → View合理划分模块，保持store的简洁性严格区分同步和异步操作充分利用DevTools进行调试当你面对以下场景时，Vuex将大显身手：中大型单页应用多组件共享状态需要状态持久化需要历史状态回溯现在，尝试在你的项目中引入Vuex，感受规范化状态管理带来的开发效率提升吧！
2025-02-13 21:31:50
736
原创 03 手把手教你理解Vue Router核心原理（附实战代码）
掌握这些核心原理，你就能像魔法师一样自如地操控Vue Router，构建出丝滑流畅的单页应用！记得根据实际项目需求选择最合适的模式哦~想象你在一本魔法书中翻页，页面内容会变化但书本本身不会重新印刷。企业官网推荐使用History模式 + Nginx配置。使用HTML5的History API实现。后台管理系统可使用Hash模式简化部署。❌ 兼容性要求较高（IE10+）🔧 Node.js服务器端渲染。✅ 兼容性最好（支持IE9）符号（锚点）实现路由切换。✅ 不需要服务器特殊配置。❌ 需要服务器配合配置。
2025-02-13 21:25:49
457
原创 02 Vue2修饰符入门指南：让事件处理更优雅
Vue修饰符就像给指令添加的"小尾巴"，它们用点号表示，可以帮助我们更便捷地处理DOM事件细节。就像炒菜时的调味料，能让我们的代码更"美味"！
2025-02-10 13:29:15
399
原创 01 前端必学：Vue2 组件间8种通信方式详解
组件通信是Vue开发的核心知识，本文用生活化比喻+真实案例，带你快速掌握8种通信方式的使用场景和实现方法。
2025-02-10 13:27:50
1109
原创 TS中的内置条件类型：ReturnType
总言之，条件类型就是在类型中添加条件分支，以支持更加灵活的泛型，满足更多的使用场景。表示若类型T可被赋值给类型U,那么结果类型就是X类型,否则就是Y类型。在 2.8 版本中，TypeScript 内置了一些与。条件类型使类型具有了不唯一性,同样增加了语言的灵活性。则是TS内部封装好的一些类型处理，使用起来更加便利。条件类型是一种由条件表达式所决定的类型。从参数位置移动到返回值位置，因此此时。即是表示待推断的返回值类型。条件语句中待推断的类型变量。,type T 将被视为。表示待推断的函数参数。
2025-02-01 16:03:05
382
原创 「Astro 5.0 」Astro新功能概述
**介绍 Astro 5.0！**借助 Astro 内容层从任何来源加载你的内容，并通过服务器岛屿将缓存的静态内容与动态的个性化内容相结合。继续阅读以了解有关这些强大的新功能及更多信息！什么是 Astro？ Astro 是用于构建内容驱动型网站（包括博客、营销和电子商务）的网络框架。如果你需要一个加载速度快且具有良好搜索引擎优化的网站，那么 Astro 很适合你。发布亮点包括：访问astro.new可直接在浏览器中试用 Astro 5.0，或者若要使用 Astro 5.0 启动新项目，请为你的包管理器运行命
2025-02-01 16:00:01
926
翻译 「译」不要将 DTO 传递给用户界面组件
原文链接：https://darios.blog/posts/do-not-pass-dtos-to-ui-components作者：dario’s.blog原标题：Do not pass DTOs to UI components作为前端开发人员，我们经常使用来自后端 API 或服务的数据传输对象 （DTOs, data transfer objects）。这些 DTO 表示用于在网络中传输的原始数据结构。然而，在 UI 组件中直接使用 DTOs 可能会导致可维护性、可重用性和关注点分离方面的问题。
2025-02-01 15:57:13
22
原创 「译」2024 年的 5 个 JavaScript 安全最佳实践
链接：https://thenewstack.io/5-javascript-security-best-practices-for-2024/作者：Alexander T. Williams原标题：5 JavaScript Security Best Practices for 2024网络安全已成为一个瞬息万变的战场，JavaScript 应用程序的安全性也不例外。Web 应用程序已成为黑客试图获取敏感数据和财务详细信息的常见目标，这凸显了2024 年的重要性。
2025-01-30 18:36:29
1168
原创 如何进行API 版本控制
API版本控制是管理和跟踪对API的更改的过程。它还涉及将这些更改传达给API的使用者。更改是API开发的自然组成部分。有时，开发人员必须更新其API的代码以修复安全漏洞，而其他更改则会引入新的特性或功能。有些更改根本不会影响使用者，而另一些称为“破坏性更改”的更改会导致向后兼容性问题，例如意外错误和数据损坏。API版本控制可确保成功推出这些更改，以保持消费者信任，同时保持API安全、无错误和高性能。在这里，我们将回顾API版本控制的好处，并讨论几个需要版本控制的场景。
2025-01-30 18:35:44
1119
原创 BFE-TS TypeScript类型体操练习 Easy 31-40
题目来自TypeScript题目 | BFE.dev - 前端刷题，准备前端面试拿到心仪的Offer，总共60题，带你完爆类型体操！
2024-10-27 13:48:00
679
原创 「译」Nuxt3：新渲染模式-边缘渲染、swr等
文章虽然介绍的是传统渲染模式和 Nuxt 3 采用的新的更细致的渲染模式的区别，但是对学习和区分几种目前主流的渲染模式也有一定帮助。浏览器和服务器都可以解析 JavaScript 代码以将 Vue.js 组件呈现为 HTML 元素。此步骤称为。Nuxt 同时支持和渲染。这两种方法各有利弊，我们将在本节中介绍。
2024-10-27 13:46:25
1253
原创 Vue Router 浅析
这样的配置就可以实现访问 https://a.b.com/main/a/ 或者 https://a.b.com/main/b/, 即访问 https://a.b.com/main/ 下的任意子路径, 都可以直接访问到index.html, 正常访问页面。这样的配置就可以实现访问 https://a.b.com/main/a/ 或者 https://a.b.com/main/b/, 即访问 https://a.b.com/main/ 下的任意子路径, 都可以直接访问到index.html, 正常访问页面。
2024-10-22 22:58:43
702
原创 # VueBus 总线传参数
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即 **EventBus**来通信。EventBus又称为事件总线。在Vue中可以使用EventBus。
2024-10-22 22:57:19
884
原创 来了解一下 Island Architecture 孤岛架构
本文着眼于岛屿架构，它们存在的原因以及当前应用它们的框架。在接下来的系列文章中，我想更深入地研究上面提到的框架 —— Astro，Marko和Qwik，以及其他框架，如Svelte，Angular和React，以及它们在内部之间的区别。
2024-10-21 23:25:27
1104
原创 URL 设计最佳实践
以下是Kyle Aster关于为什么URL 是通用的。它们适用于 Firefox、Chrome、Safari、Internet Explorer、cURL、wget、iPhone、Android，甚至写在便签上。它们是 Web 的一种通用语法。不要认为这是理所当然的。我喜欢这个无处不在的 URL 提醒。
2024-10-21 23:19:00
1029
原创 enquirer 指南
提示在用户键入时自动完成，并将所选值作为字符串返回。await（需要在 async 函数内部运行）遇到多个问题，可以将多个问题对象以数组形式传给。使用 enquirer 的最简单方法是将。方法，返回完整的答案对象。
2024-10-20 11:49:03
522
原创 产品经理基础知识文档
社区团购是电子商务模式之一，它依托社区居民团体购物的需求，通过社区商铺提供的团购优惠活动来促进商铺对核心客户的精准化宣传和消费刺激，是一种能迅速提升商铺区域知名度和美誉度的商务模式。OKR所对应的环境，是动态变化的，业务逻辑和业务结果有的时候无法预测，需要经过实践去验证，是互联网时代的产物。l 幸存者偏差：驳斥的是一种常见的逻辑谬误（“谬误”而不是“偏差”），这个被驳斥的逻辑谬误指的是只能看到经过某种筛选而产生的结果，而没有意识到筛选的过程，因此忽略了被筛选掉的关键信息。
2024-10-20 11:47:49
728
原创 Web浏览器滚动方案一览｜ rAF等
在Web开发中，实现流畅的滚动效果对于提升用户体验至关重要。为了实现这一目标，开发人员可以利用一系列的滚动方案。其中，请求动画帧（requestAnimationFrame，简称rAF）是一种常用的技术。rAF通过优化动画效果的渲染，可以避免卡顿和过度绘制的问题。此外，还有其他滚动方案如CSS动画、滚动事件监听等等，开发人员可以根据具体需求选择合适的方案。通过合理选择和应用这些滚动方案，我们可以提供更加流畅和优化的用户体验。
2024-10-14 22:31:59
927
原创 CDN 内容分发网络
它就是专门为解决“长距离”上网络访问速度慢而诞生的一种网络应用服务。“内容”“分发”和“网络”。先看一下“网络”的含义。CDN 的最核心原则是“就近访问”，如果用户能够在本地几十公里的距离之内获取到数据，那么时延就基本上变成 0 了。所以 CDN 投入了大笔资金，在全国、乃至全球的各个大枢纽城市都建立了机房，部署了大量拥有高存储高带宽的节点，构建了一个专用网络。这个网络是跨运营商、跨地域的，虽然内部也划分成多个小网络，但它们之间用高速专有线路连接，是真正的“信息高速公路”，基本上可以认为不存在网络拥堵。
2024-10-14 22:30:59
981
原创 JS代码混淆器：JavaScript obfuscator 让你的代码看起来让人痛苦
JavaScript Obfuscator 是一个强大的工具，它通过转换和混淆代码来帮助开发者保护他们的 JavaScript 源代码。这种转换不会改变程序的执行方式，但会使代码难以理解和修改，从而为源代码提供了一层保护。
2024-10-13 13:27:31
4376
1
原创 Web Component 初学者教程
本教程将教你如何构建你的第一个Web Components以及如何在应用程序中使用它们。在我们开始之前，让我们花点时间了解一下Web Components的一般情况：近年来，Web Components（也称为自定义元素）已成为几个浏览器的标准API，允许开发人员只使用HTML、CSS和JavaScript来实现可重用的组件。这里不需要React、Angular或Vue。相反，自定义元素为你提供了将所有结构（HTML）、样式（CSS）和行为（JavaScript）封装在一个自定义HTML元素中的功能。
2024-10-13 13:27:01
1391
原创 Express. js v5.0中的新增功能
详细了解Express v5.0中的主要更改和改进以及如何迁移你的应用程序Express. js终于在GitHub上发布了版本。这是Express.js团队自2014年以来的第一个主要版本。Express. js 5.0带来了一系列重要的更新、优化和删除。虽然它仍处于测试阶段，但此版本正在形成以提高性能并简化未来Node.js项目的开发。Express. js 5.0需要，因此任何仍在使用旧版本的人都需要升级。
2024-10-11 17:13:47
1124
原创 SolidStart 1.0：未来框架的形态
SolidStart 是一个 JavaScript 框架，旨在构建 SolidJS 应用程序并将其部署到各种服务提供者。这听起来与大多数其他 JavaScript 框架没有什么不同。但细节决定成败。
2024-10-11 17:13:14
1131
原创 CSS Flex 布局教程
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
2024-10-10 15:57:33
1190
原创 认识伪类与伪元素的区别
浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first-line, :first-letter 等)的单冒号写法。添加元素试试，如下，创建一个元素 span 将首字母包裹起来，进而改变其颜色，成功了。伪类即假的类，通常可以添加类来达到效果，伪元素即假元素，需要通过添加元素才能达到效果。，同样添加一个类试试，显然很容易达到同样效果，我们并没有创建新的元素只是添加了一个类。表示，CSS2.1 后规定伪类用单冒号表示，伪元素用双冒号。叫做伪类而不是伪元素，尽管它和。
2024-10-10 15:53:16
450
原创 逻辑组合伪类 :not() :is :where :has
本文将介绍4个逻辑组合伪类，分别是:not():is:where:has，这四个伪类的自身优先级为0，这与其他伪类相同，但处理时是将其和括号里的参数作为一个整体计算优先级，这就导致了实际表现出的优先级由参数决定（除了:where()的优先级总是为 0）。目前这四位目前都得到了大多数浏览器的广泛支持，同时非常实用，务必掌握哦~
2024-10-09 00:39:13
1394
原创 Astro 集成 Vue 框架教程
Astro的集成能力支持我们使用Vue3编写的组件，并且支持SSR（server-side rendering）和CSH（client-side hydration）
2024-10-09 00:38:21
1484
原创 Astro 中通过 Node.js 启用服务器端渲染
在 Astro 中启用服务端渲染（SSR, Server Side Rendering）非常简单，而且启用后可以使用新的特性
2024-10-07 11:52:39
1077
原创 UED、UCD、UE、UI、交互设计这 5 个名词的概念有哪些区别？职位分别有什么不同？
用户体验是个人主观感受，但是共性的体验是可以经由良好的设计提升的。产品设计有个BTU三圈图（Business, Technique, User），即一个好的产品，应该兼顾商业盈利，技术实现和用户需求。用户界面设计（UID）不仅仅是做”漂亮的界面“，所以不可避免的会涉及到交互设计。用户界面其实是一个比较广泛的概念，指人和机器互动过程中的界面，以车为例子，方向盘、仪表盘、换档器等都属于用户界面。交互指任何机器互动的过程，交互设计通过了解人的心理、目标和期望，使用有效的交互方式来让整个过程可用、易用。
2024-10-07 11:18:07
891
原创 在现代应用中使用 localStorage 的全面指南
localStorage API是Web浏览器的内置功能，它使Web开发人员能够在用户设备上持久地存储少量数据。它基于简单的键值对操作，允许开发人员保存字符串、数字和其他简单数据类型。即使用户关闭浏览器或离开页面，这些数据仍然可用。该API提供了一种方便的方式来维护状态并存储用户偏好，而无需依赖服务器端存储。
2024-10-07 11:16:45
1685
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人