qq_34306228的博客

代码中创建 .github/workflows/deploy.yaml， .github/workflows/test.yaml文件，上传到github后，系统会自动触发部署，从而自动增加 gh-pages 分支，分支下相对应的文件 和 本地执行“pnpm run build”生成的 build/dist 文件下的内容一致。需要对权限进行授权，对仓库的读，写权限，创建文件权限等设置，对仓库进行授权后，才能对当前仓库进行干预，有些工作流会去写些目录到当前工作当中，不会让其他人擅自对仓库内容篡改。

提示：自动化测试：写基础包的一定要进行自动化测试，为了让使用者使用的更放心，使用开源包也是看是否有自动化测试，还要看测试覆盖范围是否是比较齐全的，小厂的话不太关注，中大厂的话使用第三方的包是非常关注自动化测试的。

一般上半年行情比下半年行情好，这几年没有前几年行情好，一面的面试官很可能是你的同事，面试的时候不要有情绪，一上来就给hard难度，是不想要你，但是一开始是简单的，后来给hard难度的，证明面试官看好你。可以理解为搞翻译的，webpack不认识的语言，都可以编写对应的loader帮助webpack翻译成AST的，通过AST做各种各样的转换。追踪：发布流程的追踪，用户的追踪。持续的改进和迭代：不是一成不变的，是不停的根据开发的情况，系统整体的变更情况，生产环境的情况等不断变化。

在工程当中，打印当前工程版本号//控制台打印当前工程版本号return {},console.log('当前工程版本号:1.0.0')},${import path from 'path' import fs from 'fs' //控制台打印当前工程版本号 export default function myVitePlugin() {console . log('当前工程版本号:1.0.0') } , transform(code , id) {

前端工程化 = 前端 + 软件工程软件工程：系统和软件工程层面上的方法、规范，技术手段提升开发的效率，软件工程来自于实体行业类似建筑行业的方法论，将建筑行业的方法论运用到软件领域上，软件领域的相关方法论又延伸到前端上前端工程化 = 将工程化的方法系统化应用到前端开发中Clean Code 代码整洁指导基于业务诉求 => 产出架构设计 又快又好又稳 <= 系统 演进 可量化的方法。

从if (isDef(data) && isPatchable(vnode)) 这句开始就比较重要了。第二，不需要那么多的属性attribute，只针对当前所希望获取到的那部分属性去消费就好了。因此这里通过 虚拟对象(虚拟VDOM) 来进行判断，判断到底该用什么，怎么用它。前面所作的事情：将oldNode节点上的事件全都挂载到新的上处理。这个过程才是真正的双端比较，双端比较的过程就是所谓的。第三步，如果以上情况都没匹配到，就只能是纯找了。老新：头头，尾尾，头尾，尾头的情况。也是当前的子节点进行双端比较。

vue的创建入口src/vnode.ts.tsvnode处理src/renderer.ts进行一系列 ast 的动作，然后交由给patch，进行diff比较，针对diff处理完成后，最后将其转化为dom，dom是交由runtime-dom去做的runtime-dom根据vnode节点，其实是要转换成dom结构的，根据 ast 和 vnode节点 来区分 web 和 weex的节点，创建好vnode后，拿着这个节点把他转换成真实能够消费的属性调用到原生的API去进行dom维度的操作

所有的点文件夹都是或中的内容完整的编译的核心，packages/compiler-core这三点是现在作为主流开发方式都是基于ts去做的types是作为ts的入口module是作为ECMAScript module(esModule)，正常通过 import xxx from xxx，引用的就是这个路径main 默认引用这个包的时候，作为UMD的方式去引用最后引用的路径npm上@vue/compiler-core包这个就是在 package.json 中就算是，怎样去具体约束 exports导出

compiler - 编译器将一种代码，转换为另外一种代码输入代码，也可以叫 源代码目标代码(浏览器识别代码)：js / cssts / vue / jsx / tsx / coffeescript(JS基础上，JS超集) -> jseslint / tslint 语法检查首先要先将源代码变成可识别的代码对浏览器无法识别的代码，进行转换 -> es5很多支持 es6，但是不会转 es6，因为es5更安全，具备更大的兼容性。

runtime和compiler区分：runtime，vue本身真正能够运行的部分，compiler，将vue2的模板语言写法，转化成vue能够直接识别的语法。vue-cli 引用的项目中，在 webpack配置里，引入了 vue-loader，就会把vue模板给做这件事，vue本身是不会做这件事的。vue2.6之后的版本都做的是兼容Vue3的内容，2.6版本前的内容才是纯vue2的内容，这里看的V2.6.14版本代码。使用函数去做的话，就可以通过 Vue的原型Vue.prototype给他去注入，

APP 渲染页面的结构，form表单Layout 布局，整体页面，html是在这里绘制的ErrorBoundary 目前还没用上这里 Route的根路径，算是最新版本的特性，指代当前 router的类型，这里的 ./+types/root 使用的是 tsconfig.json中的 rootDirs[1]的值，完整是 .react-router/types/app/+types 这个路径用的就是这个文件......是前端应用中常见的绘制的部分url";

通过一个参数，parentId 传递给下面的child，他们之间有一个关联的脐带：contextId，找到roots之间的关联方式。scrollIntoView，打开某个页面后，翻到某个位置，重新刷新后，还能够定位到上次翻到的那个位置上，实现锚点效果。有限状态自动机：各种各样的状态管理，通过事件触发一个行为，行为是固定的，相同的输入指向相同的输出，类似于纯函数。ref 不会重新渲染，与视图无关的时候使用，如果与视图相关的使用ref，则不会达到想要的效果。不会更新重新渲染，一般是在与视图更新无关的时候使用。

类似：这种形式的就叫做自定义hook自定义hook中使用reactive中已有的hook本质上是：用已有的hooks做相同某种功能的聚合，聚合后能够在其他某个地方取消费}, []);保证代码是相对独立的}, [])return pos// 用法</div></div>

react官网团队中选型时候，如果没有历史包的话，就选择最新的react，如果有历史包的话，选择不影响历史包升级的版本但是最新的也容易踩到坑在React19中，主要看新特性和带来的提升即可新特性：form类似于这里的use可以理解为，添加响应式的逻辑性能上的提升：ref可以作为props，平常项目中使用的是improveAPI去关联，而无法用props来关联。

在pages下 —> Build and deployment =>这里就是部署我们的 github pages的，比如说，在github下注册了“xxx”仓库，针对于这个仓库，能够在站点的网址上有“xxx.github.io”这样的内容，就是通过这里Build and deployment，部署的话，就可以选择刚刚代码中部署的分支，然后选择根目录，把我们这样的静态资源（gh-pages分支上打包的产物）部署到 xxx.github.io上。因此，一般要么是放在同一的目录下，要么是在hooks下创建。

hash和history的区别点并不多，开始是对base进行处理，后面都直接调用用webhistory，对事件的监听，事件方法的处理进行了统一，只是对路径做了区别。现在：访问一个url，也都会向服务器拉一个页面回来，但是由于spa工程，服务器返回的都会在nginx层进行一个转发，都转发到根目录了。有这么一种情况，针对不同id的用户，路由的前面路径是同样的，但是后面会针对不同人的id从而路径是不同的，这里会有一个问题，让首屏加载的资源越少，节点更少，组件异步，则首屏渲染的更快，加载的更快。

平常npm run serve，npm run dev就是执行的是 vue-cli-service serve 和 vue-cli-service dev，最终真正执行的是 node bin/vue-cli-service.js run serve，本质上也就是Commander。下面的这个就是通过vue-cli创建的默认的模板，里面有标识符，就是ejs模板化语言，在开发中称之为生成模板的过程，使用的就是ejs(嵌入式的js)还是先看cli-service的package.json找到bin的入口文件。

cli：commander+inquirer commander：cmd输入命令，inquirer：交互式选择器 通过问答的方式获取的是 options 然后去消费options，添加代码模板。上述的vue --version输出的是vue-cli版本而不是vue的版本的原因是什么呢？这里的pkg和刚刚创建的test的项目中的package.json的内容是对应着的。看一个脚手架，先看脚手架的入口文件(bin的vue)这段代码使用的是lib下的create的指令。

hooks最重要的特点：对于我们来说，不需要关心内部的逻辑，而且与Vue2相比，提供了一个非常合理的方式，使用Vue2的option API很容易写出三五千行的代码，但是对于函数式编程来说，按照逻辑功能拆分下来，一个文件至少包含一个功能，其他功能引用即可。

mixin：混用，具有合并的功能Vue2的vue.config.js中具有一个合并策略的，optionMergeStrategieshttps://github.com/vuejs/vue/blob/main/src/core/util/options.ts针对options定义一个值，有值的时候使用，没有值的时候是不使用的，后面的watch,props,methods都是基于最开始的值获取到的，在此基础上进行注入的Vue3中的已经不使用mixin了，这个方法对平常开发中不好维护，如果要注入的

webpack：cross-env能够声明不同的环境，dev，prod，test 能够通过dev注入到process.env.NODE_ENV。cross-env 能够注入到全局环境下，在window，linux，mac不同环境下都能使用cross-env做好兼容，只是用于注入变量。当src/server，webpack，babel.config.ts这几个发生变化的时候，才会去解析这个包。当我们的组件发生变化时，只要在外面包裹ErrorBoundary，就能避免页面报错，展示的是兜底错误的提示。

当页面首次加载时候，spa只会返回空节点，内容都是空的，而ssr会将页面的骨架，内容等提前加载出来，提高效率。spa首屏加载很慢。SSR:利于首屏加载CSR:(spa)不利于首屏加载，页面结构为空节点本次项目可以执行在浏览器，也可以执行在客户端中。

d.ts是所有类型的集合，全称是：declaration type 都是通过 @types/react去管理的。针对不同场景下参数的兼容，参数不同，则场景不同，考虑到的情况也不一样。以上两种写法，一般都用第一种写法，比较规范，考虑到代码扩展性等。引入的是文件的类型，导出的时候也是按照文件模块/类型引用。关于ts配置项，tsconfig.json。再 tsconfig includes注入。@types是约定俗成的。全局模块，是全局直接用。

在JavaScript中，o?这个操作符用于在访问对象属性时进行安全的操作，即使对象的某个属性不存在或者为null或undefined，也不会导致运行时错误。.a表示如果对象o存在且具有属性a，则返回o.a的值；如果对象o不存在或者属性a不存在，则返回undefined，而不会抛出错误。一方面，css in js 相对不好处理，但是有对应的方案， 而且比较符合正常开发者定义组件，维护对应的内容。这种语法的引入使得代码更加简洁并且更安全，特别是在处理深层嵌套的对象属性时。看具体原理，内部具体是怎么做的。

标记清除（Mark-Sweep），目前在 JavaScript引擎 里这种算法是最常用的，到目前为止的大多数浏览器的 JavaScript引擎 都在采用标记清除算法，各大浏览器厂商还对此算法进行了优化加工，且不同浏览器的 JavaScript引擎 在运行垃圾回收的频率上有所差异。标记清除算法有一个很大的缺点，就是在清除之后，剩余的对象内存位置是不变的，也会导致空闲内存空间是不连续的，出现了 内存碎片（如下图），并且由于剩余空闲内存不是一整块，它是由不同大小内存组成的内存列表。

CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案；AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅；CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行；

因为 new 的结果是一个新对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫 obj，因为 obj 会具有 Person 构造函数里的属性，我们可以使用 Person.apply(obj, arguments)来给 obj 添加新的属性。当传递 value 到函数 foo 中，相当于拷贝了一份 value，假设拷贝的这份叫 _value，函数中修改的都是 _value 的值，而不会影响原来的 value 值。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

结合着之前讲的变量对象和执行上下文栈，我们来总结一下函数执行上下文中作用域链和变量对象的创建过程checkscope 函数被创建，保存作用域链到 内部属性[[scope]]执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链。

JavaScript采用静态作用域，于是执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上面一层的代码，也就是 value 等于 1，所以结果会打印 1。如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。但是使用var表达式定义函数add1，只有变量声明提前了，变量初始化代码仍然在原来的位置，没法提前执行。用函数语句创建的函数add2，函数名称和函数体均被提前，在声明它之前就使用它。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。// 页面窗口改变 / 视窗大小改变时。// 1. 做纵向的可见判断。// 3. 防止图片重复加载。// 加载需要懒加载的图片。// 判断图片是否可见。// 横纵方向改变时。

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链。继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript中大多是借助原型对象实现继承的特性。男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响。正常的原型链都会终止于 Object 的原型对象，Object 原型的原型是 null。//女人 构造函数 继承 想要继承 Person。

所有的数据和方法都被封装在对象内，由开发者自己选择性的去公开哪些属性和方法，对于创建的实例来说他能访问的只能是这些公开的属性和方法，而对于其他对象来说是无权访问此类或者进行更改，封装这一特性为程序提供了更高的安全性。对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。所以，我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有。

逻辑与操作符是一种短路操作符，意思就是如果第一个操作数决定了结果，那么永远不会对第二个操作数求值。对逻辑与操作符来说，如果第一个操作数是 false，那么无论第二个操作数是什么值，结果也不可能等于 true。，只有当两个操作数的数据类型和值都相等时，才会返回true。一元减由一个减号（-）表示，放在变量前头，主要用于把数值变成负值，如把 1 转换为-1。其中一个操作数是NaN，相等运算符会返回false，不相等运算符会返回true。，只有两个操作数在不进行类型转化的情况下是不相等的，才会返回true。

var name="张三",age=18,sex="男";

页面有很多的图片，在发送请求访问HTML，也可能包含其他的资源、所以我们每一次请求都要建立一次TCP的链接和断开增加了通信量的开销。表示服务器接收的请求已经成功处理，但是返回的响应报文中不包含实体的主体部分，而且不返回任务实体的主体。表示对请求资源的访问被服务器拒绝了。服务器接收到附带的条件的请求后，只有判断指定条件为真，才会执行请求。目的: 保护客户端的安全，防止不受信任的网站利用用户的浏览器向其他网站发送恶意请求。实体标记(ETag) 值和请求资源的ETag的值不一致的时候，告诉服务器处理请求。

搭建 HTTP 服务，响应一个 4 行 3 列的表格，并且要求表格有隔行换色效果，且点击单元格能高亮显示。浏览器打开form表单，输入账户密码，点击提交。按照以下要求搭建 HTTP 服务。提交之后页面跳转链接。

IP 也称为 「IP 地址」，本身是一个数字标识。例如 192.168.1.3ip本身是一个32Bit的二进制数字，例如，11000000101010000000000100000011但是为了标识，将每8个分为一组，转成十进制数字，并每组加上“.”来组合类型说明本机回环IP地址局域网IP (私网 IP)广域网 IP (公网 IP)除上述之外端口：应用程序的数字标识一台现代计算机有65536个端口（0~65535）一个应用程序可以使用一个或多个端口。

HTTP（hypertext transport protocol）协议；在浏览器输入百度网址，并按下回车，fiddler出现的是按下回车之后的所有请求。然后为了更好的监听浏览器请求，将所有进程选择浏览器进程。需求：删除其中一个文件，序号中断，需要后续的序号顺连。JSON格式的数据或者是GET参数形式的数据等方式。不懂的也可在mdn上查到（与请求头查询链接一致）__filename 文件的绝对路径。协议：双方必须共同遵从的一组约定。key：value的格式。重新启动fiddler。百度的响应体是HTML。

在 Node.js 中，我们可以使用 rename 或 renameSync 来移动或重命名 文件或文件夹。在 Node.js 中，我们可以使用 readdir 或 readdirSync 来读取文件夹。在 Node.js 中，我们可以使用 stat 或 statSync 来查看资源的详细信息。在 Node.js 中，我们可以使用 rmdir 或 rmdirSync 来删除文件夹。在 Node.js 中，我们可以使用。

同步处理 JavaScript 主线程 会等待 其他线程的执行结果，然后再继续执行主线程的代码，效率较低。异步处理 JavaScript 主线程 不会等待 其他线程的执行结果，直接执行后续的主线程代码，效率较好。文件复制：复制【资料】文件夹下的【动画1.gif】到 【复制文件】文件夹下一份。注意的是，实质上读取速度是比写入速度要快的，所以一般是读取几块才会写一块。因为第一种是一次性将文件读取到内存，然后再执行之后的工作。第二种是读一块到内存，然后再写一块到文件中。流式读取：分块读取（分块加载到内存）