自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

奇舞周刊

《奇舞周刊》是由奇舞团维护的前端技术周刊.除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送周刊汇总内容

  • 博客(839)
  • 收藏
  • 关注

转载 探究 LightHouse 工作流程

什么是LighthouseLighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.使用方式Chrome 浏览器插件。Chrome 插件的形式提供了更加友好的用户界面,方便读取报告。Chrome DevTool...

2022-11-30 19:00:22 1

转载 彻底搞懂 React 18 并发机制的原理

React 18 最主要的特性就是并发了,很多 api 都是基于并发特性实现的。那为什么 React 要实现并发?什么是并发?又是怎么实现的呢?这篇文章我们就一起来探究一下。首先,我们过一遍 React 渲染的流程:React 渲染流程React 是通过 JSX 描述页面的,JSX 编译成 render function(也就是 React.createElement 等),执行之后产生 vdom...

2022-11-29 19:00:05 4

转载 前缀树在前端路由系统中的应用

背景 本人自己曾经造轮子搞过一个 Node.js 端的应用层 Web 框架,里面涉及到一个路由系统的实现,当时是通过一个叫前缀树的数据结构来实现便捷的路由查找与匹配机制,这里跟大家分享一下。 前缀树介绍 前缀树,即字典树,又称 Trie 树。这种数据结构通常用来储存字符串,并且是以路径字符节点的形式来储存。拥有公共前缀的字符串,会共享同样的父节点路径。前缀树是通过利用字符串的公共前缀来降低查询时...

2022-11-28 19:00:12 13

转载 Web开发未来会完全替代客户端开发吗?

大家好,我是 ConardLi。首先问大家一个问题,现在有一项业务需求,这个需求使用客户端应用实现还是网页来实现你会考虑哪些因素呢?可以在评论区告诉我。曾几何时,想到网页可能我们第一时间想到的就是一些静态页面,但是经过数十年的蓬勃发展,网页开始承接越来越复杂的需求,包括复杂的管理系统、网络直播、云游戏等能力。但或许你仍然会认为相比可以和系统底层直接交互的原生客户端应用还是太弱了,我们可能会因为浏览...

2022-11-26 14:02:20 25

原创 奇舞周刊第 473 期: Rollup 与 Webpack 的 Tree-shaking

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■Rollup 与 Webpack 的 Tree-shakingRollup 和 Webpack 是目前项目中使用较为广泛的两种打包工具,去年发布的 Vite 中打包所依赖的也是 Rollup;在对界面加载效率要求越来越高的今天,打包工具最终产出的包体积也影响着开发人员对工具的选择,所以对 Tree-sh...

2022-11-25 14:36:34 211

转载 前端 ES6 之 Promise 实践应用与控制反转

Promise 主要是为解决程序异步处理而生的,在现在的前端应用中无处不在,已然成为前端开发中最重要的技能点之一。它不仅解决了以前回调函数地狱嵌套的痛点,更重要的是它提供了更完整、更强大的异步解决方案。同时 Promise 也是前端面试中必不可少的考察点,考察内容可深可浅,因此熟练掌握它是每个前端开发者的必备能力。Promise 相对于 callback 模式的优势,网上的介绍文章已经多如牛毛,本...

2022-11-23 18:00:04 9

原创 搭建简易画板(二)

本文作者为奇舞团前端开发工程师一、 笔刷拓展现在画板可以绘制图案并生成图片,我们来给线条增加一些花样,例如蜡笔。第一种方案:自定义算法,即正常绘画的基础上,随机清除掉不定数量不定长宽的小矩形。function draw(pathInfo, curCtx?: any) {let useCtx = curCtx ? curCtx : ctx;if (pathInfo.beginX !== null &...

2022-11-22 17:11:05 112

原创 奇舞周刊第472期 深入浅出音视频与 WebRTC

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■深入浅出音视频与 WebRTC随着人们对实时性、互动性的要求越来越高,传统直播技术越来越满足不了人们的需求,WebRTC 技术正是为了解决人们对实时性、互动性需求而提出的新技术百度架构师:从实现原理谈谈低代码我们在低代码领域探索了很多年,从 2015 开始研发低代码前端渲染 (amis),从 2018...

2022-11-18 15:01:47 6

原创 vue-router 使用与原理分析

本文作者为奇舞团前端开发工程师简介Vue Router 是Vue.js的官方路由。与Vue.js核心深度集成,让用Vue.js构建单页应用(SPA)变得更加简单。对于开发和维护管理后台类的前端项目,页面结构和组合可能非常复杂,所以正确的理解和使用Vue Router就显得尤为重要。使用创建1、在安装好Vue Router依赖后,在App.vue中引入router-view,它是渲染的容器<d...

2022-11-17 18:18:16 18

原创 微信小程序web-view与H5 通信方式探索

本文作者为奇舞团前端开发工程师小程序简介小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。需求微信小程序 H5 混合开发就是 在一个小程序中,采用部分小程序原生页面,部分通过Webview内嵌 H5 页面¹,二者配合实现完整业务逻辑的方案。为什么需要混合开发原生无法满足(例如某团队维护SDK 只提供了WEB端jsSDK,且不维护小程序SDK)H5可以...

2022-11-16 15:42:59 40

原创 使用useReducer + useContext 代替 react-redux

本文作者为奇舞团前端开发工程师一. 概述在 React16.8推出之前,我们使用react-redux并配合一些中间件,来对一些大型项目进行状态管理,React16.8推出后,我们普遍使用函数组件来构建我们的项目,React提供了两种Hook来为函数组件提供状态支持,一种是我们常用的useState,另一种就是useReducer, 其实从代码底层来看useState实际上执行的也是一个useRe...

2022-11-15 18:24:31 11

转载 奇舞周刊第 471 期 现代 CSS 指南 -- at-rule 规则必知必会

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■现代 CSS 指南 -- at-rule 规则必知必会在 CSS 中,存在大量的以 @ 符号开头的规则。称之为 @ 规则 (at-rule)。本文就将介绍一下除去媒体查询之外,其他有意思的且在未来会越来越重要的 @ 规则规则。深入浅出 Performance 工具 & API日常开发任务中,对...

2022-11-11 19:09:30 8

原创 你不知道的JavaScript基础类型

前言今天聊下js中的数据类型,数据类型是一个语言的基石,那你真的了解我们工作中这些常使用的数据类型吗。可以先看以下几个问题?看看你能直接回答上来几个。本文将从这些问题入手,主要讲解我们在使用中容易模糊和产生歧义的点,加深我们对数据类型的理解。问题为什么说undefined是变量?那我们能改变它吗?为什么 typeof null 是 'object'?null是对象吗?0.1+0.2 为什么不等于 ...

2022-11-10 17:18:28 8

转载 C2D 代码转设计稿是怎么实现的?

前面调研过 D2C,也就是设计稿转代码,它的原理是 figma、sketch 等插件可以拿到设计稿的数据,因为是矢量设计稿,所以存储的是一个 JSON,类似这样:而且这个结构和网页的基础组件是能对应上的,也就能完成到网页的转换,然后通过不同的模版,打印成 React、Vue 等不同框架的代码。不过很多设计稿的数据需要经过一些处理才能用,比如处理成合适的分组、计算出 flex / 绝对定位的布局、处...

2022-11-09 19:00:18 37

转载 微前端的前世今生

诞生背景巨石应用现代的前端应用的发展趋势正在变得越来越富功能化,富交互化。复杂的单体前端应用背后则是数量庞大的后端应用组成的微服务集群。在一个团队中维护的前端项目,随着时间推进,会变得越来越庞大,越来越难以维护。所以我们给这种应用起名为巨石单体应用。前后端协作反观后端技术的发展趋势,从最初的前后端混合开发到前后端分离再到现在的微服务拆分。原本臃肿的后端服务在以垂直方向拆分之后变得清晰易维护。微前端...

2022-11-08 19:00:30 39

转载 TypeScript 4.9 发布!重点新特性解读 ~

11 月 1 日,TypeScript 4.9 发布了候选版本 (RC),直到稳定版发布基本上不会有太大变化了,本次带来的更新还是挺有意思的,下面我就跟大家来一起看一下~新的 satisfies 操作符在使用 TypeScript 类型推断的时候,有很多情况下会让我们面临两难的选择:我们即希望确保某些表达式能够匹配某些类型,但也希望保留这个表达式的特定类型用来类型推断。比如下面的例子,我们定义了一...

2022-11-07 19:00:53 108

原创 奇舞周刊第 470 期:(10 月最新) 前端图形学实战:从零开发几何画板 (vue3 + vite 版)...

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■(10 月最新) 前端图形学实战:从零开发几何画板 (vue3 + vite 版)昨天我们发表了 react + canvas 搭建简易画板,今天这篇文章你将收获,利用 vue3 + vite 从零开发几何画板,从而学到几何画板的基本开发思路、元素创建、编辑、拖拽、图层管理、撤销和重做、导入导出、利用几...

2022-11-04 18:33:05 233

原创 搭建简易画板(一)

本文作者为奇舞团前端开发工程师代码库地址一、准备画布创建一个简易的画布 .canvas{ width: '100vw'; height: '100vh'}<canvas className='canvas' id="drawCanvas" ></canvas>监听canvas上的移动事件。我们可以判断下当前设备是否支持PointerEvent事件,因...

2022-11-03 17:30:09 70

转载 尤雨溪:Turbopack真的比Vite快10倍吗?

大家好,我是 CUGGZ。10 月 25 日,Vercel 推出了下一代打包工具:Turbopack,它是基于 Rust 的 Webpack 继任者,其文档中提到,Turbopack 比 Vite 快 10 倍。11 月 1 日,Vue、Vite 作者尤雨溪发表文章 《Is Turbopack really 10x Faster than Vite?》,对 Turbopack 和 Vite 进行了...

2022-11-02 19:00:44 97

转载 Chrome DevTools 的 Network 还能这么用?

如果选出 Chrome DevTools 里最常用的功能,那 Network 肯定是其中之一。作为前端工程师,我们看到一个网页会习惯性的打开 Chrome DevTools 看下网络请求。不过虽然每天都在用,还是有一些高级功能大多数人不知道。今天就来梳理下那些很有用但是知道的人比较少的功能:filter一个网站会有很多的请求,当你想查找某个请求的时候,是怎么过滤的呢?关键词搜索么?但是关键词搜索只...

2022-11-01 19:00:24 22

原创 奇舞周刊469期:我是怎么调试 Element UI 源码的

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■我是怎么调试 Element UI 源码的但很多小伙伴是写 Vue 的,可能平时用的是 Element UI 的组件库,所以这篇文章就来讲下怎么调试 Element UI 的源码。React Hooks 不优雅?时至今日,React Hooks 已在 React 生态中大放异彩,席卷了几乎所有的 Re...

2022-10-28 16:18:07 508

原创 vue之浅析extend与手动挂载$mount

本文作者为奇舞团前端工程开发师vue 组件的实现方式有很多种,本文所说的是其中较少使用的一种,即由vue 内置的 API extend 与 $mount 配合使用实现的。一、为什么使用1、典型使用场景的例子渲染组件前渲染组件后可以看到组件是在 body 标签添加进去的。关闭弹窗,组件会从 body 移除。2、普通组件的局限性2.1、普通组件的引用方式ButtonCounter.vue<t...

2022-10-27 19:18:46 131

转载 浅析 VSCode 代码高亮实现原理

Vscode 的代码高亮、代码补齐、错误诊断、跳转定义等语言功能由两种扩展方案协同实现,包括:基于词法分析技术,识别分词 token 并应用高亮样式基于可编程语言特性接口,识别代码语义并应用高亮样式,此外还能实现错误诊断、智能提示、格式化等功能两种方案的功能范畴逐级递增,相应地技术复杂度与实现成本也逐级升高,本文将概要介绍两种方案的工作过程与特点,各自完成什么工作,互相这么写作,并结合实际案例一步...

2022-10-25 19:15:11 301

转载 记录一种新的绕过403的tip

记录一种新的绕过403的tip声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由用户承担全部法律及连带责任,文章作者不承担任何法律及连带责任。正文 这里主要是针对微软的某个子域名;当清除所有header值时,服务器对 Host 做出响应。经过对 HTTP 协议进行研究之后,在这里将HTTP 协议版本更改为 1.0注意:如果服务器和任何其他安全机制没有以...

2022-10-24 18:30:02 32

原创 奇舞周刊第 468 期:会用 Performance 工具,就能深入理解 Event Loop

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■会用 Performance 工具,就能深入理解 Event Loop网页加载后,浏览器会解析 html、执行 js、渲染 css,这些工作都是在 Event Loop 里完成的,理解了 Event Loop 就能理解网页的运行流程。但很多人对 Event Loop 的理解只是停留在概念层面,并没看过真...

2022-10-21 18:32:56 204

原创 JS 中的正则

一般在哪里用得到正则?RegExp.prototype.test()test() 方法执行一个检索,用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。functiontest(str:string):boolean;若正则对象带了全局标志符号时,test() 的执行会改变正则表达式的 lastIndex 属性。连续执行 test() 方法,后续的执行将会从 lastI...

2022-10-20 18:14:07 136

转载 微前端如何做样式隔离?

问题示例 className 命名重复导致的样式冲突 我们先创建一个问题,验证样式冲突的存在:在主应用和子应用上分别使用 div 元素插入一段标题,两个 div 元素使用相同的 class 名 title,分别在 class 中设置文字颜色,主应用 color 值为 yellow,子应用为 red。由于子应用的样式晚于主应用加载,所以主应用的样式会被覆盖。以上问题在同时加载多个子应用时也会存在:各...

2022-10-17 19:05:45 70

原创 奇舞周刊第 467 期:JavaScript Web 框架的“新浪潮”

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■JavaScript Web 框架的“新浪潮”本文将带读者了解 Javascript 中生态系统中的最新进展,通过研究过去在构建大规模 Web 应用时的痛点来了解当前的情况。不要把注意力集中在快速增长的解决方案上,而是从潜在问题入手。每一种架构都会有不同的答案,并且会有不同的权衡。到本文结束时,我们会列...

2022-10-14 18:00:02 446

原创 React 合成事件

背景:本文是笔者在使用 React 开发过程中遇到的问题,对 React合成事件做了一些简单的探索总结,本文不涉及具体的源码部分,而是通过一些Demo去理解 React合成事件,希望能对大家实际开发过程中有一些帮助。如有语义描述不清或错误点,还望大家能够指出。大家都知道 React 有一套自己的事件机制,如官方文档所述:SyntheticEvent 实例将被传递给你的事件处理函数,它是浏览器的原生...

2022-10-13 18:20:01 232

转载 使用 WebAssembly 打造定制 JS Runtime

本文为来自 教育-成人与创新-前端团队 成员的文章,已授权 ELab 发布。背景这是一次简短的整活与折腾,起因是在 lightdm-webkit2-greeter 这个 lightdm 插件中看到了自定义 JS Runtime的魔力,它支持在显示管理器中使用 web 技术去自定义登录界面,与操作系统的交互是通过 Runtime 中的一组 JS API来实现登录、关机、睡眠等功能。https://d...

2022-10-11 17:27:34 38

转载 谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64

JavaScript 提供了一些 API 来处理文件或原始文件数据,例如:File、Blob、FileReader、ArrayBuffer、base64 等。下面就来看看它们都是如何使用的,它们之间又有何区别和联系!1. Blob Blob 全称为 binary large object ,即二进制大对象,它是 JavaScript 中的一个对象,表示原始的类似文件的数据。下面是 MDN 中对 B...

2022-10-10 17:31:23 446 1

原创 React-router从0到1

Tags: JavaScript, React引子本文会讨论react生态下的常用路由库,React-router的版本迭代与源码架构,并尝试探讨路由思维的变化与未来。什么是路由?路由是一种向用户显示不同页面的能力。 这意味着用户可以通过输入URL或单击页面元素在WEB应用的不同部分之间切换。版本为了探究react-router设计思维,从v3开始有这几个版本:react-router 3「静态路...

2022-09-29 18:29:52 217

转载 推荐一个检测 JS 内存泄漏的神器

大家好,我是 ConardLi。作为一名 Web 应用程序开发者,排查和修复 JavaScript 代码的内存泄漏一直是最困扰我的问题之一。最近,Meta 开源了一款检测 ,我们来一起看看这个框架有啥神奇之处吧~2020 年,Meta 的工程师将 Facebook.com 重构为了单页应用(SPA),程序的大部分渲染和导航都会在客户端使用 JavaScript 完成。后来他们又使用类似的架构来重构...

2022-09-28 18:30:10 170

原创 Vite vs Webpack

本文作者为奇舞团前端工程开发师原文作者:Shawn Wildermuth原文地址:https://www.vuemastery.com/blog/vite-vs-webpack/Vite 或 Vue CLI:选择哪一个随着 Vue 生态系统的成熟,已经引入了许多新技术。虽然一些开发人员可能从一个普通的 JavaScript 文件开始,并在页面中包含 Vue。但随着时间的推移,在开发 Vue 应用程...

2022-09-27 17:06:16 135

原创 奇舞周刊第 465 期: 一份详尽的 React re-render 指南

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■一份详尽的 React re-render 指南本文是一篇比较详尽的 React re-render 指南,会着重介绍和解答以下问题:什么是 re-render、哪些是必要或非必要的 re-render、什么条件能够触发 React 组件 re-render。除此之外,还会介绍一些避免 re-rende...

2022-09-23 18:43:50 478

转载 electron-vite:轻松保护你的 Electron 源代码

electron-vite 是一个新型 Electron 开发构建工具,旨在为 Electron 提供更快、更精简的开发体验。源代码保护背景无法保护 Electron 源代码,是很多开发者提及最多的问题之一。我们都知道 Electron 使用 javascript 来构建桌面应用程序,这使得黑客很容易对我们的应用程序进行进行解包、修改逻辑破解商业化限制、重新打包,再重新分发破解版。解决方案要想真正...

2022-09-21 19:00:41 128

转载 深入理解 Mocha 测试框架:从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节,主要原因在于测试代码的编写工作很难抽象,99%的场景都需要和业务强绑定,而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低,适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念,其中分类也比较多,比如单元测试,端对端测试,集...

2022-09-19 19:00:48 292

原创 奇舞周刊第 464 期:我被 pgx 及其背后的 Rust 美学征服

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■ ■ ■我被 pgx 及其背后的 Rust 美学征服我无意发现了 pgx 这样一个使用 Rust 来撰写 postgres extension 的集成工具,在深入地了解其文档并写了几百行代码后,我立刻就被那种直击心灵的简约之美冲破了防线,不得不在此吹上一波。如此优雅地解决另一个生态系统 (postgres) 的...

2022-09-16 18:20:56 931

转载 规范升级 NPM 包

规范升级 NPM 包前言在日常工作中,当组件跨项目使用时,我们往往会选择把组件抽成 npm 包。那么在 npm 开发以及发布的过程中有什么需要注意的事项吗?本文将从我自己的角度,来为大家介绍一下我认为的一些需要大家注意的点。版本号规则从日常的开发中我们可以看到,npm 包的版本号的格式都是 X.Y.Z。那么大家发布的 npm 包为什么都在遵循这个格式呢?这个格式其实是由 Gravatars 创办者...

2022-09-15 19:05:04 262

转载 Docker 是怎么实现的?前端怎么用 Docker 做部署?

代码开发完之后,要经过构建,把产物部署到服务器上跑起来,这样才能被用户访问到。不同的代码需要不同的环境,比如 JS 代码的构建需要 node 环境,Java 代码 需要 JVM 环境,一般我们会把它们隔离开来单独部署。现在一台物理主机的性能是很高的,完全可以同时跑很多个服务,而我们又有环境隔离的需求,所以会用虚拟化技术把一台物理主机变为多台虚拟主机来用。现在主流的虚拟化技术就是 docker 了,...

2022-09-08 14:54:27 97

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除