不练剑的温不胜

前言对于前端来说，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 ...

前言为了记录自己记得不熟或者使用的不多但是很实用的ES6的基础逻辑，纯记录和自我学习 字符串扩充标签模板在ES6中引入的模板字符串的概念，很好用，只需要使用灵活的使用 `` 和 ${} 就能很好的实现之前很繁琐的功能，但是在使用过程中，忽然发现了标签模板-就是指模板字符串跟在函数名后面，那么这个函数就会调用来处理这个模板字符串。 123alert`hello`// 等同于alert(['hello']) 这就成了函数后面跟着的模板字符串成了参数，函数就会处理这些参数，但是如果有变量的话就不一样了如下： 123456let a = 5;let b = 10;//tag 是一个函数tag`Hello ${ a + b } world ${ a * b }`;// 等同于tag(['Hello ', ' world ', ''], 15, 50); 字符串成了被解析的数组，而变量成了后面的参数，标签模板的一个重要功能就是过滤HTML字符串，防止恶意输入，还有就是多语言转 ...

前言最近总是有人说虚拟DOM性能比真实DOM的快，一直很好奇，虚拟DOM哪怕生成的虚拟DOM tree,最终显示还不是渲染成真实的DOM去展示吗，怎么可能比真实DOM快，所以自己用3000条数组去随机渲染改变页面，一个用原生一个用vue,最后得出的是原生的始终比vue渲染的快。 然后就去查资料，后来看到尤大在知乎的回答，醍醐灌顶。 原生 DOM 操作 VS 通过框架封装操作。这是一个性能 VS 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作，让你用更声明式的方式来描述你的目的，从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。针对任何一个 benchmark，我都可以写出比任何框架更快的手动优化，但是那有什么意义呢？在构建一个实际应用的时候，你难道为每一个地方都去做手动优化吗？出于可维护性的考虑，这显然不可能。框架给你的保证是，你在不需要手动优化的情况下，我依然可以给你提供过得去的性能。 对 React 的 Virtual DOM 的误解。React 从来没有 ...

前言在CSS开发过程中，我使用过表格布局、浮动布局和弹性布局flex,很多人都说目前最强的布局方案是Grid布局，自己之前也接触过，但是大部分还是使用flex,故需要总结记录一下Grid,方便以后学会和使用。 什么是Grid布局Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。 和flex布局的区别Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。 基本概念容器和项目采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item） 12345<div> <div><p>1</p></div> <div><p>2</p></div> & ...

前言目前主要使用的是构建框架是vite,因此记录一下配置项。 一、使用 vite 创建的项目里默认的配置使用 vite 创建项目完成后会自动生成 一个 vite.config.js 文件，当然你可以将其名重定义为 vite.config.ts 文件。其默认代码如下： 12345import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins: [vue()],}) 当以命令方式运行 vite 时，vite 会自动解析项目根目录下 vite.config.js 的文件。配置不全时，在开发环境下运行都是正常的，但是打包上线的时候就会出现各种问题。如： 假设不配置 base 时，打包之后，访问时出现白屏。 alias 不配置的时候，每次引入文件需要找根目录，比较麻烦。 以下是 vite.config.js 的更多常用参数配置以及意义： 12345678910 ...