不练剑的温不胜

前言前后端分离前端需要数据可以使用Mock,更加方便，故学习vite-plugin-mock 开始 注意:当前是3.0.0版本，目前发现修改mock文件会生成很多个xxx.mjs文件,控制台不停报错，issue,关注是否已经解决 安装 (yarn or npm)12345yarn add mockjs# ornpm i mockjs -S# orpnpm add mockjs and 12345yarn add vite-plugin-mock -D# ornpm i vite-plugin-mock -D# orpnpm add vite-plugin-mock -D 开发环境使用开发环境是使用 Connect 中间件实现的。与生产环境不同，您可以在 Google Chrome 控制台中查看网络请求记录 123456789101112131415//vite.config.ts 配置import { UserConfigExport, ConfigEnv } from 'vite'import vue from '@vitej ...

前言最近一直使用vite去开发vue,故需要记录一些基本配置 resolve.alias这是我最常用的的功能，因为写全相对路径太繁琐，就给常用的路径使用别名 1234567891011// vite.config.jsimport { defineConfig } from 'vite'import path from 'path'export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') // 路径别名 } }}) 我们也可以使用插件，来自动给 src 和 src 下所有的文件夹定义路径别名： 12345678910111213141516171819// vite.config.jsimport { defineConfig } from 'vite&# ...

前言先来聊聊单线程的Javascript 众所周知，js最初设计是运行在浏览器中的，为了防止多个线程同时操作DOM，带来渲染冲突问题，所以js执行器被设计成单线程。但随着前端技术的发展，js能力远不止如此，当我们遇到需要大量计算的场景时（比如图像处理、视频解码等），js线程往往会被长时间阻塞，甚至造成页面卡顿，影响用户体验。为了解决单线程带来的这一弊端，Web Worker 应运而生。 Web WorkerWeb Worker 是什么Web Worker 是 HTML5 标准的一部分，这一规范定义了一套 API，允许我们在 js 主线程之外开辟新的 Worker 线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力。因为是独立的线程，Worker 线程与 js 主线程能够同时运行，互不阻塞。所以，在我们有大量运算任务时，可以把运算任务交给 Worker 线程去处理，当 Worker 线程计算完成，再把结果返回给 js 主线程。这样，js 主线程只用专注处理业务逻辑，不用耗费过多时间去处理大量复杂计算，从而减少了阻塞时间，也提高了运行效率，页面流畅度和用户体验自 ...

vue2vue3Vue3内置的构建工具是Vite,vite的优势： 冷服务 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入 HMR 速度快到惊人的 模块热更新（HMR） Rollup打包 它使用 Rollup 打包你的代码，并且它是预配置的 并且支持大部分rollup插件 vite构建1234# npmnpm init vite@latest# yarnyarn create vite vue直接构建这个配置比yarn配置会更详细一点 1npm init vue@latest vite.config.js基本配置123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384import { defineConfig } from "vite& ...

前言对于前端来说，event loop 是一个非常重要的知识点，因为这涉及到代码的执行顺序，如果不了解或者了解的不够，那么逻辑就可能出现纰漏。 event loop 的由来js是单线程的，如果某段程序需要等待一会再执行，后面的程序都会被阻塞，这样也就带来了一些问题。为了解决这个问题，js出现了同步和异步两种任务，两种任务的差异就在于执行的优先级不同。event loop就是对任务的执行顺序做了详细的规范 堆、栈、队列在真正了解event loop 之前我们需要了解堆、栈、队列： 堆（Heap）堆是一种数据结构，是利用完全二叉树维护的一组数据，堆分为两种，一种为最大堆，一种为最小堆节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。堆是线性数据结构，相当于一维数组，有唯一后继。 栈（Stack）栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。 栈是一种数据结构，它按照**后进先出(LIFO)**的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据。栈是只能在某一端插入和删除的特殊线性表。 队列（Queue）特殊之处在于它只允 ...

虚拟DOM虚拟DOM就是通过JS去生成一个AST抽象语法节点树。AST是使用非常广泛，比如TS转测成JS的时候他也会进行AST转换，还有我们常用的babel插件，用于es6转换es5，也是通过AST进行转换，甚至我们的js通过v8引擎去转换字解码的时候也用到了AST 为什么要使用虚拟DOM在和原生DOM选择中，这在之前的学习尤大的知乎回答的时候就已经有过回答，这是一个性能 VS 可维护性的取舍。首先没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。首先，看下面的例子 123456789let div = document.createElement('div')let str = ''for (const key in div) { str += key + ''}console.log(str)//aligntitlelangtranslatedirhiddenaccessKeydraggablespellchec ...

前言为了更方便理解最长递增子序列。所以学习并总结的博客 最长递增子序列原博客地址 一下是个人总结和觉得重要的知识点 子序列：不一定是连续的 字串：一定是连续的 假设一个数组 nums，dp[i] 表示以 nums[i] 这个数结尾的最长递增子序列的长度。 12let nums=[1,4,3,4,2]//db[3]=3;db[4]=2 这个 GIF 展示了算法演进的过程： 根据这个定义，我们的最终结果（子序列的最大长度）应该是 dp 数组中的最大值。 12345int res = 0;for (int i = 0; i < dp.length; i++) { res = Math.max(res, dp[i]);}return res; 那么如何归纳呢 假设我们已经知道了 dp[0..4] 的所有结果，我们如何通过这些已知结果推出 dp[5] 呢? 123let nums=[1,4,3,4,2,3]//db=[1,2,2,3,2] 已知//db[5]=3? nums[5] = 3，既然是递增子序列，我们只要找到前面那些结尾比 3 小的子序列， ...

前言在我日常开发过程总，会编写诸如排序、搜索、查找唯一值、传递参数、交换值等等功能，一些实用和便捷的方法做一个记录 1.找出数组总和、最小值和最大值利用reduce方法实现 1234const array = [5,4,7,8,9,2];array.reduce((a,b) => a+b);//和 35array.reduce((a,b) => a>b?a:b);//最大 9array.reduce((a,b) => a<b?a:b);//最小 2 2.从数组中过滤出虚假值Falsy值喜欢0，undefined，null，false，””，’’可以很容易地通过以下方法省略 123const array = [3, 0, 6, 7, '', false];array.filter(Boolean);// 输出(3) [3, 6, 7] 3.删除重复值1234const array = [5,4,7,8,9,2,7,5];const nonUnique =[... new Set(array)]// orarray.filter(( ...

前言自己安装系统，防止忘记网址和方法，记录和方便他人学习 安装方式 微软官方ISO镜像文件直接写入好处：纯净、方便、简单缺点：功能少且很僵硬 PE便携式操作系统辅助安装写入 为什么上面说第一种安装方式僵硬：装系统本质就是运行提前在U盘中放好的windows安装包，目前U盘有三种格式化方式：FAT32、exFAT、NTFS。后面两种格式非常挑主板，很多老主板和旧电脑无法识别所以也没办法装系统，而FAT32兼容性非常好，几乎所有的设备都可以识别使用，但这种格式的U盘单个分区不能超过32G，另外不能存放单个体积大于4G的文件。所以用FAT32的话U盘本身的格式就非常僵硬了，但是你用exFAT或者NTFS，那么兼容性又僵硬了。 因此衍生了PE便携式操作系统辅助安装的方法，PE功能全且兼容性极广，当然安装方式还是看个人喜好 。 下面就开始讲如何安装，在安装之前首先要准备两样东西： 容量最少为8G的U盘(建议去旗舰店买新的正规的一线U盘,比如三星、金士顿或者闪迪) 准备一个可以正常操作的WIN系统（不能选择苹果系统）的电脑，方便往U盘中写入安装系统 微软官方ISO镜像文件下面是安装步骤： ...

包管理在学习的过程中，如果发现npm很慢，可以使用nrm 管理包源 123456# 选择较低的版本安装（指定版本安装依赖）因为有版本高会报错$ npm install -g nrm@1.1.0# 确认已选择的镜像$ nrm ls# 使用taobao镜像或者cnpm$ nrm use cnpm 当然在学习小满的ts的视频的时候发现了他写的包源管理，当然安利一波 123456# 选择较低的版本安装（指定版本安装依赖）因为有版本高会报错$ npm install xmzs -g# 查看已选择的镜像$ mmp ls# 使用taobao镜$ mmp use cnpm 了解 npm、cnpm、yarn、pnpmnpmnpm 是 Node.js 自带的包管理器，平时通过 npm install 命令来安装各种 npm 包（比如：npm install vue-router ），就是通过这个包管理器来安装的。关于 npm 包下载镜像源的设置： 123456# 查看下载源npm config get registry# 绑定下载源npm config set registry https://reg ...