05 2023 档案
摘要：JavaScript 有七种基本数据类型，分别如下： 1. 数字（Number）类型：整数和浮点数的统称，用于表示数值。 2. 字符串（String）类型：由零个或多个字符组成的序列，用于表示文本。 3. 布尔（Boolean）类型：只有 true 和 false 两个取值，用于表示逻辑上的真假。
阅读全文
摘要：深拷贝是指复制一个对象时，不仅复制对象本身的属性，而且递归复制对象属性的值。通俗的说，深拷贝将一个对象完全复制一份，并且新对象的修改不会影响原对象。 实现深拷贝的方法有很多，以下是两种常见的方式： 1. 递归实现深拷贝 通过递归遍历需要拷贝的对象，当遇到子对象时进行深度遍历，将子对象也进行深拷贝。可
阅读全文
摘要：js宏任务是什么？当前调用栈中执行的代码成为宏任务。js微任务是什么？当前宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。宏任务中的事件放在callback queue中，由[事件触发](https://so.csdn.net/so/search?q=%E4%BA%8B%E4
阅读全文
摘要：在 JavaScript 中，0.1 和 0.2 都是小数，它们实际的二进制表示时可能是无限循环或者近似值的。而当两个近似值的小数进行数值计算时，由于数值的精度只有 53 位，会产生舍入误差，从而导致计算结果不准确。 例如，在 JavaScript 中执行 `0.1 + 0.2` 的运算，可能得到的
阅读全文
摘要：Vite 不是基于 Webpack 的工具，而是一个基于 Rollup 的工具，用于快速构建现代化的 Web 应用程序。 Vite 采用了类似 Vue.js 的单文件组件（SFC）的开发模式，支持 Vue 3、React、Preact、Svelte 和 LitElement 等前端框架。同时，它通过
阅读全文
摘要：1. 劣势 2. 优势 + 打包快 + 预打包 + 第三方库预打包 通过浏览器去做打包esmodule? webpack 迁移到 vite + magic commit (webpack) + rollup 特性 1. 在开发环境中，一个 import 语句代表一个 HTTP 请求，正式Vite的d
阅读全文
摘要：1. prettier 2. eslint 1. eslint-loader 3. githooks 1. precommit 4. commitlint 5. CICD -> jetbrain 1. 如何自动部署 1. webpack/rollup -> npm package webpack 的
阅读全文
摘要：1. .git/hooks 2. git在提交之前走一遍git/hooks里面的勾子 如何跳过githooks git commit --no-verify
阅读全文
摘要：## Islands Architecture是什么 `Islands Architecture`（孤岛架构）的概念最初是由**「Etsy」**的前端架构师 **「Katie Sylor-Miller」** 在 2019 年提出，并由`Preact`作者**「Jason Miller」**在isla
阅读全文
摘要：是的，npm中确实存在幽灵依赖（Ghost Dependencies），也称为虚拟依赖（Virtual Dependencies）。 幽灵依赖指的是在项目中虽然没有显式引用该依赖，但是存在其他依赖与该依赖版本有冲突，导致该依赖被安装到项目中，占用项目的空间和资源。 举个例子，假设项目引用了两个库 A
阅读全文
摘要：## Vue Element Admin vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中
阅读全文
摘要：# React18 + React-Router v6 + TypeScript + Vite2 + Ant-Design 开源管理系统 ### 一、在线预览地址 👀 - Link：[http://hooks.spicyboy.cn](http://hooks.spicyboy.cn/) ###
阅读全文
摘要：微前端是将单体应用程序拆分为一组更小、更容易管理的单元，使得应用程序能够更加灵活、可扩展、易于维护，并且能够让不同团队或个人独立开发、测试和部署应用程序的不同部分。这种架构方式可以从多个方面带来很多好处，具体包括以下几点： 1. 易于扩展和维护 微前端架构将应用程序拆分成多个小型单元，每个单元包含不
阅读全文
摘要：Qiankun是一个基于微前端的解决方案，但它并不是基于iframe的。Qiankun是基于浏览器新特性Web Components和Custom Elements实现的 它使用了Shadow DOM来隔离各个子应用的CSS和JavaScript，这样可以避免全局命名冲突。 它使用了HTML5的Hi
阅读全文
摘要：WebAssembly 是一种新的字节码格式，它是一种可移植、高性能的二进制格式，可以在现代的 Web 浏览器中运行。WebAssembly 可以在浏览器中以本地速度运行编写的任何语言代码，无需通过 JavaScript 解释器进行解释。 WebAssembly 的目标是提供一种更加高效、安全和可靠
阅读全文
摘要：在 Vue-Router 中，提供了两种路由模式：hash 和 history。 1. Hash 模式 Hash 模式本质上是通过锚点值（URL 中 # 号后面的部分）来实现路由的切换和监听的。当 URL 中的 hash 发生变化时，路由就会根据 hash 值的变化来切换页面，同时也可以通过监听 h
阅读全文
摘要：前端SEO（Search Engine Optimization，搜索引擎优化）主要是针对网页的内容进行优化，提升网站在搜索引擎中的排名和曝光率。前端优化主要涉及以下几个方面： 1. 网页的结构和内容：要提高网页的排名，需要考虑内容的丰富程度和排版布局的清晰度。要把关键词和主题贯穿于页面的标题、描述
阅读全文
摘要：RBAC（Role-Based Access Control）是基于角色的访问控制模型，是一种广泛应用于信息技术（IT）安全中的访问控制机制。RBAC 模型建立在三个关键元素之上：用户、角色和权限。 在 RBAC 模型中，用户与角色相关联，而角色与权限相关联。一个用户可以拥有多个角色，而一个角色可以
阅读全文
摘要：1. canvas 2. mutation observer 1. 用户通过控制台删掉，监听dom变化，重新加上水印
阅读全文
摘要：我们日常中应该都经常遇到各种电子合同，需要我们去手动签名，往往只需要手动签名，那么是如何实现的呢？你有了解过么，看似很复杂其实非常简单，初级版本我们甚至只需要不到二十行代码即可实现。当然，真实的场景我们需要考虑更多，那么今天的主角依然是**canvas**，让我们开始吧！ ### 准备工作 首先我们
阅读全文
摘要：前端大文件分片上传需要将文件切割成若干个片段，然后将每个片段上传到服务器，最终在服务端将所有的片段合并成完整的文件。下面是一个前端大文件分片上传的示例： 1. 将文件切割成若干个片段。 ```javascript function splitFile(file, chunkSize) { let f
阅读全文
摘要：1. Mixpanel：Mixpanel是一个基于事件的分析工具，可以通过跟踪用户行为并分析事件发生频率、用户转化率等指标来帮助您优化产品。 Mixpanel的主要特点是易于使用、可视化的数据分析以及强大的A/B测试工具。 2. Amplitude：Amplitude是一个基于事件的分析工具，可帮助
阅读全文
摘要：1. 动态的Class名称或者ID 2. 动态的标题 1. 限制访问频率：可以对同一 IP 地址的访问进行限制，防止恶意爬虫过度频繁地访问同一页面。 1. 使用反爬虫技术：如图形验证码，滑动验证码、语音验证码等方式，提高爬虫运行的难度。 2. 动态生成接口：通过 Ajax 请求来获取数据，动态生成页
阅读全文
摘要：移动端布局方案通常有如下几种： 1. 使用百分比布局 百分比布局是一种常见的移动端布局方式，通过设置元素的宽度或者高度为百分比，从而实现自适应效果。例如： ```css .container { width: 100%; } .item { width: 50%; float: left; } ``
阅读全文
摘要：移动端300毫秒的延迟是由于双击缩放（double tap to zoom）机制引起的。当用户在移动设备上轻触屏幕时，浏览器会等待300毫秒，以确定用户是否要进行双击缩放。 为了解决这个问题，有以下几种常见的方法： 1. 使用meta标签禁用缩放功能 ```html ``` 这样一来，就可以禁用移动
阅读全文
摘要：https://cccreate.co/ 生成各种主题色
阅读全文
摘要：Tailwind CSS 的生产环境按需加载样式，是通过 PurgeCSS 插件和 Webpack 进行实现的。 在 Tailwind CSS 的生产环境构建配置中，会先使用 PurgeCSS 对项目中的 HTML、JavaScript 和 CSS 进行扫描，去除未使用的样式，生成一个经过优化的样式
阅读全文
摘要：语义化 样式复杂 好处：不用思考样式名称 坏处：className会显得非常长
阅读全文
摘要：CSS Grid 是一种基于网格的布局系统，用于在网页布局中创建复杂的、多列的、响应式网格。使用 CSS Grid，我们可以快速地创建强大的、灵活的布局，能够完全控制网页布局的行和列，同时还能够处理响应式布局。 在使用 CSS Grid 时，我们需要定义一个网格容器（也就是包含所有网格元素的 HTM
阅读全文
摘要：实现 grid 布局的水平居中和垂直居中可以使用以下两种方式： · 使用 align-items 和 justify-items 属性 可以将 grid 容器设置为网格项目在水平和垂直方向都居中，方法是将 align-items 和 justify-items 属性都设置为 center。例如： .
阅读全文
摘要：当然可以，这里提供一个基本的 CSS Grid 布局的案例。 HTML 部分： <div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3">
阅读全文
摘要：CSS 的三大特性包括： 层叠性（Cascading） 层叠性是指用于控制多个样式定义同时应用到某个元素时，如何决定哪个样式定义将被应用的机制。CSS 样式表中的规则可以根据其特定优先级与其他规则进行层叠，最终得到应用于元素的样式。常用的应用场景有： 通过应用不同的样式类来覆盖或扩展第三方 CSS
阅读全文
摘要：rem和em都是CSS中用于设置字体大小的单位，它们之间的区别如下： rem单位 rem单位表示的是相对于根元素（即html元素）的字体大小。比如，如果html元素的字体大小是16px，那么设置1rem的大小就相当于设置为16px，2rem则相当于32px。因此，rem单位通常被用于响应式设计中，可
阅读全文
摘要：flex: 1是 flex-grow: 1, flex-shrink: 1, flex-basis: 0 的合并写法。 flex-grow 属性规定项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间，如果一个项目的 flex
阅读全文
摘要：CSS选择器是用来选择HTML或XML元素的一种方式，CSS选择器可以根据元素的标签名、类名、ID、属性值等特征进行选择。以下是一些常用的CSS选择器： 标签选择器：使用元素的标签名作为选择器，例如：p、h1、div等。 类选择器：选择具有指定类名的元素，使用“.类名”作为选择器，例如：.demo。
阅读全文
摘要：当 ES Module 最开始作为一种新的 JavaScript 模块化方案在 ES6 中被引入的候，其实是通过在 import 语句中强制指定相对路径或绝对路径来实现的。 import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7"; // ES
阅读全文
摘要：重排：指的是当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的过程。这个过程比较耗费 CPU 资源，因为它需要三种计算：布局计算、样式计算、分层和绘制计算。重排比重绘的代价更高。 重绘：指的是当渲染树中的一些元素需要更新属性，而这些属性只影响元素的外观、风格，而不会影响
阅读全文
摘要：写在前面 想来很多同学看到内存泄漏，内心直接会跳出两个字：闭包！！！再让你说点其它的估计就噤声了。如果你对内存泄漏的了解仅限于闭包，那真的是应该仔细看此文了，闭包可能会造成内存泄漏，但是内存泄漏并不是只有闭包，它只是内存泄漏的引子之一罢了。 写的程序运行一段时间后慢慢变卡甚至要崩溃了？ 如题，你的程
阅读全文
摘要：事件循环是 JavaScript 的一种执行机制，用于协调异步任务的执行顺序、传递消息以及处理用户交互等事件。事件循环由以下四个组成部分组成。 调用栈（Call Stack）：调用栈是 JavaScript 的一种执行机制，用于控制函数的执行顺序。当函数被调用时，将函数压入调用栈中，并开始执行函数，
阅读全文
摘要：浏览器中的 Ajax 请求流程一般包括以下几个步骤： 创建 XMLHttpRequest 对象 通过 new XMLHttpRequest() 方法创建 XMLHttpRequest 请求对象，该对象提供了一些属性和方法，可以用来发送 Ajax 请求并处理响应数据。 发送请求 使用 open() 方
阅读全文
摘要：事件循环是 JavaScript 的一种执行机制，用于协调异步任务的执行顺序、传递消息以及处理用户交互等事件。事件循环由以下四个组成部分组成。 调用栈（Call Stack）：调用栈是 JavaScript 的一种执行机制，用于控制函数的执行顺序。当函数被调用时，将函数压入调用栈中，并开始执行函数，
阅读全文
摘要：pnpm 讲解 阿里数据中台前端团队分享前端界的好文精读——帮你筛选靠谱的内容。 pnpm 全称是 “Performant NPM”，即高性能的 npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了 “幻影依赖” 的问题，让包管理更加规范，减少潜在风险发生的可能性。 使用
阅读全文
摘要：npm的问题 npm中node_modules是嵌套的，但是包和包之间会有相互嵌套依赖的关系，这样会导致一个项目中重复安装了很多包 windows中文件路径最长260多个字节，这样嵌套如果超过windows的路径长度会导致项目都启不起来 yarn yarn 解决了重复嵌套和路径过长的问题，它将包文件
阅读全文
摘要：Git Tag 规范# Tag 需遵循 语义化版本 semver 规范 命名规则：[类型][release版本]-[stages版本] 例如： js v3.0.1 v3.0.0 v3.0.0-rc.3 v3.0.0-rc.2 v3.0.0-rc.1 v3.2.0-beta.3 v3.2.0-beta
阅读全文
摘要：现在我们要开发一个项目，我们都知道为了方便项目管理，要写一个版本号，那开发的时候初始的版本号是多少呢？是 1.0.0 还是 0.0.1 开始？ 如果一个版本号为 X.Y.Z，什么时候是 X 应该加 1，什么时候 Y 应该加 1 ，什么时候 Z 应该加 1，加 1 遵循十进制吗？比如 1.0.9 的下
阅读全文
摘要：XSS攻击（跨站脚本攻击）是一种常见的Web安全漏洞，攻击者通过注入恶意脚本代码，从而获取用户的敏感信息或者使用用户的身份进行操作，对网站和用户造成损失。 为了避免XSS攻击，可以采取如下措施： 输入过滤 对于用户输入的内容进行严格的过滤，删除或者转义HTML、JavaScript、CSS等特殊字符
阅读全文
摘要：1. 构建压缩# bash # 构建 pnpm run build # 压缩产物 tar -czvf dist.tar.gz dist/ 2. 登录并上传资源到服务# shell # 上传 静态资源。xxx替换为实际服务地址，根据实际路径定义。 scp dist.tar.gz root@xx.xxx
阅读全文
摘要：no bundle 是基于浏览器支持 es module 来实现的，浏览器会做 es module 的依赖分析，然后加载对应的模块，这样自然就不用自己做依赖分析了，只需要实现模块的编译即可。 所以，no bundle 工具会启动一个开发服务器，根据请求的模块路径来进行相应的编译，然后返回编译后的代码
阅读全文
摘要：onventional-changelog 是一款可以根据项目的commit 和 metadata信息自动生成 changelogs 和 release notes的系列工具，并且在辅助 standard-version 工具的情况下，可以自动帮你完成生成version、打tag, 生成CHANGE
阅读全文
摘要：package.json就是一个json文件，除了能够描述项目的包依赖外，允许我们使用“语义化版本规则”指明你项目依赖包的版本，让你的构建更好地与其他开发者分享，便于重复使用。 package.json package.json常用属性 package.json环境相关属性 package.json
阅读全文
摘要：Vite： 下一代前端工具 Vite(读音类似于[weɪt]，法语，快的意思) 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 虽然 2021 年 webpack 仍然是毫无争议的构建之王
阅读全文
摘要：Commonjs的缺点 模块加载器由 Node.js 提供，依赖了 Node.js 本身的功能实现，比如文件系统，如果 CommonJS 模块直接放到浏览器中是无法执行的。当然, 业界也产生了 browserify 这种打包工具来支持打包 CommonJS 模块，从而顺利在浏览器中执行，相当于社区实
阅读全文
摘要：AMD全称为Asynchronous Module Definition，即异步模块定义规范。模块根据这个规范，在浏览器环境中会被异步加载，而不会像 CommonJS 规范进行同步加载，也就不会产生同步请求导致的浏览器解析过程阻塞的问题了 // main.js define(["./print"],
阅读全文
摘要：脚手架 预置一些通用的JS文件，埋点/数据处理/HTTP封装/Utils工具/时间包/一些可以公用的组件 构建发布 资源上传cdn配置 docker的生成与上传 CI的缓存配置 内部镜像源的配置 保持风格和样式的统一 eslint 语法 pertter 编码格式的统一 stylelint hooks
阅读全文
摘要：pm-run-all npm-run-all可以轻易的串行或者并行各种脚本。https://www.npmjs.com/package/npm-run-all 使用方法： // 可以异步同时执行两个脚本 { "scripts": { "dev:esm": "run-p watch:esm serve
阅读全文
摘要：commander, yargs, and minimist 都是 JavaScript 库，用于解析命令行参数。 commander 是一个轻量级的命令行参数解析器，用于简化命令行程序的开发。它允许开发人员通过编写简单的代码来定义命令行参数和选项，并且可以生成帮助信息。 yargs 是一个功能强大
阅读全文
摘要：JS 代码压缩有哪些策略 去除换行，去除空白字符 长变量变成短变量 预计算 见terser更多策略配置 webpack中使用terser-webpack-plugin进行代码压缩 terser compress: { drop_console: true //去除打包以后代码中的console }
阅读全文
摘要：Nginx 可以通过 gzip 压缩减小传输的流量，加快网站的访问速度。下面是 Nginx 开启 gzip 的配置方法： 打开 Nginx 配置文件： 复制$ sudo nano /etc/nginx/nginx.conf 搜索 gzip 配置项： 复制# gzip types gzip on; g
阅读全文
摘要：BDD 集成测试 先写代码后做测试 TDD 单元测试 先写测试后写代码
阅读全文
摘要：方案一：使用 rsync 配置指南# bash cd /data/opt/nginx/html tar xf dist.tar.gz rsync -avr dist/PROJECT_NAME/ \rm -rf dist dist.tar.gz 示例# 历史 bash cd /data/opt/ngi
阅读全文
摘要：并行 Pipeline job 缓存依赖中间产物 -> 缓存加速 npm i -> Gitlib CI node_modules 私有仓库 开启多进程 build 多进程 限制范围 -> 增量打包 webpack5 cache npm -> yarn 为什么变快 pnpm 更快一些 rancher
阅读全文
摘要：React 的一些最佳安全实践 React.js、Vue.js 这些现代的前端框架默认已经对安全做了非常多的考虑，但是这仍然不能阻碍我们写出一些安全漏洞 。。。因为框架永远不能完全限制我们编程的灵活性，只要有一定的灵活性存在就意味着有安全风险。 下面我就带大家一起来看一下，为了保证我们 React
阅读全文
浙公网安备 33010602011771号