- 博客(113)
- 收藏
- 关注
RSS订阅原创 JS常用数据类型的方法函数调用，数组的方法、对象的方法、字符串的方法、数字的方法、集合的方法、映射的方法、栈的方法、队列的方法、链表的封装、树的封装、
【代码】JS常用数据类型的方法函数调用，数组的方法、对象的方法、字符串的方法、数字的方法、集合的方法、映射的方法、栈的方法、队列的方法、链表的封装、树的封装、
2024-04-26 11:25:30
267
原创 在前端开发中用到了哪些设计模式？
定义一系列的算法，将每个算法封装起来，并使他们可以互相转换，在前端开发中常用于根据不同的策略处理相同类型的数据或事件，例如表单验证、排序算法等。定义一个用于创建对象的接口，由子类决定实例化哪个类，在前端开发中常用于根据不同的条件或配置创建不同类型的对象，例如组件工厂、路由工厂。将一个类的接口转换为客户希望的另一个接口，在前端开发中，常用于解决不同组件库的接口不兼容的问题，或对外部数据进行格式转换。双向数据绑定的原理就是观察者模式。遍历数组、集合或异步数据流。
2024-04-08 12:04:20
607
原创 Webpack中loader和plugin的区别？
2.什么是plugins：扩展webpack功能的插件，可在构建过程中执行自定义的任务和操做，可处理更广泛的任务，在webpack配置中的plugins数组中进行配置，可进行如优化、资源管理、注入环境变量，Plugin可以监听Webpack构建过程的不同阶段（通过apply方法），并执行相应的任务。它们可以修改Webpack的内部配置，以及在特定的时间点执行自定义逻辑。1.webpack默认只能处理JS和JSON文件，loader可对不同类型的文件进行转换，比如css-loader。
2024-04-03 08:57:02
465
原创 js中遍历数组，map方法和reduce方法有什么区别？
map()用于对每个元素进行转换，返回一个新数组-reduce()用于将数组减少到单个值-map()不会改变原数组，reduce()可能改变初始值-map()返回与原数组长度一样的数组，reduce()返回单个值。
2024-03-28 11:04:36
475
原创 什么是命名空间？
在前端开发中，命名空间（Namespace）是一种组织和管理代码的技术。它可以避免不同库或组件之间的命名冲突，并提供一种结构化的方式来组织和访问代码。在JavaScript中，由于所有的代码都运行在同一个全局命名空间下，不同的库或组件可能会定义相同的函数名、变量名或对象名，导致冲突和错误。为了解决这个问题，可以使用命名空间将相关的代码封装在一个独立的命名空间中。命名空间可以是一个对象，它包含了一组相关的函数、变量和对象。通过将代码放置在命名空间中，可以避免全局命名冲突，并提供更好的代码组织和可维护性。
2024-03-20 13:07:15
402
原创 前端路由history路由和hash路由的区别？原理？
前端路由是指在单页应用程序（SPA）中通过改变 URL 路径来实现页面切换和导航的机制。在前端开发中，有两种主要的前端路由实现方式：基于 History API 的路由（history-based routing）和基于哈希（Hash）的路由（hash-based routing）。需要注意的是，基于 History API 的路由在现代浏览器中更为常见和推荐，因为它提供了更加优雅和语义化的 URL 结构，而且不会造成页面跳转时出现闪烁的问题。
2024-03-19 21:56:01
485
原创 什么是web workers？使用场景？
Web Workers 可以执行 JavaScript 代码，但它们与主线程相互独立，拥有自己的全局作用域，无法直接访问 DOM，也不能执行与界面相关的操作。总结起来，Web Workers 是一种允许在后台运行脚本的技术，使得 Web 应用程序能够利用多线程处理复杂任务，提高性能和响应能力。Dedicated Workers（专用 Web Workers）：这是最常用的类型，每个 Dedicated Worker 都与一个脚本文件关联，它在独立的线程中执行该脚本文件。然而，某些任务，特别是。
2024-03-17 13:34:19
949
原创 http1.0、http1.1、http2.0、http3.0的区别？
总体而言，HTTP 1.0到HTTP 1.1的改进主要集中在持久连接、管道化和头部压缩等方面，提高了性能和效率。HTTP 2引入了二进制分帧、头部压缩和服务器推送等功能，进一步提升了性能和并行传输的能力。而HTTP 3则使用了QUIC协议，改善了传输的可靠性和拥塞控制，减少了握手延迟，提升了性能和用户体验。
2024-03-16 20:44:57
939
原创 html行内元素（内联元素），块级元素分别有哪些？
内联元素（Inline Elements）是行内元素的另一个术语，它们的行为和显示方式与行内元素相似。块级元素在默认情况下会在新行上开始，并占据可用的宽度。它们可以包含其他块级元素和行内元素。这些元素通常被视为块级元素，但它们还具有特定的语义含义，用于更好地描述页面结构。常用的分类包括行内元素（内联元素）和块级元素。需要注意的是，HTML5 中引入了更多的语义化元素，如。
2024-03-14 15:46:28
481
原创 使用new创建实例对象时，会发生什么？
执行构造函数的代码：通过调用构造函数来初始化新对象的属性。在构造函数中，可以添加新对象的属性和方法，也可以执行其他必要的初始化操作。返回新对象：如果构造函数没有显式返回一个对象，则返回新创建的对象；否则，返回构造函数中显式返回的对象。创建一个新的空对象：创建一个空对象，该对象继承自其构造函数的原型对象。指向新创建的对象，以便在构造函数内部使用。将构造函数的作用域赋给新对象：将新对象的。以下是一个简单的示例，说明。构造函数的代码，将新对象的。属性设置为"John"，被赋值为新创建的对象。
2024-03-14 08:21:47
258
原创 实现水平垂直居中的方式？
注意：vertical-align: middle;用于控制元素在垂直方向上的对齐方式。它适用于行内元素或表格单元格。这些是一些常用的方法，你可以根据具体的需求选择适合的方法来实现水平垂直居中。6.使用父相子绝+绝对定位+margin：负值，1/2宽高。5.使用父相子绝+绝对定位+margin：auto。
2024-03-13 19:28:55
368
原创 对BFC（块级格式化上下文）的理解？
清除浮动：当父元素包含浮动元素时，可能会导致父元素的高度塌陷，无法正常包裹浮动元素。但是，将包含浮动元素的父元素创建为BFC，可以通过BFC的自清除机制来解决高度塌陷问题，使父元素能够正确包裹浮动元素。独立的渲染区域：BFC创建了一个独立的渲染上下文，其中的元素按照一套特定的规则进行布局和渲染。BFC中的元素不会影响到外部的布局，并且内部的布局也不会受到外部的影响。阻止文字环绕：在BFC中，浮动元素不会影响BFC中的文本流，从而避免了文字环绕浮动元素的问题。内部块级元素的垂直对齐：在BFC中，可以使用。
2024-03-13 17:29:40
187
原创 对盒子模型的理解（box-sizing）
这个取值表示元素的宽度和高度包括内容区域（content）、内边距（padding）和边框（border），不包括外边距（margin）。也就是说，设置元素的宽度和高度时，内边距和边框的宽度会被包含在内，不会增加元素的总宽度和高度。在标准的盒模型中，一个元素的总宽度和总高度由其内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。在某些情况下特别有用，例如创建响应式布局时，可以更好地控制元素的宽度和高度，避免由于边框和内边距导致的布局问题。
2024-03-13 16:41:19
643
原创 组合式（composition）API和选项式（options）API的区别？
组合式（composition）API和选项式（options）API是Vue.js中两种不同的组件API风格。
2024-03-13 16:22:20
1689
原创 vue2和vue3的区别？
Vue 3在底层进行了重写，重写了虚拟DOM的实现，优化Tree- Shaking，使用了更高效的响应式系统，提供了更快的渲染速度和更小的包体积。Vue 3虚拟 DOM 的优化，提高了渲染性能。
2024-03-13 15:33:54
373
1
原创 强缓存和协商缓存的区别？
协商缓存和强缓存是 HTTP 缓存机制中的两种不同的策略，用于减少网络请求并提高网页加载速度。它们之间的主要区别在于和。
2024-03-13 14:59:53
627
原创 跨域的几种方式？（详解）
跨域（Cross-Origin）指的是在浏览器环境中，当一个网页的 JavaScript 代码试图访问不同源（Origin）的资源时发生的安全限制。同源策略（Same-Origin Policy）要求网页只能与同一源（协议、域名、端口）的资源进行交互，限制了跨域请求。
2024-03-13 14:44:37
329
原创 重绘和重排的区别？
重绘”（Repaint）和"重排"（Reflow）是两个关键概念，它们描述了浏览器渲染页面时的不同过程和影响。重绘（Repaint）指的是浏览器。当元素的***可见样式属性（如颜色、背景色、边框等）***发生改变时，浏览器会重新绘制该元素，使其呈现新的样式。重绘的代价相对较低，因为它只会更新元素的外观，而不会引起布局的改变。重排（Reflow）指的是。当页面的结构或元素的尺寸、位置等发生改变时，浏览器会重新计算元素的布局，并重新排列它们的位置。
2024-03-13 14:27:45
350
原创 函数柯里化的理解，柯里化有什么用处？
部分应用（Partial Application）：柯里化允许我们部分应用函数，即通过固定函数的一部分参数，生成一个新的函数。通过将参数逐个传递给柯里化函数，可以推迟函数的实际执行，直到所有参数都准备就绪。函数复用：柯里化可以将一个多参数函数转化为接受更少参数的函数序列。函数组合：柯里化可以与函数组合技术结合使用，使函数的组合更加简洁和可读。这些示例展示了函数柯里化在 JavaScript 中的应用，以及它如何增加代码的灵活性、复用性、延迟执行和函数组合能力。通过柯里化，我们可以。
2024-03-13 14:17:23
816
原创 原型和原型链的区别，__proto__和prototype的区别
在JavaScript中，每个对象都有一个原型（prototype），原型是一个对象，它包含共享属性和方法的对象。JavaScript使用原型链（prototype chain）来实现对象之间的继承关系。
2024-03-13 09:35:17
905
原创 vue中双向数据绑定v-model的理解
vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
2024-03-13 09:25:52
322
原创 Pinia和Vuex有什么区别？
Pinia的API设计更加简洁和直观。它采用了类似于Vue Composition API的风格，使用了更加现代化的语法和概念。相比之下，Vuex的API设计较为传统，使用了基于对象和字符串的方式来定义和访问状态。
2024-03-13 08:47:31
822
原创 Vue中的数据交互有几种方式
Vue中的数据流是单向的，从父组件传递到子组件。父组件可以通过props将数据传递给子组件，子组件通过props接收并使用这些数据。这种方式适用于父子组件之间的简单通信。
2024-03-13 08:31:53
499
原创 在vue中什么是虚拟DOM？
4.当应用的状态发生变化时，Vue会使用虚拟DOM来进行高效的更新。它通过比较新旧虚拟DOM树的差异，找出需要更新的部分，并将这些差异应用到真实的DOM上。这个对象树称为虚拟DOM树，它和真实的DOM具有相似的结构，但只存在于JavaScript内存中。5.虚拟DOM的好处在于它可以批量处理DOM的更新，在内存中进行操作，减少了直接操作真实DOM的次数。虚拟DOM是Vue中的一种优化技术，通过抽象真实的DOM为JavaScript对象树，实现高效的DOM更新和渲染，从而提升前端应用的性能和用户体验。
2024-03-12 17:40:35
578
原创 服务端渲染SSR的基本步骤？
服务端渲染（Server-Side Rendering，SSR）是一种将网页的渲染过程从客户端转移到服务器端的技术。
2024-03-12 17:16:20
392
原创 描述下Vue自定义指令
全局定义：Vue.directive(“focus”,{})局部定义：directives:{focus:{}}钩子函数：指令定义对象提供钩子函数bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inSerted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前调用。指令的值可能发生了改变，也可能没有。
2024-03-07 17:32:12
555
原创 Vue template到render过程，以及render的调用时机
深度遍历AST，查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点，他们生成的DOM永远不会改变，这对运行时模板更新起到了极大的优化作用。解析过程：利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的 回调函数，来达到构造AST树的目的。parse的目标：把tamplate转换为AST树，它是一种用 JavaScript对象的形式来描述整个模板。这个过程主要分析出哪些是静态节点，给其打一个标记，为后续更新渲染可以直接跳过静态节点做优化。
2024-03-07 17:25:58
587
原创 在vue中$nextTick 原理及作用
2.同时由于 VirtualDOM 的引入，每一次状态发生变化后，状态变化的信号会发送给组件，组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点，然后对 DOM 进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将浪费更多的性能，所以异步渲染变得更加至关重要。因为在created()钩子函数中，页面的DOM还未渲染，这时候也没办法操作DOM，所以，此时如果想要操作DOM，必须将操作的代码放在nextTick()的回调函数中。
2024-03-03 17:45:29
672
原创 在vue中对keep-alive的理解，它是如何实现的，具体缓存的是什么？
如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。
2024-03-03 17:39:26
955
原创 如何保存页面的当前的状态？
在这里面需要注意的是组件更新状态的时机。比如从 B 组件跳转到 A 组件的时候，A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候，实际上是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性，用来控制 A 组件是否读取 Storage 中的状态。如果 B 组件后退或者下一页跳转并不是前组件，那么 flag 判断会失效，导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage，会造成很奇怪的现象。
2024-03-03 17:27:09
606
原创 过滤器的作用，如何实现一个过滤器
根据过滤器的名称，过滤器是用来过滤数据的，在Vue中使用filters来过滤数据，filters不会修改数据，而是过滤数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示）。过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数。比如后端返回一个 年月日的日期字符串，前端需要展示为 多少天前 的数据格式，此时就可以用fliters过滤器来处理数据。需要格式化数据的情况，比如需要处理时间、价格等数据格式的输出 / 显示。
2024-03-02 12:49:32
867
原创 slot是什么？有什么作用？原理是什么？
当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.$ slot中，默认插槽为vm.$ slot.default，具名插槽为vm.$ slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到slot标签，使用$slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。又名匿名插槽，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。
2024-03-02 12:41:04
303
原创 Computed 和 Watch 的区别？
computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。
2024-03-01 21:49:26
425
原创 MVVM、MVC、MVP的区别？
Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。
2024-03-01 21:28:43
3320
原创 使用 Object.defineProperty() 来进行数据劫持有什么缺点？
（1）在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的语法。
2024-03-01 12:43:25
609
原创 Vue的基本原理？双向数据绑定的原理？
（3）Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。（2）compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
2024-03-01 12:42:03
684
原创 React.Component和React.PureComponent的区别？
pure：纯净的，即为纯组件，可以用来优化React程序，减少render函数执行的次数，提高组件的性能。
2024-02-20 13:34:36
569
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人