标签: 前端相关

观云 | 18小时前 | JavaScript前端相关

Threejs多场景切换的过渡效果

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

 9 |  0 |  0 JavaScript前端相关

蔡文姬 | 1天前 | CSS前端相关

借助CSS has实现打开弹窗时自动锁定滚动

分享一个 CSS 小技巧 在平时开发中,经常会遇到这样一种问题:当打开一个弹窗时,后面的页面是可以滚动的,演示如下 那么,该如何锁定页面的滚动呢? 一、传统的实现方式 传统的方式其实也不复杂,就是在打开弹窗时阻止滚动就行了,通常是改变 overflow 属性 <pre data-line="21" <section <span </span <span </span <span </span </section <code data-line="21" <span <span const</span <span openModal</span <span =</span <span (</span <span )</span <span = </span <span {</span <br/ </span <span <span document</span <span .</span <span body<...

 19 |  0 |  0 CSS前端相关

雨馨 | 4天前 | JavaScript浏览器前端相关

京东一面:浏览器跨标签页通信的方式都有什么?

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

 33 |  0 |  0 JavaScript浏览器

OOM | 1周前 | CSS前端相关

图解 CSS Grid 布局

Grid(网格)布局是最强大的 CSS 布局方案,用于构建二维布局。Grid 布局将页面划分成一个个网格,可以任意组合不同的网格,实现各种各样的布局。下面就来看看 CSS Grid 布局是如何使用的! 1. Grid 布局概述 在解释 CSS Grid 布局之前,我们先来看看 Grid 布局中一些重要概念。 (1)网格容器 网格容器是所有网格项的父元素,网格容器会定义 display:grid 。下面例子中,类名为 container 的 div 元素就是网格容器: .container {  display: grid; } <div class="container"   <div class="item" 1</div   <div class="item" 2</div   <div class="item" 3</div   <div class="item" 4</div </div

 40 |  0 |  0 CSS前端相关

孤音 | 1周前 | JavaScript前端相关

26个写出简洁优雅JavaScript代码的技巧

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

 83 |  0 |  0 JavaScript前端相关

布朗熊 | 2周前 | 前端相关

实践总结|前端架构设计的一点考究

一、背景 为什么会有这一篇文章? 在日常/大促业务的“敏捷”开发过程中逐渐产生的几个疑惑,尝试地做出思考并想得到一些解决思路和方案。 总的来说,在前端开发和实践过程中,梳理了一些简单设计方案可以缓解当时让我 “头疼” 的几个敏捷迭代问题,并实践在项目迭代中。 因此个人对这篇文章有三个小目的: 1.梳理清楚个人真正疑惑开发迭代的问题在哪,解决的核心是什么,温故而知新。 2.提供前端架构设计的思考&方案,来缓解日常/大促敏捷迭代问题,希望可以得到一些拍砖~ 3.能让项目协同的同学能初步理解个人对于前端结构设计,方便他人理解这样搞的原因背景,快速磨平协同上的一些理解和开发成本 💰。 二、疑惑 先抛出主要的几点问题,在业务迭代过程中你为什么会疑惑(WHY),疑惑什么问题(WHAT),会以什么方式解决(HOW)? 1.在业务需求的敏捷迭代中,单看逻辑和视觉的变更都不难,为何结合起来迭代如此花费成本? 2.敏捷业务迭代中,我们能找出什么是 敏捷在变 ,什么是 敏捷不变 ? 3.面向视图开发,还是面向数据开发? 4.React ...

 67 |  0 |  0 前端相关

雨馨 | 2周前 | JavaScript前端相关

Threejs 地图3D可视化

前言 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

 60 |  0 |  0 JavaScript前端相关

晚风 | 2周前 | 浏览器前端相关

为了防止狗上沙发,写了一个浏览器实时识别目标功能

背景 家里有一条狗🐶,很喜欢乘人不备睡沙发🛋️,恰好最近刚搬家 + 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗,然后播放“gun 下去”的音频📣。 需求分析 需要一个摄像头📷 利用 chrome 浏览器可以调用手机摄像头,获取权限,然后利用 video 将摄像头的内容绘制到 video 上。 通过摄像头实时识别画面中的狗🐶 利用 tensorflow 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测。 将摄像头的视频流转化成视频帧图像传给模型进行识别 录制一个音频 识别到目标(狗)后播放音频📣 需要部署在一个设备上 找一个不用的旧手机📱, Android 系统 安装 termux 来实现开启本地 http 服务🌐 技术要点 1. 利用浏览器 API 调用手机摄像头,将视频流推给 video  const s

 84 |  0 |  0 浏览器前端相关

女王范 | 2周前 | Vue前端相关

VUE中常用的4种高级特性!

1. provide/inject provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术,它可以将数据注入到一个组件中,然后让它的所有子孙组件都可以访问到这个数据。通常情况下,我们在父组件中使用 provide 来提供数据,然后在子孙组件中使用 inject 来注入这个数据。 使用 provide/inject 的好处是可以让我们在父组件和子孙组件之间传递数据,而无需手动进行繁琐的 props 传递。它可以让代码更加简洁和易于维护。 但需要注意的是,provide/inject 的数据是非响应式的,这是因为provide/inject是一种更加底层的 API,它是基于依赖注入的方式来传递数据,而不是通过响应式系统来实现数据的更新和同步。 具体来说,provide方法提供的数据会被注入到子组件中的inject属性中,但是这些数据不会自动触发子组件的重新渲染,如果provide提供的数据发生了变化,子组件不会自动感知到这些变化并更新。 如果需要在子组件中使用provide/inject提供的数据,并且希望这些数据能够响应式地更新,可以考虑使用V...

 79 |  0 |  0 Vue前端相关

念旧。 | 3周前 | JavaScript前端相关

JavaScript 最新动态:2024 年新功能

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

 85 |  1 |  0 JavaScript前端相关

奈我何 | 3周前 | 前端相关

前端接口防止重复请求实现方案

前言 前段时间老板心血来潮,要我们前端组对整个的项目都做一下接口防止重复请求的处理(似乎是有用户通过一些快速点击薅到了一些优惠券啥的)。。。听到这个需求,第一反应就是,防止薅羊毛最保险的方案不还是在服务端加限制吗?前端加限制能够拦截的毕竟有限。可老板就是执意要前端搞一下子,行吧,搞就搞吧, you happy jiu ok 。 虽然大部分的接口处理我们都是加了 loading 的,但又不能确保真的是每个接口都加了的,可是如果要一个接口一个接口的排查,那这维护了四五年的系统,成百上千的接口肯定要耗费非常多的精力,根本就是不现实的,所以就只能去做 全局处理 。下面就来总结一下这次的防重复请求的实现方案: 方案一 这个方案是最容易想到也是最 朴实无华 的一个方案:通过使用axios拦截器,在 请求拦截器 中开启全屏Loading,然后在 响应拦截器 中将Loading关闭。 这个方案固然已经可以满足...

 84 |  0 |  0 前端相关

流苏 | 3周前 | JavaScript前端相关

这些强大的 JS 操作符,你都知道吗?

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

 69 |  0 |  0 JavaScript前端相关

观云 | 3周前 | 后端相关前端相关

为什么前后端都需要进行数据校验?

一、引言 在现代的 Web 应用开发中,前后端数据校验是确保系统安全、 数据完整性 和用户体验的关键步骤。 通过在前后端各个环节对数据进行验证,我们可以有效地防止恶意攻击、保证数据的准确性,并提高用户满意度。 本文将从以下方面详细介绍为什么前后端都需要进行 数据校验 ,以及他们都应该做什么内容。 二、前端校验的内容 在前端开发中,以下是一些必要的校验,以确保数据的有效性和安全性♘: 1、 必填字段校验 :对于必填的字段,需确保用户输入了有效的数据。可以检查字段是否为空或仅包含空格等无效字符。 2、 数据格式校验 :根据字段的预期格式,验证用户输入的数据是否符合要求。例如,对于邮箱字段,可以使用正则表达式验证邮箱格式的正确性。 3、 数字范围校验 ...

 93 |  0 |  0 后端相关前端相关

渣渣辉 | 3周前 | CSS前端相关

CSS 实现居左到居右过渡变化的一些思路

介绍一些看似简单又不是那么容易的过渡小技巧。 很多 CSS 属性其实是不支持过渡变化的,例如 flex 中的对齐 <pre data-line="7" <section <span </span <span </span <span </span </section <code data-line="7" <span <span justify-content</span <span :</span start | center | end<br/ </span </code </pre 或者是文本对齐 <pre data-line="13" <section <span </span <span </span <span </span </section <code data-line="13" <span <span text-align</span <span :</span left | center | right<br/ </span </code </pre 这样属性在变化时是没有过渡动画的,但有时又需要这样的动效,比如下面这个效果 ![图片](h...

 91 |  0 |  0 CSS前端相关

流苏 | 5周前 | 前端相关

前端最全的5种换肤方案总结

最近一年很多需求要求更换主题色,而团队的项目基础框架不一,因此几乎使用了所有的更换主题的方案。以下总结了各方案的实现以及优缺点,希望能帮助有需要更换主题色的伙伴少踩坑。 方案一:硬编码 对一些老的前端基础库和业务库样式没有提取公共样式,当有更换主题的需求,实现的方法只能是全局样式替换,工作量比较大,需要更改form表单、按钮、表格、tab、容器等所有组件的各种状态,此外还需更换icon图标。 以下是我们的一个老项目实现主题色更换,全局样式替换接近500行,如下图所示: image.png image.png image.png 「总结:」 对于...

 104 |  0 |  0 前端相关