ES6学习记录
前言为了记录自己记得不熟或者使用的不多但是很实用的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的快，一直很好奇，虚拟DOM哪怕生成的虚拟DOM tree,最终显示还不是渲染成真实的DOM去展示吗，怎么可能比真实DOM快，所以自己用3000条数组去随机渲染改变页面，一个用原生一个用vue,最后得出的是原生的始终比vue渲染的快。
然后就去查资料，后来看到尤大在知乎的回答，醍醐灌顶。
原生 DOM 操作 VS 通过框架封装操作。这是一个性能 VS 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作，让你用更声明式的方式来描述你的目的，从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。针对任何一个 benchmark，我都可以写出比任何框架更快的手动优化，但是那有什么意义呢？在构建一个实际应用的时候，你难道为每一个地方都去做手动优化吗？出于可维护性的考虑，这显然不可能。框架给你的保证是，你在不需要手动优化的情况下，我依然可以给你提供过得去的性能。
对 React 的 Virtual DOM 的误解。React 从来没有 ...
Grid网格布局学习
前言在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-config配置
前言目前主要使用的是构建框架是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 ...
vue axios 封装
前言为了方便开发，个人封装axios
在utils目录中构架api文件夹
设置 axios.ts、status.ts
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105//axios.tsimport axios from 'axios'import { showMessage } from "./status"; // 引入状态码文件import { saveAs } from 'file-saver';//file-saver导出文件import { tansParams, blobValidate ...
vue项白屏展示动画
前言在我开发vue项目的时候，在加载一些静态资源的时候总是有白屏出现，后来就发现在加载的时候做一个预加载的动画，记录一下。代码入下
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495.first-loading-wrap { display: flex; width: 100%; height: 100vh; justify-content: center; align-items: center; flex-direction: column; } .first-loading-wrap > h1 { ...
前端数据库indexedDB
前言在以往了的浏览器认知中，前端是不怎么接触数据库的，前端的，因为前端存储方案有很多，比如cookie、sessionStorage，localStorage等等,但是其实浏览器也是有两种数据库：webSQL和indexedDb,但是浏览器使用的话一般使用indexedDB数据库，webSQL基本废弃(原因百度)，今天学习一下indexedDB。
IndexedDB简介MDN官网是这样解释Indexed DB的：
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
简单明了的说就是IndexedDB主要用来客户端存储大量数据而生的，我们都知道cookie、localStorage等存储方式都有存储大小限制。如果数据量很大，且都需要客户端存储时，那么就可以使用IndexedDB数据库。
各个存储方式对比：
归根到底，当你需要在前 ...
拖拽列表实现
前言最近在写小程序的过程中遇到一个拖拽排序菜单项的功能，搜索了一些组件，结果强差人意，所以借鉴网上的一些实现方案，去自己写一个例子，以此记录，方便以后学习使用。
确定需求 1.首先实现拖拽。 2.拖拽之后实现重新排序，且动态平滑。
思路1.首先，基于简易化，拖拽项大小是一样的，不规则的先不考虑，先爬再跑！！2.然后是既然动态平滑，肯定是是使用过渡 transition,3.实现拖拽的话，那这边就需要脱离文档流了,定位选择transform实现4.使用自定义手势, 如 touchstart, touchmove, touchend, 使用自定义手势可以方便我们控制每一个细节.5.排序的话就是通过上面 touchstart, touchmove, touchend 这三兄弟拿到触摸信息后动态计算出当前元素的排序位置,然后根据当前激活元素的排序位置去动态更换数组内其他元素的位置. 大概意思就是十个兄弟做一排, 老大起来跑到老三的位置, 老三看了看往前移了移, 老二看了看也往前移了移. 当然这是正序, 还有逆序, 比如老十跑到了老大的位置, 那么老大到老九都得顺序后移一个位置 好了这就开始吧。 ...
css提升长列表性能渲染
前言在很多网页开发的时候，都会涉及到长列表，当数据量特别多的时候，渲染会非常慢，有时候甚至会卡死，这严重影响了用户的体验。
因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者css逻辑去实现。而现在，我们多了一种方式—— content-visibility。只需要一行CSS代码，就可以实现可见网页只加载可见区域内容，使网页的渲染性能得到数倍的提升！
介绍content-visibility 是一个css属性，它控制一个元素是否呈现其内容，能让用户潜在地控制元素的呈现。用户可以使用它跳过元素的呈现(包括布局和绘制)，让页面的初始直到用户需要为止，渲染得到极大的提升。
Value
content-visibility属性有三个可选值:
visible: 默认值。对布局和呈现不会产生什么影响。
hidden: 元素跳过其内容的呈现。用户代理功能（例如，在页面中查找，按Tab键顺序导航等）不可访问已跳过的内容，也不能选择或聚焦。类似于对其内容设置了d ...
webpack学习之路（实践篇）
前言在上篇 《学习 Webpack5 之路（基础篇）》中介绍了 Webpack 是什么，为什么选择 Webpack，Webpack 的基本概念介绍 3 个问题。
本篇将从实践出发，在第一章节《基础配置》中使用 webpack 搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。
本文依赖的 webpack 版本信息如下：
webpack-cli@4.7.2
webpack@5.46.0
一、基础配置接下来一起配置一个基础的 Webpack。
将支持以下功能：
分离开发环境、生产环境配置；模块化开发；sourceMap 定位警告和错误；动态生成引入 bundle.js 的 HTML5 文件；实时编译；封装编译、打包命令。想直接看配置的同学 -> 本文源码地址：webpack Demo0
新建项目新建一个空项目：
123456// 新建 webpack-demo 文件夹mkdir webpack-demo// 进入 webpack-demo 目录cd ./webpack-demo// 初始化项 ...
