棋丶-优快云博客

原创 HTTP协议和WebSocket协议

传统的HTTP协议是单向通信的，客户端若想要与服务器进行通信，首先需要通过三次握手与服务器建立TCP连接，然后再向服务器发送数据请求，当客户端收到服务器响应回来的数据后，就会断开TCP连接，每次数据请求都需要建立一次TCP连接。而WebSocket协议是持久性的连接，只需要建立一次TCP连接，双端可以一直发送请求给对方，除非有一方主动提出断开连接，而且WebSocket协议支持双向实时数据传输，不但客户端可以向服务器端发送数据，服务端也能够主动发送数据交给客户端。

2025-01-08 23:04:37 213

原创 Webpack和Vite的区别

webpack默认是将所有模块都统一打包成一个js文件，每次修改都会重写构建整个项目，自上而下串行执行，所以会随着项目规模的增大，导致其构建打包速度会越来越慢。而vite相对较年轻，虽然也提供了部分插件供开发者满足基本需求，但是相对webpack还是比较少的。如果是一些小型项目，需要快速开发的，只需简单配置的项目可以考虑使用vite。vite只会对修改过的模块进行重构，构建速度比webpack快得多。对于两个构建工具的选择，需要根据实际的项目需求和项目规模来考虑。

2025-01-07 23:52:20 1653

原创 VUE2和VUE3的区别

vue2中的数据响应式是根据Object,defineProperty实现的，使用这个方法每次只能对一个对象中的一个数据进行数据劫持，若需要将对象中的所有属性都设置为响应式的，则需要递归遍历实现深层次的监听，以此对对象中的数据进行数据劫持，在性能方面表现很差。V2使用的是选项式API，最直观的感受就是写法的局限性很大，需要按照他提供的写法进行书写，由于它的数据和逻辑分散在各个选项中，当组件的逻辑变得复杂时，很难进行维护和理解。V3使用的是组合式API，写法更加灵活，更偏向原生的写法。

2025-01-07 23:32:14 264

原创 Promise

promise，是一种异步编程的解决方案一般情况下，要处理多层异步操作时，需要在异步操作的回调函数中进行嵌套，若嵌套层数多了，会导致代码不好维护，可读性变差，形成经典的回调地狱问题通过promise处理过的异步方法，可以通过链式编程的方式进行处理，增强代码可读性、更易维护pendingfulfilledrejectednew 出的promise实例提供三个方法then方法是实例的状态发生改变时的回调，第一个参数是resolved状态的回调，第二个参数是reject状态的回调，

2025-01-07 17:34:21 378

原创 function和箭头函数的区别

箭头函数的中的this是其定义函数时所在的作用域中的this，其本身并没有this值。箭头函数不能作为构造函数，他没有原型prototype。直接使用function定义的函数会进行变量提升。通过变量接收，函数本身不会进行变量提升。function函数可作为构造函数使用。箭头函数在书写形式上更灵活，方便。this指向的是函数调用者。

2025-01-07 16:32:17 163

原创 commonJS和ES6模块化

通过模块化的编写方式，每个模块所需依赖都直接在对应模块中引入的，而不是在全局中引入，自然解决了依赖混乱问题，每个模块只需关系自己需要依赖的文件，以及向外界提供的数据即可。在commonjs规范中，通过require导入时，接收一个对象，对象中存着对应模块导出的数据，若模块中没导出任何数据，则返回一个空对象。module.exports 接收一个对象，对象中存放需要导出的数据，导入时，require接收module.exports导出的对象。每个commonjs规范中写的代码都会单独包在一个独立的函数体中。

2025-01-07 15:29:33 827

原创 var、let、const的区别

【代码】var、let、const的区别。

2025-01-07 11:12:04 159

原创类型转换机制

JS有6种简单数据类型：Number、String、Boolean、Symbol、undefined、null引用数据类型：ObjectJS中的变量在声明时，类型是不确定的，只有等到运行时才确定。但是运行符对数据类型是有要求的，如果运算子的类型与预期不符，就会触发类型转换即直观的，手动的对变量类型进行转换。

2025-01-02 18:42:53 280

原创原型与原型链

在JavaScript中，每个对象都具有一个原型对象prototype，目的是：利用原型对象实现方法共享在理解原型对象前，需要先了解什么是构造函数。

2025-01-02 00:45:54 998

原创闭包的理解

一般函数中的变量在函数被执行完成之后就会直接销毁，但是闭包中的变量由于通过返回闭包函数被外部作用域所接收引用，使得其生命周期继承至与外部作用域的生命周期一致，即使其上下文环境已被销毁。使函数内层的作用域访问函数外层的作用域中的变量，使访问者的生命周期得到提升至与外层作用域一致。柯里化函数：避免频繁调用具有相同参数的函数，也能够提高复用性。2. 延长私有变量的生命周期。

2024-12-30 22:33:30 321

原创浏览器缓存

会先向服务器发送请求，协商是否使用本地缓存中的数据，服务器根据请求头中的Expires和Cache-Control标识字判断是否命中，若标识一致，返回304告知浏览器从缓存中取。请求缓存是浏览器将接收到的请求响应存储到本地，当下次需要再次请求时，就无需再次发送HTTP请求去服务器中取数据了，直接在本地缓存中取数据即可。cookie数据主要为了标识用户身份，数据在http请求中携带，在客户端与服务端之间进行传输，存在安全性问题，如果传输的数据没有加密设置，会存在安全问题，别人可以获取到数据，以及修改数据。

2024-12-29 13:17:57 281

原创 git常用指令

git init: 创建本地仓库git clone 远程仓库地址.[更改项目名]git status: 查看暂存区状态信息git add 文件名：工作区文件添加至暂存区git rm --cached a.txt：暂存区文件回至工作区git commit -m 说明：暂存区文件添加至存储区git restore 文件名：存储区文件移至工作区git branch 分支：创建分支 -M：主分支git branch -v：查看分支git checkout 分支：切换分支git checkout -b 分支：创建

2024-11-24 23:22:56 132

原创 CSS布局

定义主轴方向，默认水平定义子元素在主轴方向的对齐方式定义子元素在交叉轴的对齐方式：超出容器轴线长度自动换行，默认不换行：定义多行元素在交叉轴的对齐方式。

2024-11-12 18:25:50 359

原创页面渲染流程以及渲染优化

当输入一个URL进入页面到页面最终渲染完成展示，这一过程主要经过了以下这几个阶段URL解析DNS解析TCP连接发送HTTP请求响应请求浏览器下载资源浏览器渲染页面。

2024-11-08 15:54:29 1120

原创软件工程实施步骤

功能性需求分析：对项目所需具备的功能进行分析，确保平台能够满足用户的基本需求和业务目标。定义主要的系统架构，组件之间的交互、业务流程以及设计实现功能所需涉及的数据表。确定实现这个系统所需要的技术栈、开发工具、以及如何实现具体的功能。功能测试：对系统的功能进行全方面测试，确保功能使用正常、合理。非功能性需求分析：对系统的安全性、性能、可靠性等方面进行分析。非功能测试：主要对系统的性能、安全性、运行等方面进行测试。从以上两点来确保项目满足功能性的需求和质量标准。保证最终结果与期望结果一致。

2024-11-03 23:04:27 232

原创 HTTPS和HTTP

可以看到，HTTPS与HTTP虽然只差一个SSL机密性：混合算法完整性：摘要算法身份认证：数字签名不可否定：数字签名同时引入第三方证书机构，确保公开秘钥的安全性。

2024-11-03 00:13:04 1644

原创深入理解Redux

按照模块，将reducer进行单独管理，每个模块都有自己的reducer，最后，需要将所有的reducer进行合并，赋值给创建的store。react-redux自己内部创建了上下文对象，并且我们可以把store放在上下文中，在组件中使用的时候，这些方法的执行，主要目的是为了让指定组件更新，组件一更新，就可以获取最新的公共信息状态进行渲染。redux是一种实现组件通信的技术，不管任何类型的组件，都可以基于这种方式实现组件通信。在实际项目中，我们会把状态和reducer的管理，按照模块化进行划分。

2024-10-30 11:37:37 1461

原创 plugin的理解与使用

/1. webpack加载webpack.config.js配置项，解析到plugins属性使，执行new TestPlugin，执行插件constructor//2. webpack创建compiler对象(webpack一次执行创建一个)//3. 遍历所有plugin插件，调用apply方法//4. 执行剩下编译流程（触发各hook事件）console.log("执行constructor")console.log("执行apply方法");debugger;//tap同步钩子。

2024-10-29 10:00:23 1569

原创查看compiler和compliation对象

/node_modules/webpack-cli/bin/cli.js ：执行webpack指令，加载webpack.config.js中的内容。由于compiler和compliation对象中属性太多，直接在终端打印会难以对里面的内容进行观测。5. 打开浏览器任意窗口,f12，点击绿色按钮进入调试工具。6. 点击开始按钮，就会跳到打了debugger的地方。这里可以利用node调试的方式，对数据进行观测。然后就可以很清晰的看到相关属性了。--inspect: 进行调试。-brk:在首行打断点。

2024-10-29 09:34:00 305

原创 loader的理解与使用

webpack调用对应类型的loader解析资源，在加载loader配置时，调用loader属性中提供的loader函数，并将处理文件作为参数传到loader函数中，进行处理并返回出去loader接收参数content：被处理后的文件内容mate：别的loader传递的数据loader不同方式同步loader//方式一//当前资源只需一个loader处理，推荐使用这种方式//方式二//处理的资源需要使用多个loader时推荐使用// 第一个参数为是否有错误module: {

2024-10-28 18:11:18 1712

原创 Webpack构建流程

Webpack的运行流程是一个串行的过程，它从启动运行到结束主要概括为三个步骤从配置文件和Shall语句中读取并合并参数，得到最终参数配置文件默认是webpack.config.js，也可以以命令的方式指定配置文件，它的主要作用是用来激活webpack的配置项和插件 webpack会将webpack.config.js中的各配置项拷贝到options对象参数中，并加载用户配置的plugins然后初始化Compiler编译对象，加载所有plugin插件Compiler对象中包含了webpack的生命周期

2024-10-20 12:34:56 1064

erqiae的博客