TypeScript类型体操
TypeScript是一个带有类型的JavaScript
明确了类型以后，那自然可以想到类型和所做的操作要匹配才行，这就是为什么要做类型检查，如果能保证对某种类型只做该类型允许的操作，这就叫做类型安全，所以类型检查是为了保证类型安全的。
类型检查可以在运行时做，也可以运行之前的编译期做。这是两种不同的类型，前者叫做动态类型检查，后者叫做静态类型检查。
动态类型检查 在源码中不保留类型信息，对某个变量赋什么值、做什么操作都是允许的，写代码很灵活。只有代码运行时才会出现报错，具有很大的安全隐患
静态类型检查则是在源码中保留类型信息，声明变量要指定类型，对变量做的操作要和类型匹配，会有专门的编译器在编译期间做检查。
动态类型只适合简单的场景，对于大项目却不太合适，因为代码中可能藏着的隐患太多了
静态类型虽然会增加写代码的成本，但是却能更好的保证代码的健壮性，减少 Bug 率
大型项目注定会用静态类型语言开发。
JavaScript 是一门动态类型语言，TypeScript 是一门静态类型语言
为什么 TypeScript 类型编程被...
TS内置的高级和工具类型Parameters 获取函数参数类型
获取函数参数类型
1234567const func = (name: string):number => { return 0;}type funcParam = Parameters<typeof func>; // type funcParam = [name: string]
底层原理：
1234567891011121314```## ReturnType 获取函数返回值类型> 获取函数返回值类型``` typescriptconst func = (name: string):number => { return 0;}type funcParam = ReturnType<typeof func>; // type funcParam = number ...
XSS攻击——跨站脚本攻击
存储型XSS攻击
将脚本通过评论区或帖子等形式，注入到原网站服务器，当其它用户获取该帖子或者评论时，就会从服务器中拿到该病毒脚本，如果是该脚本是打开攻击者的网站，那攻击者就能拿到用户的登录凭证等信息。
反射型XSS攻击
利用原网站对js的自动处理，比如使用url上的资源路径渲染，或者document.write()执行的一些操作
Dom型XSS攻击
黑客通过各种手段将恶意脚本注入用户的页面中，比如通过网络劫持在页面传输过程中修改 HTML 页面的内容，这种劫持类型很多，有通过 WiFi 路由器劫持的，有通过本地恶意软件来劫持的，它们的共同点是在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据
解决方法：
对代码进行过滤、转义
cookie使用 httpOnly 禁止js获取cookie
使用CSP设置请求头或者meta标签
CSRF攻击——跨站请求伪造
CSRF 英文全称是 Cross-site request forgery，所以又称为“跨站请求伪造”，是指黑客引诱用户打开黑客的网站，在黑客的网站中，...
npm安装依赖过程查找npm配置信息首先检查根目录下的.npmrc文件，如果没有再检查全局的.npmrc文件，最后检查npm的默认配置信息。
构建依赖树
首先查找package-lock.json文件，如果有就直接使用它的依赖树
如果没有则递归查找每个依赖需要的依赖
2.x 是全部循环遍历递归下载所有依赖，可能会出现node_modules 黑洞现象
3.x 是进行扁平化处理，碰到新的依赖会尝试放到第一层，如果后续碰到版本不一的依赖，则下载到相应的依赖下，问题是：不同的依赖遍历顺序会出现不一样的依赖安装结果
5.x 新增了 package-lock.json 锁文件
根据依赖树到缓存或者远程仓库去下载依赖资源过程中会有完整性校验
生成 packge-lock.json 文件npm的缓存机制在用户本地会有缓存
index-v5
content-v2
content-v2 文件是用来存在缓存包的具体内容，index-v5 是用来存储依赖包的索引，根据 index-v5 中的索引去 content-v2 中查找具体的源文件 。
npm 在安装依赖的过程中，...
Vite简单易上手vite内部集成了许多插件，不需要像webpack那样进行繁琐的配置，对新手开发者比较友好
no-bundleVite 是一个提倡 no-bundle 的构建工具，相比于传统的 Webpack，能做到开发时的模块按需编译，而不用先打包完再加载。
需要注意的是，我们所说的模块代码其实分为两部分，一部分是源代码，也就是业务代码，另一部分是第三方依赖的代码，即node_modules中的代码。所谓的no-bundle只是对于源代码而言，对于第三方依赖而言，Vite 还是选择 bundle(打包)，并且使用速度极快的打包器 Esbuild 来完成这一过程，达到秒级的依赖编译速度。
预构建预构建的作用是解决vite基于esm下，第三方依赖采用的不是no-bundle模式，为啥？因为层级过深，哪怕是简单的使用了一个函数，也会导致import大量的文件，形成过多的网络请求，由于 谷歌浏览器对http并发请求数量的限制，导致浏览器会阻塞，导致页面加载非常缓慢。
总之，依赖预构建主要做了两件事情：
将其他格式(如 UMD 和 CommonJS)的产物转换为 ESM 格式，使其在...
webpack入门前言 如果你想要编写一个hello world 的网页，那很简单，只需要创建一个文本文件，写下html的内容就能在网页打开，如果你还想给hello world加上颜色，那只需要写一个css文件即可，如果你还想加一个弹窗提示，引入一个js就能解决。但是开发一个完整的项目往往还需要
css 预处理器，scss / less / tailwindcss 等等
框架， vue / react
兼容性处理, babel
热更新
代码合并、代码压缩
….
如果说这些都需要导入相关的库去解决，那有没有更好的办法去统一管理和配置他们呢？webpack就能解决这些问题，接下来让我们简单用一下webpack吧
编写文件现在我们想实现一个简单的网页如下，包括html、css 和 js：
代码合并打包这时候我们又在index.js里面引入了其它的js文件，在浏览器打开的时候，它会并发加载这些js文件。大量的网络io操作会导致页面不流畅，这时候我们需要webpack来将js文件合并。
热更新（开发服务器）当我们打开webpack为我们处理后的ind...
团队协作规范注释
代码的注释不是越详细越好。实际上好的代码本身就是注释，我们要尽量规范和美化自己的代码来减少不必要的注释。若编程语言足够有表达力，就不需要注释，尽量通过代码来阐述。——《Clean Code》
命名方法
小驼峰命名法（lowerCamelCase） ：第一个单词以小写字母开始，第二个单词的首字母大写，例如：firstName、lastName。
大驼峰命名法（CamelCase） ：每一个单词的首字母都采用大写字母，例如：FirstName、LastName。
匈牙利命名法（HN case） ：基本原则为：变量名 = 属性 + 类型 + 对象描述。
下划线命名法（snake_case）：下划线命名法也叫蛇形法，全由小写字母和下划线组成，在两个单词之间用下滑线连接。例如：first_name。
中划线命名法（kebab-case）：中划线命名法也叫串式命名法，各个单词之间通过下划线“-”连接。例如：first-name。
文件资源命名通常使用中划线命名法（kebab-case）
JS 中的变量通常使用小驼峰方式（lowerCamelCase）
TS 中...
样式方案传统的CSS书写存在许多弊端，如下：
开发体验欠佳，样式不允许嵌套，传统的后代选择器等等比较繁琐
样式污染问题，需要严格考虑选择器命名和权重，避免样式污染和覆盖
浏览器兼容性问题，需要手动加上-moz-、-webkit、-ms-、-o-等
打包后的代码体积问题
为了解决这些弊端，社区中诞生了不少方案，常见的有五类：
css预处理器，如scss、less、和Stylus。这些方案都有自己的一套语法，让CSS允许使用嵌套规则、变量、函数、条件判断、循环等等，大大的增强了样式的灵活性。
css modules，能够将CSS类名处理成哈希值，这样就可以避免同名的情况下的样式污染。如在vite中配置的:
1234567891011121314// index.css -> index.module.csscss: { modules: { // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义 // 其中，name 表示当前文件名，local 表示类名 generateScop...