你好，我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容，本期分享的全部是英文材料。（标题取自其中两则分享，不代表全部内容都是该主题，特此声明。）本周刊由Python猫出品，精心筛选国内外的 250+ 信息源，为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景：帮助所有读者精进 Python 技术，并增长职业和副业的收入。周刊已开通 Telegram 频道，欢迎加入：https://t.me/pythontrendingweekly🦄文章&教程1、LPython：新颖、高性能、适用于多平台的 Python 编译器最新发布的一个Python 编译器（当前为 alpha 版本），目标是打造高性能的 Python。可以将带有类型提示的 Python 代码编译为优化的机器代码，支持提前编译（AOT）与即时编译（JIT），支持与 CPython 互操作，支持多种后端，例如 LLVM、C、C++、WASM、Julia 和 x86。2、Cython 3.0.0 的文档Cython 是一门专用于提升 Python 性能的编程语言，最近从 0.29.x 版本直接升到了 3.0.0 版本，带来了大量的问题修复以及新特性，这份 changelog 文档非常丰富。（附一篇详解历时五年的 Cython3.0 都发生了哪些变化，总结了这个版本的几项较大的变化点。 ...继续阅读 (87)

# 监控、定位JavaScript操作cookie## 一、脚本说明### 为什么会有这个东西？数据无价的时代，爬虫与反爬的对抗已经进入白热化状态，其中Cookie反爬是`最常见之一`的反爬类型， 网站方通过混淆得亲妈都不认识的JS代码设置Cookie（通常是浏览器指纹、请求时必须带上的Cookie之类的），面对请求时必须要带上但是又不知道在哪里生成的Cookie， 你在几万行混淆的亲妈都不认识的JS屎海中苦苦挣扎希望能找到生成Cookie的地方（要是逆向思路不科学兴许还会呛上几口...），甚至几度想找个借口骗自己放弃，或者要不干脆用Selenium之类的浏览器模拟方式算了？ 怂个球，此脚本就是来助你一臂之力的！ （你我都知道，这段只是撑场面的废话，你可以略过，如果你没有不幸读完的话...）### 脚本功能本脚本的功能大致分为两个部分：- monitor： 监控所有JS操作cookie变化的动作并打印在控制台上- debugger: 在cookie符合给定条件并且发生变化时打debugger断点### Hook生效的条件- 需要本脚本被成功注入到页面头部最先执行，脚本都未注入成功自然无法Hook- 需要是JavaScript操作document.cookie赋值来操作Cookie才能够Hook到 （目前还没碰到不是这么赋值的...）### 使用须知本脚本是通过将自己的JS代码注入到 ...继续阅读 (130)

上周四在掘金的跨端技术分享上的一个主题，将Pake开源过程中的一些思考和经验分享给大家，同时也聊了聊前端、Rust、开源、技术产品化的一些自己想法，欢迎感兴趣的同学一起交流，有没有讲清晰的地方辛苦直接指出。本文分成两部分，第一部分是分享的 Keynote 以及视频，第二部分是我的分享学习笔记，里面会有一些关于 Rust 更详细的知识。分享文档键盘左右可切换，PC 可右下角全屏按钮可全屏查看，鼠标移动到左侧边栏可查看目录，视频可见Youtube。全屏自问自答Rust 中的内存管理原理在 Rust 中，内存管理是通过所有权（Ownership）、借用（Borrowing）和生命周期（Lifetimes）这三个概念来实现的。这种机制使得 Rust 在没有垃圾回收的情况下也能保证内存安全。所有权：在 Rust 中，每一个值都有一个被称为其所有者（owner）的变量。值在任何时候都只能有一个所有者。当所有者（变量）离开作用域，这个值将被丢弃（drop）。借用：在 Rust 中，借用是一种让你访问数据但不获取其所有权的机制。当你创建一个引用时，你就是在借用数据，Rust 有两种类型的借用：可变借用和不可变借用。不可变借用用&符号表示，可变借用用&mut;表示。不可变借用允许同时有多个引用，但他们只能读取数据，不能修改。可变借用只允许有一个引用，但是可以修改数据。Rust 中的内存安全和线程安全 ...继续阅读 (71)

This is post 6 of 6 in the series“Create a website with ASP.NET Core and Angular”In this series, I will show you how to create the web API with .Net core and communicate with Angular in frontend, and I will keep to update it!How to setup VS Code environment for ASP.NET Core ProjectUse code first to connect database in .Net Core APIUse the Repository pattern in .Net coreCreate .Net Core Api controller for CRUD with repositoryUse the Serilog in .Net CoreCreate Angular Project and Communicate with .Net CoreTitle: Create Angular Project and Communicate with .Net CoreWe have created the ...继续阅读 (106)

前言通常情况下，一个 git 仓库就是一个项目，只需要配置一套 git hooks 脚本就可以执行各种校验任务。对于 monorepo 项目也是如此，monorepo 项目下的多个 packages 之间，它们是有关联的，可以互相引用，所以当成一个项目也没问题。但是也有一种情况，一个 git 仓库下的多个项目之间是彼此独立的，比如 git 仓库下存在前端项目、后端项目、文档项目等等。这时候就需要为每个项目配置不同的 git hooks 脚本了，因为不同的项目有可能校验规则不一样。本文主要探讨一下如何为不同的项目配置 git hooks 脚本。PS：配置 git hooks 脚本使用huksy。方案一：每个项目下都配置一套 git hooks 脚本假设仓库拥前后端两个项目：frontend backend那么我们需要在每个项目下安装husky，同时要在package.json中配置一下prepare脚本（这里以前端项目为示例）：# package.json { "scripts" { "prepare": "cd .. && husky install frontend/.husky" } }然后按照husky文档创建pre-commit和commit-msg钩子文件：#!/usr/bin/env sh . "$(dirname -- "$0")/_/ ...继续阅读 (64)

大家好，我卡颂。经常看技术博客的朋友，可能对Webpilot并不陌生。这是个能对网页内容提问的AIGC浏览器插件。他有什么作用呢？比如，在阅读技术文章前，我们可以让Webpilot对文章内容先做个总结，看完总结再阅读会更轻松。既然这个项目这么有用，而且代码是开源的，那不看看他的实现原理说不过去。况且，我还发现了作者团队留下的乐子 —— 在Webpilot贡献者一栏中，项目主程居然是ChatGPT。既然代码是ChatGPT写的（姑且这么认为吧），那我们看代码也不要人肉看了。今天，让我们试试AIGC读了项目源码后再来教我们。欢迎围观朋友圈、加入人类高质量前端交流群，带飞应用选择当前，代码相关的AIGC应用的操作对象主要是代码片段或某个代码文件，比如：Github Copilotcursor但我们希望应用了解整个项目，所以需要应用既能理解代码片段或某个代码文件，又能理解代码之间的依赖关系。毕竟，代码逻辑通常是跨文件的。比如，假设项目中存在方法fnA，他：在a.js中定义在b.js、c.js中使用那么当提问fnA相关问题，AIGC应用的上下文中起码应该包括以下信息：项目整体情况a.js、b.js、c.js的代码才能回答好问题。要实现类似效果，业界的常用做法是Embedding，即将内容实体映射为低维向量，通过向量之间的相似度判断内容关联关系。比如，开源项目pdfGPT可以接收PDF文档，用 ...继续阅读 (53)

最近，群里面的同学发了这么一个非常有意思是动画效果：原效果地址 --CodePen Demo -- Letter Hop当然，原效果，主要使用了 GSAP 动画库以及一个 3D 文字 JavaScript 库：import { Those3DTexts } from "https://cdn.skypack.dev/that-3d-text-library"; import { gsap } from "https://cdn.skypack.dev/gsap"; import { MotionPathPlugin } from "https://cdn.skypack.dev/gsap/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin); const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; // .... // 剩余代码但是，这个效果，其实本身并不复杂。本文，我们将不借助任何动画库，尝试用最简单的 CSS 和 JavaScript 代码还原一个类似的 Emoji 3D 表情 ...继续阅读 (57)

Although having used the YOLOv5 model several times, I haven’t used its corresponding ONNX model before. This time, I met a use case to run its ONNX model using Javascript.To learn and debug the code, I installed node.js and started my Javascript trip. Thissnippethelps me a lot to understand the Non-Max Suppression algorithm again (I used NMS algo many years). After studying it and also theimplementationin the YOLOv5, I finally knocked together the Javascript code to use the ONNX model of YOLOv5 to detect objects:https://github.com/RobinDong/onnx_js/blob/main/detect.jsWhy the “YOLO ...继续阅读 (99)

【摘要】RDIFramework.NET 快速开发框架 WebEasyUI版本，为企业或个人基于.NET开发系统提供了强大的支持，采用C#语言开发完成，Web前端基于强大的UI组件EasyUI实现。易上手、多组件、全源码提供、可灵活构建各类型系统。阅读全文 ...继续阅读 (107)

一、WebGL简介1.1 概述WebGL(全写 Web Graphics Library)是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑 定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统 显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构 的网站页面，甚至可以用来设计 3D 网页游戏等等。和传统的3D方案相比，WebGL具有如下一些优点：WebGL 是内嵌在浏览器中的，无需安装插件和库就可以直接使用可以在多平台上运行 WebGL 程序让海量数据的三维可视化成为了可能开发环境简单，仅需文本编辑器和浏览器就可以编写三维图形程序更多1.2 WebGL与OpenGLOpenGL是一种用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，是在个人计算机上使用最广泛的两种三维图形渲染技术之一，另一种是Direct3D。在某种意义上，WebGL就是“Web版的OpenGL”。OpenGL ES则是从OpenGL中移除了许多陈旧无用的特性之后的一个轻量级的OpenGL框 ...继续阅读 (68)

作者：yrainly公众号：前端开心果正则表达式进阶内容👉正则表达式基础介绍内容请戳这里哦先补充下之前介绍过的replace()方法的使用。replace()方法详解replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。replace方法有三种形态：String.prototype.replace(str, replaceStr)String.prototype.replace(reg, replaceStr)String.prototype.replace(reg, function)使用示例1：const str = 'Hello Kaixinguo' // 正则表达式 str.replace(/ello/, 'ey') // hey Kaixinguo str.replace(/elll/, 'ey') // Hello Kaixinguo // 字符串：字符串参数会转换为正则表达式 str.replace('ello', 'ey') // hey Kaixinguo str.replace('elll', 'ey') // Hello Kaixinguo ​ str.replace(/o/g, function (...args) {  console.log(args) }) // ['o', 4, 'Hello Kaixing ...继续阅读 (54)

问题描述在饿了么UI中有一个Autocomplete搜索建议输入框组件，一般这个组件是用于做远程关联搜索的（类似百度一下咱们输入一个字，会提示出相关的选择建议）可是在某些情况下，这个Autocomplete组件的弹出层部分会出现错位的情况（Autocomplete组件 = 输入框部分 + 弹出层部分）就像下面的这个效果图对于这样的错位问题，笔者提供一个偏向于源头的写法，能够快速解决问题思路分析我们知道，就前端而言，弹出层是一个非常基础的效果功能目前市面上我们所使用的开源组件库的，但凡涉及到弹出层功能的，比如dropdown、Tooltip、Select的弹出层，基本上都是在Popper.js的基础之上封装的vue2版本中vue团队基于Popper.js封装了一个vue-popper组件而饿了么团队又基于vue-popper组件去封装成各个带有弹出层的组件功能PS：前端组件就是不停的封装（套壳子）...笔者也曾经基于vue-popper组件封装了一个属于自己的tooltip，大家有空了也可以点击链接去瞅瞅文章地址：https://segmentfault.com/a/1190000042463083既然Autocomplete组件的弹出层出现了错位的问题，那么本质上来说，还是源头上Popper.js的问题因为弹出层的位置，是Popper.js计算出来的所以，当弹出层位置错位的时候，我 ...继续阅读 (60)

背景最近的项目有一个加载远程组件的需求。基于此我对 Vue 加载远程组件的方案进行了研究，并且整理了两个可行的解决方案。HTML 文件 + umd 组件这个方案是最简单、最容易实现的。组件以 umd 的格式进行打包，然后在 HTML 文件中直接使用。// 将组件 URL 挂载到 script 标签上，然后通过 window 获取这个组件 await lodaScript('http://localhost/component/input/0.1.0/bundle.js') app.component('TestInput', window.TestInput)但是这个方案不适合在大型项目中使用，效率比较低。Vue 工程项目 + esm /umd 组件Vue 工程项目 + esm /umd 组件是我目前在使用的方案，但是在研究的过程中遇到了两个问题，逐一解决后，才把这个方案趟通了。第一个问题Relative references must start with either "/", "./", or "../"由于我们的项目不需要兼容 IE，所以打包组件采用的是 esm 格式。打包后的组件源码如下：import { reactive } from 'vue' // other code...然后在主项目中进行引用：const { default: TestInput ...继续阅读 (47)

JavaScript中的async和await关键字提供了一种现代语法，帮助我们处理异步操作。在本教程中，我们将深入研究如何使用async/await来掌控JavaScript程序中的流程控制。总览如何创建JavaScript异步函数async关键字await关键字声明异步函数的不同方式await/async内部机制从promise到async/await的转换错误处理在函数调用中使用catch()并行运行异步命令同步循环中的异步await顶层await总结在JavaScript中，一些操作是异步的。这意味着它们产生的结果或者值不会立即奏效。看看下面的代码：function fetchDataFromApi() { // Data fetching logic here console.log(data); } fetchDataFromApi(); console.log('Finished fetching data');JavaScript解释器不会等待异步fetchDataFromApi函数完成后再解释下一条语句。因此，在打印API返回的真实数据之前，它就会打印Finished fetching data。大多数情况下，这并不是我们想要的行为。幸运的是，我们可以使用async和await关键字，使我们的程序在继续前进之前等待异步操作的完成。这个功能是在ES2017 ...继续阅读 (122)

javascript的闭包闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。简言之：闭包就是能够读取其他函数内部变量的函数。词法作用域示例1：function init() { var name = "localName"; // name 是一个被 init 创建的局部变量 function closureName() { // closureName() 是内部函数，一个闭包 alert(name); // 使用了父函数中声明的变量 } closureName(); } init();上面词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。词法指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量。示例2：function fn() { var name = "localName"; function closureName() { alert(name); } return closureName; } var myFn = fn() myFn();示例2的运行效果和示例1一 ...继续阅读 (78)

在使用 React 进行开发过程中，或多或少使用过 Refs 进行 DOM 操作或者访问一些DOM上的API，又或使用 Refs 保存数据。不管怎么说 Refs 总是 React 提供的一大助力，这篇文章主要介绍 Refs 功能和使用场景以及注意事项。希望能增强对 Refs 的理解，掌握好这把利剑。什么是 Refs？Refs 是 React 提供的用来保存 object 引用的一个解决方案，在函数式组件使用 useRef 创建一个 ref 对象，ref 对象存在一个可直接修改的 current 属性，内容都是存在 current 上。Refs 使用场景主要分为两个方向，其一是实现 DOM 访问与操控、在两次render之间传递数据内容【和state机制有很大不同，下文会有对比介绍】。如果在组件返回的 jsx dom上绑定了 ref 属性，React 在处理 jsx 时会把该dom节点【原生node节点】的引用存储在 ref.current 上。使用方式分为三步：第一步、使用 useRef 创建 ref 对象（useRef是 FC hooks， class 组件使用React.createRef()创建 ）第二步、赋值&使用【操作dom则绑定为dom的ref属性的值，用于保存值的时候传递内容给 ref.current】,第三步、访问ref内容【进行dom对应的api访问，进行 scr ...继续阅读 (73)

TypeScript 玩转类型操作之基础篇（回来，不是讲基础类型）引言本文的目的是探索 TypeScript 类型操作的基础知识，先介绍 typeof 、keyof、extends、infer 等操作关键词的使用方式（作为基础）；然后介绍TS提供的通用类型工具（详细介绍官方源码具体实现）；这两个部分熟练掌握，我们就掌握TS体操的核心内容了，剩下的就是考虑根据类型目标情况如何选择类型操作顺序。欢迎成为体操小能手~typeoftypeof 在 JS 中用于获取一个变量的基础数据类型，在 TS 中 typeof 用于获取运行时变量或者属性的类型。在TS代码中需要注意这两种用法之间的差异，使用的情况不同的语义环境下有不能的表现形式。typeof 以JS的判断变量类型时工作时，返回值是一个字符串内容是其中之一（"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"）。const s = "hello"; let n = typeof s; // n 值是 "string",n 类型是 let n: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "fun ...继续阅读 (71)

最近，群友贴了一个非常有意思的动画效果，整体动画效果如下：点击某个按钮后，触发一个动画效果，原本的网格内容，将按顺序（又带点随机的效果）从高处下落进行加载填充动画。当然，我个人认为这个动画有点华而不实，主要体现在这个动画一次需要耗费较长时间，有点消磨人的耐心。不过确实一个很好的 CSS 动画教学案例。而本文，就将具体去剖析这个动画，如果使用纯 CSS，应该如何实现。还原布局结构首先，我们需要大致还原布局结构，这个并非整个动画的核心。整个动画的核心在于元素按顺序（又带点随机的效果）从高处下落渐次进行下落加载填充动画。当然，还原这个布局也非常简单，这里我们借助 flex 布局快速实现，几个关键点：每个 flex-item 宽度不固定：这一点可以使用 SASS 函数进行模拟，随机生成不同宽度的 flex-item每个 flex-item 背景色随机：这一点同样也可以借助 SASS 函数 实现整体水平居中：这个也简单，父容器添加justify-content: center;即可这样，整个布局的大致代码如下：// ... 假设一共 50 个 li$count: 51; @function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } @function randomColor() { ...继续阅读 (60)

箭头函数箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且箭头函数不能用作构造函数。语法(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于：(param1, param2, …, paramN) =>{ return expression; } // 当只有一个参数时，圆括号是可选的： (singleParam) => { statements } singleParam => { statements } // 没有参数的函数应该写成一对圆括号。 () => { statements } //加括号的函数体返回对象字面量表达式： params => ({foo: bar}) //支持剩余参数和默认参数 (param1, param2, ...rest) => { statements } (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } //同样支持参数列表解构 let f = ([a, b] = [1, 2], ...继续阅读 (65)

前言通过上篇文章——弄懂这几个概念后，我对webpack有了更新的理解的讲解，我们大致了解了：使用webpack过程中出现的一些概念结合打包过程中出现的概念，浅析了webpack打包流程，让大家对打包流程有个大致的理解我们都知道，我们在实际开发过程中，使用webpack无非就是为了最后输出浏览器能运行的css、img、js、html等前端资源。那么，为了更贴近实际，我们这篇文章，就以如何输出css、img、js、html等前端资源为目的，学习一下如何配置webpack。学习大纲这篇文章主要讲解以下基础配置：处理css、less文件处理图片（img）、字体（font）、音乐（audio）等前端资源文件编译es6+语法及API处理html文件webpack文档对配置写的算挺详细了，所以这里我也不想复制粘贴又写一遍，这样不如大家直接看文档。授人以鱼不如授人以渔，学习不能硬学，应该要有一些方法跟技巧。因此，我更想在讲解配置的过程中，总结一些方法，让我们更好的理解webpack的配置项。这样，一些类似的一些配置，我们照葫芦画瓢，看文档就可以配出来。备注文章涉及到的案例已经上传到github：为了阅读方便，文章只贴了相关代码，建议fork一下，看看完整代码；或者跟着文章一起边看边敲，这样印象会更深刻一些创作不易，如果觉得有帮助的话，欢迎star🌟处理css、less文件我们先用learn-03 ...继续阅读 (75)

javascript函数函数是 JavaScript 中的基本组件之一。一个函数是 JavaScript 过程是一组执行任务或计算值的语句。要使用一个函数，你必须将其定义在你希望调用它的作用域内。当函数是一个对象的属性时，被叫做方法。在javascript中，函数是头等对象，因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。它们是Function对象。如何定义函数使用函数声明一个函数定义（或称函数声明，或称函数语句）是由function关键字和语句组成。有函数名称，函数参数列表，多个参数用逗号分隔，定义函数的语句，用大括号{}包裹。示例：定义一个简单的addSum函数：function addSum(x, y) { return x + y; }函数的名称叫addSum，它有两个参数，大括号中的语句将该函数的参数相加后返回。函数 的return语句确定了函数的返回值。如果函数中没有return语句，默认返回undefined。参数是原始参数（如数字，字符串，布尔值）作为值传递给函数，如果被调用函数改变了这个参数的值，不会影响到全局或调用函数。参数如果是非原始值（如对象或数组），函数改变了这个非原始值的内容，这个改变会影响到函数外部的非原始值的内容。函数生成器声明（function*语句）函数声明有一种特殊的语法function* name(p ...继续阅读 (76)

大家好，我卡颂。每个框架由于实现原理的区别，都会有些独特的概念。比如：Vue3由于其响应式的实现原理，衍生出ref、reactive等概念Svelte重度依赖自身的编译器，所以衍生出与编译相关的概念（比如其对label标签的创新性使用）在React中，有一个非常容易被误用的API——useEffect，今天要介绍的Effect Event就属于由useEffect衍生出的概念。欢迎围观朋友圈、加入人类高质量前端交流群，带飞被误用的useEffect本文一共会涉及三个概念：Event（事件）Effect（副作用）Effect Event（副作用事件）首先来聊聊Event与Effect。useEffect容易被误用也是因为这两个概念很容易混淆。Event的概念在下面的代码中，点击div会触发点击事件，onClick是点击回调。其中onClick就属于Event：function App() { const [num , update] = useState(0); function onClick() { update(num + 1); } return ({num}) }Event的特点是：是由某些行为触发，而不是状态变化触发的逻辑。比如，在上述代码中，onClick是由点击事件这一行为触发的逻辑，num状态变化不会触发onClick。Effec ...继续阅读 (64)

Chrome浏览器，作为前端开发者最亲密的伙伴，相信你一定不陌生。我们可以用它来查看网络请求、分析网页性能、调试最新的 JavaScript 功能…… 除了这些，它还提供了很多强大但不常见的功能，可以大大提高我们的开发效率。我们来看一下。 ...继续阅读 (90)

移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。[crayon-657c5bcdaa7ac665000021/][crayon-657c5bcdaa7b1200960664/]以上两种方法都试过，不起作用。将-webkit-overflow-scrolling先设置成auto再设成touch的方案，同样不起作用。 最终使用一个简单粗暴方案解决：先this.$refs.chat.style =display: none;再setTimeout(() => {this.$refs.chat.style =display: block;this.$refs.chat.scrollTop = 100000;}, 0)使整个滚动区域回流，白屏问题解决。但是这个方案有两个缺点：一、电脑上会出现明显闪烁的问题，ios上不明显。二、如果在dom上使用了变量的形式动态配置样式，在display:none;后会失效，需要在display:block;的同时处理。The postios滚动列表白屏问题appeared first onSKILL.NULL. ...继续阅读 (48)

前言在日常业务中，常会碰到产品要求数字展示千位分隔符的需求，本着学习钻研，不做业务码农的想法，尝试着写了一个单正则并且支持小数点的添加千位分隔符的方法。直接上结果就一行代码thousandBitSeparator = (num) => {   return num?.toString().replace(/(?继续阅读 (63)

大家好，我卡颂。遥想前几年，不管是React还是Vue，都在快速迭代版本，以至于很多同学抱怨学不动了。而现在，React已经一年没更新稳定release了。甚至有人认为，这就是前端已死最直接的证据：那么，React最近一年为什么不发版了呢？是因为前端框架领域已经没有新活儿可整了么？React v19是不是遥遥无期了？欢迎围观朋友圈、加入人类高质量前端交流群，带飞最近一年React活跃吗？不想看长文章的同学，这里一句话总结本文观点：React之所以一年没发版，并不是因为无活可整，而是在完成框架从UI库到元框架的转型首先，我们来看看，最近这一年React的更新活跃度是否降低？从代码push量来看，最近一年甚至比release产出较多的前几年更活跃：既然更活跃，那React这段时间到底在做什么呢？从代码增删行数可以一窥端倪，其中：绿色柱状代表代码增加行数红色柱状代表代码减少行数红色折线代表代码行数总体趋势从代码量变化来看，React历史上大体分为四个时期：13年开源，到17年之前的功能迭代期持续到18年的重构期（重构React Fiber架构）18～22年基于Fiber架构的新功能迭代期22年至今的重构期功能迭代期与重构期的区别在于：前者主要是在稳定的架构上迭代新特性后者一般重构底层架构的同时，重构老特性剧烈的代码量波动通常发生在重构期。比如，在最近的重构期内，PR #25774删除了3 ...继续阅读 (69)

前言导致白屏的原因大概有两种，一为资源的加载，二为 JS 执行出错本文就 JS 中执行的报错，会比较容易造成"白屏"场景，和能解决这些问题的一些方法，作出一个汇总常见的错误SyntaxErrorSyntaxError（语法错误）对象代表尝试解析不符合语法的代码的错误。当 Javascript 引擎解析代码时，遇到了不符合语法规范的标记（token）或标记顺序，则会抛出SyntaxError。这里陈列下SyntaxError的常见错误保留字错误SyntaxError: "x" is a reserved identifier(Firefox)SyntaxError: Unexpected reserved word(Chrome)如在控制台执行下方代码，则会上述错误出现const enum = 1enum在严格模式和非严格模式下都是保留字。而以下标记符只会在严格模式下才作为保留字：implementsinterfaceletpackageprivateprotectedpublicstatic例如:const implements = 1 // ✅ "use strict"; const implements = 1; // caught SyntaxError: Unexpected strict mode reserved word命名错误一个 JavaScript 标识符必 ...继续阅读 (63)

前言欢迎关注同名公众号《熊的猫》，文章会同步更新，也可快速加入前端交流群！本文灵感源于上周小伙伴遇到一个问题："一个本该返回Blob类型的下载接口，却返回了JSon类型的内容！！！"这会有什么问题呢？按原逻辑就是调用该接口后，就会一股脑把该接口接返回过来的内容，直接经过Blob 对象转换后再通过隐藏的标签实现下载。但是有一个问题，那就是接口也是需要进行各种逻辑处理、判断等等，然后再决定是给前端响应一个正常的Blob 格式的文件流，还是返回相应JSon 格式的异常信息等等。如果返回了JSon 格式的异常信息，那前端应该给用户展示信息内容，而不是将其作为下载的内容！FileReader 实现 Blob 从 String 到 JSON复现问题为了更直观看到对应的效果，我们这里来简单模拟一下前后端的交互过程吧！前端由于小伙伴发送请求时使用的是Axios，并且设置了其对应的responsetype：blob | arraybuffer，所以这里我们也使用Axios即可，具体如下：// 发起请求 const request = () => { axios({ method: 'get', url: 'http://127.0.0.1:3000', responseType: 'arraybuffer' }) ...继续阅读 (59)

引言Ant Design V5 是截止目前 Ant Design 组件库最新版本，我们在业务场景已经开始应用，但在近期的测试中发现 Ant Design 组件无法在 360 极速浏览器（极速模式）下显示组件样式。经过查看样式和查阅官方文档， Ant Design V5 组件的样式中大量使用了 :where() 选择器来降低选择器的优先级，以此减少开发者升级组件库时额外调整自定义样式的成本。:where() 对于 Chrome 仅支持 Chrome 88 以上，截止目前 360 极速浏览器的 Chrome 版本为 86，因此无法显示组件样式。参考浅谈CSS逻辑选择器 is、where、not、has:where() - MDN对于此样式兼容问题，主要解决思路如下：参照官方样式兼容文档，使用其提供的降级方案，移除掉 :where() 选择器。主要是通过 Context 为组件传入配置，关闭降低样式优先级的配置，以此移除 :where() 选择器。但针一些无法接收 Context 的场景，例如 Message、Modal 和 Notification 等组件的静态调用形式，仍然会使用 :where() 选择器。对于第一点产生的问题，如果要在组件中使用 Message、Modal 和 Notification 组件，需要避免静态调用形式，采用官方推荐的 Hook 调用形式，可以通过App ...继续阅读 (49)

前言欢迎关注同名公众号《熊的猫》，文章会同步更新，也可快速加入前端交流群！最近有个同学在面试时被要求手写一个CountDown 计时器组件，但可能是因为之前没有了解过，所以思路上没有那么顺畅，过后他询问我应该怎么写（哈哈，我也没写过），于是就有了本篇文章，希望本篇文章对你有所帮助！！！不难看出，要求手写一个CountDown 计时器组件目的无非考察如下几个方面（谁也不知道面试官在想什么）：组件封装能力组件输入，即对应组件内部 Props的 设计 和 考量组件输出，即对应组件对外提供的 属性 或 方法逻辑复用，即指组件内部逻辑的可组合性时间相关的敏感度倒计时的实现方式有多种，例如setInterval、setTimeout、requestAnimationFrame等等，那么哪种更合适？获取当前时间可以用Date.now()、performance.now()，那么该怎么选？setInterval & setTimeout & requestAnimationFrame倒计时功能必然需要一个不断执行的异步过程（没疑问吧），这可以使用运行时环境提供的API，即setInterval、setTimeout、requestAnimationFrame，那么到底该选择谁更合适呢？下面进行逐个分析！setInterval是什么？setInterval()方法会重复调用一个函数或执行一个代码片段 ...继续阅读 (56)