JavaScript 是一种应用场景多且功能强大的语言，对于现代 Web 开发至关重要。以下是一些超级技巧，它们将帮助你成为更高效、更有效的 JavaScript 开发人员，每个技巧都有详细的解释和示例。 1. 使用 let 和 const 代替 var 问题： var 具有函数作用域，这可能导致错误和不可预测的行为。 解决方案：使用具有块作用域的 let 和 const 。 let count = 0; const PI = 3.14; 使用 let 和 const 有助于防止与作用域相关的错误，确保变量只能在定义的块内访问。 2. 默认参数 问题：如果没有提供参数，函数可能会失败。 解决方案：使用默认参数设置后备值。 function greet(name = 'Guest') { return Hello, ${name}! ; } console.log(greet()); // "Hello, Guest!" 默认参数确保函数具有合理的默认值，从而防止错误并使代码更加

作为一门不断演进的语言，JavaScript每年都会引入新特性。这些特性的加入，能够帮助我们编写更加简洁、高效、易于维护的代码。然而，并非所有新特性都会立即广泛应用。它们的采用往往取决于社区的接受度以及浏览器的支持情况。比如我，会根据项目需求、团队习惯以及特性的成熟度来选择是否使用这些新特性。以下是一些我认为特别有用的新JavaScript特性，以及一些补充的实例代码，大家一起共勉。 可选链 可选链让我们能够以安全的方式访问嵌套对象的属性，避免因为中间某个属性不存在而抛出错误。 const user = {   profile: {     name: 'John Doe',     contact: {       email: 'john@example.com',     },   }, }; const userEmail = user.profile?.contact?.email; console.log(userEmail); // "john@example.com" const userPhone = user.profile?.conta

在上一篇文章全景预览中，我们通过 Threejs 使用多种方式实现了全景预览的效果，以及俯瞰效果的场景动画，但是这都是在单个场景中实现的；也有读者评论说讲一下多场景下的场景过渡效果是如何实现的，那么本文我们就来学习一下多场景的过渡效果。 在实现多场景前，我们先来了解three.js中一个重要的概念： 离屏渲染 ；只有理解了这个概念，我们才能够在后续实现多场景的过渡效果。 ❝本文的全景过渡效果可以点击https://gallery.xieyufei.com/case/panorama/multi查看 ❞ 离屏渲染 离屏渲染指的是将渲染结果暂时存在GPU内部的帧缓存中，而不是直接显示在画布上，这样做的好处是可以对渲染结果进行后期处理，如添加滤镜、反射折射、当成纹理应用在几何体等等。 在three.js中，一共有3种离屏渲染的类： WebGLMultisampleRenderTarget WebGLCubeRenderTarget WebGLRenderTarget 在普通的渲染中，我们把scene场景保存到canvas画布的默认帧缓冲区，也就...

这是专栏「框架中的类型编程」的第三篇内容，你可以在 Framework Typings 或 笔者的个人博客 找到前两篇内容，在之前的内容里我们介绍了 Prisma 、tRPC 以及 Hono 中的类型编程，还顺便对 TypeScript 中的「模板字符串类型」进行了展开介绍。如果你已经理解了此前介绍的类型编程，那么在阅读本篇对 ElysiaJS 的介绍时，也不会理解得更快（摊手，毕竟本篇我们简化过的类型编程代码仍然有100+ 行，比之前三个框架的实现加起来都多。 简单介绍下 ElysiaJS ，它是一个基于 Bun 的服务端框架，号称比 Express 快 21 倍，同时还提供了非常棒的类型安全，你可以在 ElysiaJS 上同时找到 Hono 的路由参数提取（从 /user/:id 分析出参数类型为 { id: number } ）与 tRPC 的 Schema Validation（使用 z.object() 创建输入输出类型 ），还有一些将在这篇文章里介绍的新的东西。 来看一张官网的宣传图片，揣摩揣摩图里都有哪些神奇的黑科技？ ![图片](https://...

跨标签通信也有很多实际的应用场景，比如： 1. 共享登录状态：当用户在一个标签页中登录后，其他打开的标签页需要及时获取到登录状态，以保持一致的用户体验。在这种情况下，可以使用浏览器的localStorage或sessionStorage来存储登录状态，并通过监听storage事件来实现不同标签页之间的状态同步。 2. 实时通知和消息推送：如果用户在一个标签页上收到了新消息或通知，可以通过跨标签页通信将该消息或通知传递给其他标签页。一种常见的处理方式是使用浏览器的localStorage或IndexedDB来存储未读消息或通知，然后通过监听storage事件或定时轮询来检查新消息或通知的变化。 3. 跨标签页数据共享：有时候需要在不同的标签页之间共享一些数据，例如购物车数据、选项设置等。这可以通过在localStorage或IndexedDB中存储数据，并借助storage事件或定时轮询来实现数据的同步更新。 4. 标签页之间的导航同步：当用户在一个标签页中进行导航操作（例如点击链接或提交表单）时，其他标签页可能也需要跟随导航到相应的页面。这可以通过在标签页之间发送消息或共享状态来实...

写在前面 在编程世界中，代码不仅仅是让事情正常运转。 它就像一件讲述故事的艺术品。 当代码干净时，它就像一个美丽的、精心制作的雕塑，既美观又运行良好。 但在急于按期完成任务的过程中，有时团队不会太注意保持代码的整洁。 这可能会导致项目变得混乱、复杂，变得更加难以开展。 随着情况变得更糟，生产力也会下降。 然后，公司需要引进更多的人来提供帮助，这使得一切都变得更加昂贵。 那么，干净的代码是什么样的呢？ 它的代码易于理解，没有多余的部分，简单，并且可以通过测试。 换句话说，它是可读的、可重用的，并且在需要时易于更改。 为了帮助你编写出色的 JavaScript 代码，我将在今天的内容中与你分享 26 个写干净代码的技巧，这些技巧将指导你编写既优雅又高效的代码。 1. 变量 1.使用有意义且易于发音的变量名 // Bad const yyyymmdstr = moment().format("YYYY/MM/DD"); // Good const currentDate = moment().format("YYYY/MM/DD

前言 threejs小练习，从头实现如何加载地理数据，并将其映射到三维场景中的对象上。 获取数据 在开始绘制图形前，需要一份包含地理信息数据，我们可以从阿里云提供的小工具获取：http://datav.aliyun.com/portal/school/atlas/area_selector 在范围选择器中，可以选择整个或者各个省份的地理信息数据。 生成图形 获取数据后，先分析一下JSON的结构 properties 中包含了名字、中心、质心等信息， geometry.coordinates 则是地理的坐标点，我们需要做的是将这些点连成线。 THREE.Shpae const createMap = (data) =  {   const map = new THREE.Object3D();    data.features.forEach((feature) =  {    const

前言 随着 Web 技术的日新月异，JavaScript 也在不断地吸收新的特性和技术，以满足日益复杂和多样化的开发需求。在 2024 年，JavaScript 迎来了一系列令人瞩目的新功能，这些功能不仅提升了开发者的效率，也极大地丰富了 Web 应用的表现力和交互性。 在接下来的内容中，我们将逐一介绍这些新功能，并探讨它们如何在实际开发中发挥作用，以及它们如何继续引领前端开发的未来。 Object.groupBy ❝它是一个新的 JavaScript 方法，它可以根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性，其中包含组中的元素的数组。 当我们想要根据数组中对象的一个或多个属性的名称对数组元素进行分类时，此方法非常有用。 语法 Object.groupBy(items, callbackFn) 参数 items ：一个将进行元素分组的可迭代对象 callbackFn ：对可迭代对象中的每个元素执行的函数。它应该返回一个值，可以被强制转换成属性键（字符串或 s

JavaScript 为我们提供了很多操作符，用于操作表达式。下面就来盘点一下 JavaScript 中那些强大的操作符！ 一、一元操作符 操作符可以根据他们期待的操作符个数来分类，多数的JavaScript操作符都是二元操作符，二元操作符可以将两个表达式合成一个更复杂的表达式。JavaScript也支持一元操作符，这些操作符可以将一个表达式转化为另一个更复杂的表达式。同时，JavaScript中也有一个三元操作符，就是条件操作符（?:），它用于将三个表达式组成一个表达式。下面就先来看看一元操作符。 一元操作符具有以下特点： 最简单的操作符，用来操作一个表达式； 具有高优先级和右结合性； 在必要时将操作数自动转化为数值。 1. 递增和递减操作符（ --） 递增操作符顾名思义就是递增其操作数，递减操作符就是递减其操作数。它们都有两个版本： 前缀版（ i）：操作符位于变量的前面，表示先递增(递减)，后

1 前言 相信做前端的同学们，应该没有人没听说过axios的鼎鼎大名吧！ 用了这么久的axios，是否也会好奇axios是如何实现的呢？ 今天就让我们走进axios的源码，学习这款神级工具是如何实现的吧！ 2 axios的实例与请求流程 在阅读源码之前，先大概了解一下axios实例的属性和请求整体流程，带着这些概念，阅读源码可以轻松不少！ 下图是axios实例属性的简图。 可以看到 axios 的实例上，其实主要就这三个东西： config ：配置，比如url、method、params、headers等等 interceptors ：拦截器，分为请求拦截器和返回拦截器。 request ：调用xhr或者http请求的方法，参数就是config 由于调用 request 方法的时候可以再次传入 config ，但是不能传入 interceptors ，所以拦截器一定是要在请求之前就在 axios上 添...

前言 数组（Array）作为 JavaScript 位列第一的对象， 其重要性可见一般，在这里就让我们来详细的扒一扒数组对象都有哪些方法，它们分别能对数组做什么。 想一起学习 Js 语言知识的同学可以 点赞+关注+收藏 哦！后续将继续更新 Js 相关方法使用！ 一、数组是什么 官方对于 Array（数组）对象的解释是这样的：使用单独的变量名来存储一系列的值。简而言之就是把你要储存的值都放在一个房间里，然后给他们每人一个固定的座位号，你在找这些值的时候可以通过座位号 1、2、3...... 快速的找到你需要的数值。 在 JavaScript 中，数组是一种特殊的对象，用于表示和操作有序的数据集。数组是一种数据结构，可以存储多个值在一个变量中，并通过数字索引来访问这些值。 JavaScript 中的数组与其他编程语言中的数组有所不同，因为它具有动态大小，这意味着可以在运行时添加或删除元素。以下是一些关于 JavaScript 数组的基本特点： 1. 索引访问：可以通过索引访问数组中的元素，索引从0开始。例如，[arr]()[0]将访问数组的第一个元素。 2....

刚做完公司项目的新架构，决定使用TS来解决项目中的类型问题，但是在写接口类型的时候，发现了一个问题，就是接口类型的定义，如果是一个复杂的类型，那么就会变得非常的麻烦。 每个接口的request,response不能说一点不相同，只能说完全不相同。甚至写类型的时间比写逻辑的时间都长。往往写到一半TS变成了AS。回过头来又对自己写AS的行为感到羞愧。 后来聪明的我想，Java他还能不写VO类吗？他写了我能不能直接用？ 然后就有了这篇文章。 前言 如何能获取到Java的VO类呢？作为前端开发，我们能获取到的数据只有接口文档，那么我们能不能通过接口文档来生成VO类呢？ 答案是肯定的。 获取到接口文档后，一开始甚至想自己写套转换工具。写着写着发现，这个工具的难度比写接口类型还大。于是放弃了。 然后，swagger-typescript-api 出现了。 swagger-typescript-api swagger-typescript-api; 通过swagger方案生成api。 支持OA 3.0、2.0、JSON、yaml 生成的api模块使用F...

前言 浏览器为开发者提供了功能丰富的Observer，在这篇文章中，我们将深入研究这些常见的浏览器 Observer，剖析它们的作用、用法以及它们在 Web 开发中的应用场景。 MutationObserver MutationObserver用于监听DOM对象的变更（包括子节点），当节点属性发生变化，或执行增删改操作时执行对应的callback。 MutationObserver为我们提供了一种十分方便的监听DOM变化的方式。 基本使用 // Observer需要一个用于监听的目标DOM const targetNode = document.getElementById("app"); //用于确定mutation监听变化的范围 const config = {    attributes: true, // 监听目标节点的属性变化，例如id，class等属性   childList: true, // 除目标节点外还要监听目标节点的直接子节点   subtree: true,  // subtree的范围大于childList，还包括子节点c

1. 什么是类型转换？ Javascript 是一种弱类型语言，这意味着变量是没有明确类型的，而是由 JavaScript 引擎在编译时隐式完成。类型转换就是将一种数据类型转换为另一种数据类型，例如： 20 + "twenty" // "20twenty" "10"   "10"  //  100  2 - "x"  Javascript 使用严格相等（ =）和宽松相等（ ）来测试两个值的相等性，类型转换仅在使用宽松[相等运算符]()时发生。当使用 = 测试严格相等时，要比较的变量的类型和值都必须相同，例如： 10  = 10     // true NaN  = NaN   // false 在上面的代码中，10和10都是数字并且是完全相等的，所以正如预期的那样返回了 true ，两个 NaN 永远不会相等。当使用 测试宽松相等时，可能会发生隐式转换： '20'   20    // true false   0    // true 对于任何数据类型，无论是原始类型还是对象，都可以进行类型