- 博客(1986)
- 收藏
- 关注
RSS订阅转载 【总结】2017- 不要再写满屏import导入啦！
作者：tager原文：https://juejin.cn/post/7344571285848768524密密麻麻的import语句不仅仅是一种视觉上的冲击，更是对代码组织结构的一种考验。我们是如何做到让import“占领满屏“的了，又该如何优雅地管理这些import语句呢？本文将从产生大量import语句的原因、可能带来的问题以及如何优化和管理import语句几个角度来进行探讨。import是如...
2024-04-15 18:51:02
1
转载 【总结】2016- SPA 如何达到 SSR 一样的秒开效果？
SPA（单页应用）在初次加载时，由于需要加载所有必要的 JavaScript 和 CSS 文件，以及应用的主 HTML 文件，因此可能会产生白屏时间较长的问题，对用户体验而言是非常糟其中白屏时间主要影响因素之一：SPA 应用在加载完成后，需要再进行一次 DOM 渲染才能显示页面内容。在渲染过程中，可能需要加载大量的 JavaScript 文件、CSS 文件或网络请求，这些操作都需要耗费时间，从而导...
2024-04-14 17:09:01
37
转载 【React】2015- 使用React Context的一些优化建议
React ContextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。常用 APIReact.createContextconstMyContext=React.createContext(defaultValue);创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最...
2024-04-13 20:03:51
5
转载 【面试题】2014- 面试官常问的那些webpack插件问题
作者：lzg9527原文：https://juejin.cn/post/6844904193589772301Plugin❝何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监...
2024-04-12 13:16:29
4
转载 【React】2013- 使用React Context的一些优化建议
React ContextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。常用 APIReact.createContextconstMyContext=React.createContext(defaultValue);创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最...
2024-04-11 10:20:34
9
转载 【JS】2012- JavaScript 复杂判断的更优雅写法
作者：Think来源：大转转FE我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。举个例子先看一段代码：/***按钮点击事件*@param{number}status 活动...
2024-04-10 21:49:17
6
转载 【AI】2011- 1MB的神奇AI，检测百万文件，99%的准确率！
在 Web 开发中，上传文件至服务器前的文件类型检测至关重要。这一步骤不仅能够确保服务器和用户的安全，拦截可能的恶意文件，还能保证上传的文件完整且符合预期，提高数据的合规性。同时，通过及时给予用户反馈和指导，也能提升用户体验，避免不必要的困惑。之前阿宝哥有介绍过 “JavaScript 如何检测文件的类型？”，现在我们已经进入 AI 时代，要与时俱进。接下来，阿宝哥将介绍如何利用谷歌开源的 Mag...
2024-04-09 21:11:34
8
转载 【Git】2010- 合并分支用rebase还是merge？
实际开发工作的时候，我们都是在自己的分支开发，然后将自己的分合并到主分支，那合并分支用2种操作，这2种操作有什么区别呢？git上新建一个项目，默认是有master分支的，将项目克隆到本地，我们的准备工作就完成了同学A：执行git log ，可以看到有一个提交记录，是初始化提交新增一个文件a.txt, 再次查看我们的提交记录，有2条提交记录了这个时候将本地新commit的记录push到远程仓库，就可...
2024-04-08 13:02:06
5
转载 今年的前端趋势，变化真的很大！
正文前段时间，掘金热帖《放心，前端死不了》在前端圈疯传。百度前端大佬表明：“前端技术是依托于互联网行业的，只要行业还在，它就会有用武之地，就会有价值。”总的来说，技能跟上发展，前端就不会死。谁掌握得更深、应用得更好，谁就更容易脱颖而出。为此，我特意与几位大厂前端技术专家，一起整理出了一套非常实用的——《2024前端开发进阶秘籍》，其中包含了前端必备八股文、超火Vue3面试题、前端卷王算法题和大厂高...
2024-04-07 10:20:13
7
转载 【JS】2009- CommonJS 和 ES Module 终于要互相兼容了？？？
在现代 JavaScript 开发中，ECMAScript Module 已经逐渐成为了公认的业界标准。自 ESM 被引入 Node.js 以来，它的异步加载特性和模块解析逻辑广受大家好评。然而，由于历史原因，很多既有代码和第三方库仍依赖于 CommonJS 模块系统，然而因为 ESM 的异步加载的设计，两个模块化方案一直是无法共存的，这也成了很多开发者的一大痛点。最近， joyeecheung ...
2024-04-07 10:20:13
8
转载 【Vuejs】2008- Vue3优雅的使用useDialog
作者：隔壁老王zhttps://juejin.cn/post/7293173815181738022在日常开发时，弹窗是一个经常使用的功能，而且重复性极高，你可能会遇到下面这些问题:1、一个页面内多个弹窗, 要维护多套弹窗状态,看的眼花缭乱2、弹窗内容比较简单，声明变量 + 模板语法的方式写起来比较麻烦关于这些问题, 我首先想到的是应该弄一个即用即走的Dialog，不用去单独维护它的状态，使用Di...
2024-04-06 18:32:41
10
转载 【AI】2007- JS 的 AI 时代来了！
JS-Torch 简介JS-Torch[1] 是一个从零开始构建的深度学习 JavaScript 库，其语法与 PyTorch[2] 非常接近。它包含一个功能齐全的张量对象（可跟踪梯度）、深度学习层和函数，以及一个自动微分引擎。PyTorch 是一个开源的深度学习框架，由 Meta 的人工智能研究团队开发和维护。它提供了丰富的工具和库，用于构建和训练神经网络模型。PyTorch 的设计理念是简单、...
2024-04-05 16:31:39
7
转载 【总结】2006- 十分钟学会WebSocket
WebSocket简介WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。WebSocket与HTTP的区别与传统的HTTP协议相比，WebSocket具有以下几个显著的区别：双向通信：WebSocket支持客户端和服务器之间的实时双向通信，而HTTP协议是单向请求-响应模式。低...
2024-04-04 19:34:14
10
转载 【总结】2005- Meta 最新开源！面向 Web 和 Native 的跨平台 React 解决方案
最近，Meta 开源了一个新的库，叫做 react-strict-dom，其目标是改进和标准化编写用于 Web 和 Native 的通用 React 组件的方式。在 React Native 中，用于渲染 UI 的原始组件和 Web 不同，如果你是一个 Web 开发者，看到基础的 React Native 组件一开始可能会觉得有点奇怪，也难以使用：import{View,Text}fro...
2024-04-03 20:36:13
5
转载 【TS】2004- Exclude 工具类型 8 个使用技巧
Exclude 是 TypeScript 中内置的工具类型，它用于从一个联合类型中排除掉你不希望包含的类型，生成一个新的类型。这个工具类型在日常开发中非常有用，它能够帮助我们编写类型安全的代码和更好地实现代码复用。/***ExcludefromTthosetypesthatareassignabletoU.*typescript/lib/lib.es5.d.ts*...
2024-04-02 18:42:09
6
转载 【Nodejs】2003- 3 个超酷的 Node.js 新功能！
介绍下 Node.js 近期更新的 3 个功能，每个都很实用哦！1. 自带热更新开发模式下，每次代码的修改我们期望无需重启代码即可看到最新的变化，nodemon 模块在这个场景已经是标配功能了。有时只是写一个简单的脚本，做些测试或其它场景可能不太需要第三方模块，此时 Node.js “自带热更新” 功能就再合适不过了！一个 --watch 标志搞定这个场景。该标志首次添加于 Node.js v18...
2024-04-01 10:21:01
7
转载 【总结】2002- 前端Chrome调试技巧最全汇总！
作者：安木夕原文：https://juejin.cn/post/7248118049584316472注：本文测试、截图均为Edge浏览器（内核是Chromium），浏览器内核可了解《有哪些浏览器/内核？[1]》00、基础操作汇总操作类型快捷键/说明切换浏览器标签???? Ctrl+1到8切换到对应序号的浏览器标签 ???? Ctrl+PgUp/PgDn标签页左右切换浏览器全屏F11 (⌘ + shift +...
2024-03-31 20:29:12
8
转载 【总结】2001- 前端加载超大图片(100M以上)实现秒开解决方案
转自：vjmaphttps://juejin.cn/post/7212270321622106170前言前端加载超大图片时，一般可以采取以下措施实现加速：图片压缩：将图片进行压缩可以大幅减小图片的大小，从而缩短加载时间。压缩图片时需要注意保持图片质量，以免影响图片显示效果。图片分割：将超大图片分割成多个小图块进行加载，可以避免一次性加载整个图片，从而加快加载速度。这种方式需要在前端实现图片拼接，需...
2024-03-30 15:54:15
11
转载 【TS】2000- Extract 工具类型 8 个使用技巧
Extract 是 TypeScript 中内置的工具类型，它用于从联合类型中提取出符合某个条件的类型，生成一个新的类型。这个工具类型在日常开发中非常有用，它能够帮助我们编写类型安全的代码和更好地实现代码复用。/***ExtractfromTthosetypesthatareassignabletoU.*typescript/lib/lib.es5.d.ts*/...
2024-03-29 17:58:54
10
转载 【性能优化】1999- 浏览器跨域带来的一些性能问题
由于 Web 的开放特性，同样是糊页面，Web 前端工程师往往要和 CORS（跨域请求）做一些斗争，例如我之前遇到的一个 《SVG 图片字体失效问题》 就是 CORS 引起的。????对 CORS 不太了解的同学，可以看我之前翻译的这篇文章《15 张精美动图全面讲解 CORS》，图文并茂，基本上可以对 CORS 有个大致的理解CORS 除了会带来一些资源加载失败的问题，它其实还会对一些性能场景带来一些干...
2024-03-28 13:11:29
9
转载 45k*16薪，进字节了！
正文前段时间，掘金热帖《放心，前端死不了》在前端圈疯传。百度前端大佬表明：“前端技术是依托于互联网行业的，只要行业还在，它就会有用武之地，就会有价值。”总的来说，技能跟上发展，前端就不会死。谁掌握得更深、应用得更好，谁就更容易脱颖而出。为此，我特意与几位大厂前端技术专家，一起整理出了一套非常实用的——《2024前端开发进阶秘籍》，其中包含了前端必备八股文、超火Vue3面试题、前端卷王算法题和大厂高...
2024-03-27 10:20:58
10
转载 【总结】1998- Vite为什么比Webpack快
本文作者为 360 奇舞团前端开发工程师一.引言Vite和Webpack作为两个主流的前端构建工具，在近年来备受关注。它们的出现使得前端开发变得更加高效和便捷。然而，随着前端项目规模的不断增大和复杂度的提升，构建工具的性能优化也成为了开发者关注的焦点。在性能方面，Vite相比于Webpack表现出了明显的优势，尤其是在本地开发时冷启动速度、HMR性能和构建速度等方面。本文将深入解析Vite为什么比...
2024-03-27 10:20:58
10
转载 【Web技术】1997- 纯前端实现 JPG 图片压缩 | canvas
在线 Demo 体验地址 →: https://demos.sugarat.top/pages/jpg-compress/前言在迭代图床应用时，需要用到图片压缩，在之前分享了使用 UPNG.js 压缩 PNG 图片[1]，这里记录分享一下如何处理 JPG 图片。搜罗调研了一圈，JPG 图片的处理，基本都是围绕 canvas 展开的。掘金：前端实现图片压缩技术调研[2]相关开源库（近期还有迭代维护的...
2024-03-26 18:09:37
21
转载 【AI】1996- 2024 年必备的 9 款 AI PPT 生成工具
关注 “AI 工具派”探索最新 AI 工具，发现 AI 带来的无限可能性！近期推荐PPT：Tome｜美图PPT｜AiPPT｜Gamma图片处理：Pikaso｜图片修复｜DeOldify｜BgSub｜Dreamina学习工具：据意查句｜Grammarly｜灵动翻译｜Wiseone｜Hama｜DeepL编程工具：Codeium｜通义灵码｜SafurAI其他工具：TinyWow|PixVerse|...
2024-03-25 17:37:57
179
转载 【CSS】1995- 15个CSS 常见错误，请一定要注意避免
在不断发展的 Web 开发领域，掌握 CSS（层叠样式表）对于制作视觉上令人惊叹且响应迅速的网站至关重要。然而，陷阱比比皆是，即使是经验丰富的开发人员也可能会发现自己陷入了常见的 CSS 错误中。本文剖析了 15 个常见错误，提供分步说明和代码示例，帮助您创建完美的网页设计。1. 过度依赖!important：问题：过度使用 !important 会导致代码混乱。解决方案：对于更干净和可维护的样式...
2024-03-24 18:29:24
10
转载 【实战】1994- 前端加载超大图片(100M以上)实现秒开解决方案
转自：vjmaphttps://juejin.cn/post/7212270321622106170前言前端加载超大图片时，一般可以采取以下措施实现加速：图片压缩：将图片进行压缩可以大幅减小图片的大小，从而缩短加载时间。压缩图片时需要注意保持图片质量，以免影响图片显示效果。图片分割：将超大图片分割成多个小图块进行加载，可以避免一次性加载整个图片，从而加快加载速度。这种方式需要在前端实现图片拼接，需...
2024-03-23 19:17:49
33
转载 【TS】1992- as const 5 种使用技巧
在 TypeScript 中，as const 是一种类型断言，它将变量标记为 “常量”。使用 as const 可以告诉 TypeScript 编译器，某个对象的所有属性都是只读的，并且它们的类型是字面量类型，而不是更通用的类型，比如 string 或 number 类型。接下来，我将介绍 TypeScript 中 as const 类型断言的 5 个使用技巧。1.确保对象的属性不可变在下面代码...
2024-03-22 08:03:24
36
转载 【JS】1993- 盘点和 toggle 相关的几个 JS API
toggle的意思很简单，表示“切换”，适用于两个状态之间的变化，不会出现第三者，就像这样web中也有很多类似的api，一起看看有哪些吧一、toggle首先是最常用的DOMTokenList.toggle方法，这里的的DOMTokenList表示一组空格分隔的标记，最常见的就是Element.classList，比如除了classList还有relList，不过应该更少见了<div cla...
2024-03-21 10:20:17
13
转载 【Vuejs】1991- 总结 Vue 中常用的4种高级特性！
1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。使用 provide/inject 的好处是可以让我们在父组件和子孙组件之间传递数据，而无需手动...
2024-03-20 11:00:49
12
转载 【总结】1990- 前端接口防止重复请求实现方案
前言前段时间老板心血来潮，要我们前端组对整个的项目都做一下接口防止重复请求的处理（似乎是有用户通过一些快速点击薅到了一些优惠券啥的）。。。听到这个需求，第一反应就是，防止薅羊毛最保险的方案不还是在服务端加限制吗？前端加限制能够拦截的毕竟有限。可老板就是执意要前端搞一下子，行吧，搞就搞吧，you happy jiu ok。虽然大部分的接口处理我们都是加了loading的，但又不能确保真的是每个接口都...
2024-03-19 13:04:23
12
转载 字节面试官：你让我见识到了前端基础的天花板！
前几天下午摸鱼，无聊翻了下粉丝群，发现群里找了三个月工作的哥们儿拿到了字节45k+的offer！（个人信息厚码，转发已经过粉丝同意）交流了一下上岸心得，他说：（头像厚码，转发已经过粉丝同意）为了造福粉丝，我把他的面试资料全部要过来了！也是深藏不漏哈，没想到他收集的资料超全，还满满都是干货。全部资料已打包，内含前端八股文+大厂面试题库+算法题需要的朋友扫码找小助手领（高清pdf版）01八股文 | 基...
2024-03-18 10:20:59
17
转载 【JS】1989- 大大提高开发效率的10个JavaScript技巧
JavaScript 是前端开发中的必备语言。但是我发现很多同学对于 JavaScript 的技巧使用却并不熟悉。所以，今天咱们就来分享一下 JavaScript 的10个好用的技巧，帮你更好地使用 JavaScript，提升开发效率！1. 使用 flatMap有些 JavaScript 方法尽管鲜为人知，但它们解决独特挑战的潜力能够增强编码效率， 比如 flatMap()数组方法 flatMap...
2024-03-18 10:20:59
17
转载 【JS】1988- 有了这 5 个方法，轻松处理异步任务
在 JavaScript 中，许多操作都是异步的，比如发起网络请求、读取文件、定时器等。Promise 提供了一种更加结构化和易于理解的方式来处理异步操作，使得异步代码更加清晰易读，避免了回调地狱的问题。本文我将介绍 Promise 对象上 5 个非常有用的方法，掌握这些方法之后，可以让你更好地解决工作遇到的一些异步问题。Promise.all()当你需要并行执行多个异步操作，并且只有当所有异步操...
2024-03-17 20:21:00
10
转载 【JS】1987- JavaScript 中5个重要的Observer函数，你知道几个？
作者：MapleSyrupxhttps://juejin.cn/post/7302344328243773450前言浏览器为开发者提供了功能丰富的Observer，在这篇文章中，我们将深入研究这些常见的浏览器 Observer，剖析它们的作用、用法以及它们在 Web 开发中的应用场景。MutationObserverMutationObserver用于监听DOM对象的变更（包括子节点），当节点属...
2024-03-16 21:51:22
8
转载 【总结】1986- 使用 JavaScript 和 Canvas 渲染 PDF 内容
本文作者：@yuanyxh原文：https://zhuanlan.zhihu.com/p/631442533最近研究了 Web 的 FileSystemAccess Api，它弥补了 Web 长期以来缺少的能力：操作用户设备中的文件；而如今通过这个 Api 我们能够实现常见的文件操作：创建、删除、修改、移动等。研究 FileSystemAccess 与其他相关的知识，我才发现如今的 Web 不单单...
2024-03-15 16:13:49
15
转载 【总结】1985- 前端文件下载的正确打开方式
作者：田八https://juejin.cn/post/7156427561302982670前端涉及到的文件下载还是很多应用场景的，那么前端文件下载有多少种方式呢？每种方式有什么优缺点呢？下面就来一一介绍。1. a 标签通过a标签的download属性来实现文件下载，这种方式是最简单的，也是我们比较常用的方式，先来看示例代码：<ahref="http://www.baidu.com"d...
2024-03-14 21:59:27
9
转载 【分享】1984- 分享一款基于web的开源word文档编辑器
hi, 大家好, 我是徐小夕, 最近在研究基于 web 的文档编辑器,在网上调研了很多方案, 刚好看到了一款非常有意思的开源编辑器——canvas-editor, 它底层基于 canvas 实现, 我们使用它可以实现类似于 word文档编辑器类似的效果, 同时还支持很多灵活可配置的 API, 可以帮助我们定制属于自己的文档编辑平台, 如果你刚好也想着手实现, 这个项目将非常适合你.同时, 作者是国...
2024-03-13 10:18:16
21
转载 【总结】1893- 前端文件流、切片下载和上传：优化文件传输效率与用户体验
作者：狗头大军之江苏分军https://juejin.cn/post/7255189826226602045文件传输是一个常见的需求。对于大文件的下载和上传，直接使用传统的方式可能会遇到性能和用户体验方面的问题。幸运的是，前端技术提供了一些高效的解决方案：文件流操作和切片下载与上传。本文将深入探讨这些技术，帮助你理解它们的原理和实现方法，以优化文件传输效率和提升用户体验。一、前端文件流操作在前端开...
2024-03-12 20:50:19
26
转载 【Vite】1982- Vite 未来使用的打包工具，正式开源了！
3 月 8 号，Rolldown[1] 正式开源了，它是一个基于 Rust[2] 语言开发的 JavaScript 打包器，其设计目标是成为 Vite 在未来将要采用的核心打包工具。它不仅提供了与 Rollup 兼容的 API 和插件体系，而且在功能范围上，它更加贴近于 esbuild[3] 的设计理念。Rolldown 基于 Rust 语言开发，并且是在 Oxc[4] 基础架构上构建的。目前，R...
2024-03-11 08:09:56
13
转载 【React】1981- React 的 8 种条件渲染的方法
条件渲染是React中的一个强大功能，它允许开发人员根据某些条件控制组件的显示。它在创建动态和交互式用户界面方面发挥着至关重要的作用。然而，了解条件渲染在 React 中的工作原理并掌握其实现对于开发人员来说可能具有挑战性，尤其是那些刚接触该框架的开发人员。今天这篇文章可以为您提供帮助。无论您是初学者还是希望提高技能的经验丰富的开发人员，本文都将为您详细解释 React 中的条件渲染，并提供实际示...
2024-03-10 19:19:25
12
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人