随笔分类 - js
about js
摘要：关于 V8 我想前端从业人员或多或少会听说过这个词，但是他具体是什么， 怎么入门， 怎么学习是一个较高的门槛，本文就 V8 入门，来做一个记录，也方便大家的学习。 V8 是 Google 用 C++ 编写的开源高性能 JavaScript 和 WebAssembly 引擎。它被用于 Chrome 浏
阅读全文
摘要：微前端简介 Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends 前端
阅读全文
摘要：前言 在大型项目中，微前端是一种常见的优化手段，本文就微前端中沙箱的机制及原理，作一下讲解。 首先什么是微前端 Techniques, strategies and recipes for building a modern web app with multiple teams that can
阅读全文
摘要：在 `quill.js` 中，扩展性最强大的功能就是插件 本文主要以一个图片扩展的插件来介绍 `quill` 插件开发 在 `quill.js` 中他有着自己的名字: `Modules`，而他也内置了 5 种插件： - TOOLBAR - KEYBOARD - HISTORY - CLIPBOARD
阅读全文
摘要：## 前言 之前开发重构项目的时候，遇到了一些问题， 如 `hooks` 的性能问题和 `quill` 的重载问题。本文就是记录这些问题的解决过程。 ## 场景 在基于富文本的输入场景中，我们发现在输入回车后会出现明显的卡顿现象。为了更好地展示此类场景，这里使用了一个简单的例子展示。 ```tsx
阅读全文
摘要：## 前言 鉴于各种繁杂的需求，`quill.js` 编辑器也面临着各种挑战，例如我们需要添加“table”布局样式以适应邮件发送格式，手动扩展表情符号功能等等。本文将对这些可定制化功能进行讲解和实现。 ## 区分 format 和 module 首先需要明确的是，我们应该清楚自己所需的扩展具体是什
阅读全文
摘要：什么是 module Federation module Federation(下面简称 MF) 是 webpack5 推出的最新的概念 有用过 webpack 的小伙伴都知道, 在我们打包时, 都会对资源进行分包, 或者使用异步加载路由的方案, 这样打出来的包(也叫 chunk), 在我们使用时,
阅读全文
摘要：引言 前一段时间, 正好在做微前端的接入和微前端管理平台的相关事项。 而我们当前使用的微前端框架则是 qiankun, 他是这样介绍自己的: qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 所以本文基于 single-s
阅读全文
摘要：前言 上一文讲到了图片, 这里我们就讲一个常用的图片场景: 瀑布流, 他的实现和优化 什么瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是 Pinterest，逐渐
阅读全文
摘要：术语表 首先我们需要知道一些术语, 才能更好地理解, 如果您已经了解, 可以跳过这一段 锚点 (anchor) 锚指的是一个选区的起始点（不同于 HTML 中的锚点链接）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。 焦点 (focus) 选
阅读全文
摘要：前言 在当前的 web 开发过程中, 图片的使用是一种重要的功能 本期就来聊聊, 开发中的图片以及我们如何优化图片 图片的类型以及对比 位图 位图的特点是可以表现色彩的变化和颜色的细微过渡，产生逼真的效果，缺点是在保存时需要记录每一个像素的位置和颜色值，占用较大的存储空间。 位图的文件类型很多，如*
阅读全文
摘要：前言 在富文本编辑器场景中, 表格是一种不可忽视的功能, 但是在当前 quill.js 的正式版本(1.x)中, 却不支持此功能 所以本文承接上文 链接, 来讲述下 quill.js 升级到 2.x 的问题以及添加表格功能 为什么需要升级 在目前的 1.x 版本中并不支持表格的元素, 而我们想要这个
阅读全文
摘要：前言 在前端开发中, 富文本是一种常见的业务场景, 而本文要讲的就是富文本框架 quill.js 中的自定义工具栏的开发 介绍 Quill.js 是一个具有跨平台和跨浏览器支持的富文本编辑器。凭借其可扩展架构和富有表现力的 API，可以完全自定义它以满足个性化的需求。由于其模块化架构和富有表现力的
阅读全文
摘要：介绍 Bun 是一个现代的JavaScript运行环境，如Node, Deno。主要特性如下: 启动速度快。 更高的性能。 完整的工具（打包器、转码器、包管理）。 下面我们来横向对比下框架所说的性能: 相同电脑下, 不同 js 运行环境的每秒操作数 更多具体的优点 内置 fetch、WebSocke
阅读全文
摘要：起因 场景一: 当前项目经历了刀耕火种地开发, 之后接入了 cli 工具集中管理打包, 那么项目中的依赖, 和 cli 工具中的依赖重合度是多少, 并且他的的版本是否相同, 是否有冗余代码 场景二: 项目中某一个库升级了, 他依赖了 A 库的 V3 版本, 同时当前项目依赖的是 A 库 V2版本,
阅读全文
摘要：背景 在当前业务项目中使用的 react-router 版本为 3.x, 而当前主流使用的是 5.x 以上, 本文就来探究 react-router 升级的方案 当前情况 目前使用的是 react-router3.x 版本 再加上和 redux 的搭配库 react-router-redux 一起使
阅读全文
摘要：前言 在前一段时间做一个需求的时候, 碰到一个自定义列表的功能, 他的所有数据显示都是通过 jSON 字符串来存储,使用也是通过 JSON 解析 起先他是有数据上限的, 但是后面提高上限后就出现了卡顿等问题, 所以本文就是介绍一些方案来解决前端大量数据的渲染问题 方案 innerHTML 首先是在很
阅读全文
摘要：react-window 这篇是 react-window 的源码阅读, 因为此库使用的是 flow, 所以会涉及一些特殊的东西, 和 ts 类似 使用 List 首先是 List 的使用: import {FixedSizeList as List} from 'react-window'; co
阅读全文
摘要：前言: 这次本来想解析 react-virtualized 的源码, 但是他的内容太多, 太杂, 我们先从小的库入手, 由点及面 所以这次改为了 react-virtual 和 react-window 的源码, 这篇就是 react-virtual 什么是虚拟列表 一个虚拟列表是指当我们有成千上万
阅读全文
摘要：这次的版本是 6.2.1 使用 相比较 5.x 版本, 元素升级为了 简单的 v6 例子: function App(){ return <BrowserRouter> <Routes> <Route path="/about" element={<About/>}/> <Route path="/
阅读全文