不练剑的温不胜

前言继续上级第一章的学习 类型断言 | 联合类型 | 交叉类型联合类型123456789//例如我们的手机号通常是13XXXXXXX 为数字类型 这时候产品说需要支持座机//所以我们就可以使用联合类型支持座机字符串let myPhone: number | string = '010-820'//这样写是会报错的应为我们的联合类型只有数字和字符串并没有布尔值let myPhone: number | string = true//函数使用联合类型const fn = (something:number | boolean):boolean => { return !!something} 交叉类型多种类型的集合，联合对象将具有所联合类型的所有成员 12345678910111213interface People { age: number, height： number}interface Man{ sex: string}const haleFn = (man: People ...

前言目前，JavaScript已经成为编写网页和应用程序的主要语言，前端也在一个产品中的权重越来越大，但是因为JavaScript设计之初的先天问题，导致JavaScript创建大型复杂Web应用系统很困难，也很难维护。 比如 JavaScript的数据类型是不确定的，可以进行隐式转换，导致很多错误在运行的时候才能发现，这就需要开发使用更多的精力去检查代码； 而TypeScript能解决这些问题，甚至他是JS的超集，JS有的我都有，JS没有的我也有，总之我是前端版西厂对东厂。 起步安装12npm install typescript -g tsc -v 以上为安装和查看安装的版本 我们创建一个ts文件，然后使用 tsc [文件名] 就可以执行生成一个解析的js文件当我们需要配置ts我们可以执行tsc -init去创建 tsconfig.json 文件例如我们取消严格模式的时候可以在该文件中修改strict:false 为了方便我们学习我们需要借用一些工具全局安装 ts 的编译工具，使用 ts-node 可以将 ts 文件执行 npm i ts-node -g 使用：ts-nod ...

前言为了方便自己开发做的总结 总结插槽slot匿名插槽 12345678910<!-- 子组件 --><template> <div><slot></slot></div></template><!-- 父使用组件 --> <Dialog> <template v-slot> <div>2132</div> </template></Dialog 具名插槽具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中 12345678910111213141516171819<!-- 子组件 --><div> <slot name="header"></slot> <slot></slot> <slot ...

当执行 npm run dev命令的时候，会去项目的package.json文件对象的scripts对象中去寻找，然后执行对应的命令，比如我们使用vite去构建vue项目。配置文件 12345"scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview" } 如上，找到dev后,会去执行vite 命令,但是如果我们直接执行 vite,那么就会报错，所以就可以得到执行vite的时候这边项目做了配置。 其实在执行的时候，这边会在本地的node_modules文件中去寻找vite去执行,如果没有就会去 npm install -g（全局包）中去寻找，如果这里面有，也可以去执行，如果这里也没有，那么就去直接去系统的环境变量中去寻找，但是一般你没配置就没有了，然后就报错，这就是这边执行的全部过 ...

前言前后端分离前端需要数据可以使用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 ...