码多宝-CSDN博客

原创 webpack面试题

webpack 具有打包压缩，编译兼容，能力扩展等功能，实现前端项目的模块化，高效地维护项目中的资源。我们在开发时，用的用到框架（React、Vue），ES6模块化语法，Less/Sass等CSS预处理器等语法进行开发，这样的代码想要在浏览器运行必须经过编译成浏览器能识别的JS、CSS语法才能允许。此外还有打包能压缩代码，做兼容性处理，提升代码性能等。**能力扩展：**通过webpack的Plugin机制，可以进一步实现诸如按需加载，代码压缩等功能，帮助我们提供工程效率以及打包输出的质量。

2024-06-03 17:28:58 156

原创 js作用域和作用域链

当在Javascript中使用一个变量的时候，首先Javascript引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。在大括号之外不能访问这些变量。局部作用域，也叫函数作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。作用域决定了代码区块中变量和其他资源的可见性，即变量与函数的可访问范围，控制着变量与函数的可见性和周期性。如果在全局作用域里仍然找不到该变量，它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错。

2024-05-31 14:15:19 158

原创说说如何借助webpack来优化前端性能？

里通过splitChunksPlugin来实现，该插件webpack已经默认安装和集成，只需要配置即可splitChunks.chunks:“all”随着前端的项目逐渐扩大，尤其在大型项目中，必然会带来性能问题。通过webpack进行打包，利用webpack对前端项目性能优化是十分重要的环节。terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让打包后文件更小。对文件的大小进行压缩，减少http传输过程中宽带的损耗。

2024-05-29 15:00:45 110

原创 webpack

Plugin 是 Webpack 中的扩展器，在 Webpack 运行的生命周期中会广播出许多钩子事件，Plugin 可以监听这些事件，并挂载自己的任务，也就是注册事件。**loader **让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。webpack读取配置，根据入口开始遍历文件，解析依赖，使用loader处理各模块，然后将文件打包成bundle后输出到output指定的目录中。

2024-05-29 14:07:15 1462

原创 Generator async/await

Async/await其实就是上面Generator的语法糖，async函数其实就相当于funciton *的作用，而await就相当与yield的作用。与函数声明类似，不同的是function关键字与函数名之间有一个星号，以及函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

2024-05-29 09:39:02 145

原创 Promise

Promise是构造函数，它可以生成具有特定状态的实例，这些状态包括pending(等待)，fulfilled(成功)，和rejected(失败),这种状态管理机制，使得异步操作的结果变得可预测和可控,是一种解决地狱式回调的解决方案。Promise.all()方法接收数组为参数，每一项都是一个Promise实例,当所有的传入的状态都为成功时，才会返回成功，如果一个失败那么返回的状态也是失败的。Promise.race()同样传入数组，只要有一个传入Promise实例状态改变，那就返回这个状态。

2024-05-27 17:49:31 104

原创 Diff算法的理解

首先旧虚拟节点跟新的虚拟节点start作对比，如果没有比对成功,那么旧虚拟节点会跟新的end节点作比对。如果依旧没有比的成功那么就用旧的虚拟节点end跟新节点start作对比,如果还是没有对比成功那么旧的虚拟节点end会跟新的节点end做对比。如果都匹配不到，则旧虚拟节点key值去比对新虚拟节点的key,相同则复用，并移动到新虚拟节点的位置。第二种：旧的虚拟节点子节点，新的有，则添加新的子节点。第一种：新旧虚拟节点都是文本节点，则用新的替换旧的。第三种：旧的有子节点，新的没有，则删除旧的节点。

2024-05-24 16:41:30 578 1

原创 vue3面试题

5.更好的响应式系统：Vue3的响应式系统进行了重构，更好地处理嵌套对象和数组的变化，同时也提供了更多的API来处理响应式的数据。3.inject是一个字符串数组，或者一个对象，属性值可以是一个对象，包含from和default默认值。1.更快的渲染速度：Vue3使用了Proxy代理对象，可以更快的跟踪数据变化，提高渲染速度。2.provide是一个对象，或者是一个返回对象的函数，里面就包含给子孙后代的属性和属性值。1.它的响应式是更加“深层次”的，底层本质是将传入的数据包装成一个Proxy。

2024-05-23 15:26:46 166 1

原创 Vue3 的数据响应式原理是怎么样的？

Vue3 是通过 Proxy 对数据实现 getter/setter 代理，从而实现响应式数据，然后在副作用函数中读取响应式数据的时候，就会触发 Proxy 的 getter，在 getter 里面把对当前的副作用函数保存起来，将来对应响应式数据发生更改的话，则把之前保存起来的副作用函数取出来执行。具体是副作用函数里面读取响应式对象的属性值时，会触发代理对象的 getter，然后在 getter 里面进行一定规则的依赖收集保存操作。Vue3支持了多个根节点的组件，可以更方便地进行组件的复用和组合。

2024-05-23 09:46:02 100 1

weixin_44248597的博客

原创 webpack面试题

原创 js作用域和作用域链

原创说说如何借助webpack来优化前端性能？

原创 webpack

原创 Generator async/await

原创 Promise

原创 Diff算法的理解

原创 vue3面试题

原创 Vue3 的数据响应式原理是怎么样的？

原创 Vue2的数据响应式原理是?

原创 MVVM如何理解？

原创 Vue初始化做了什么？

原创 threejs webpack引入物理引擎ammo

原创【无标题】

空空如也

空空如也