- 博客(65)
- 收藏
- 关注
RSS订阅原创 面试官：post为什么会发送两次请求？
首先，它们的目的不同。有时候，浏览器也是会先发出一个OPTIONS请求，这个请求就像是浏览器在问服务器：“嘿，我这儿有一个网页想发个请求到你的地盘，但是网页和你的话，咱俩不是同一个源的，你得先告诉我，你同不同意？那不同的源肯定不能互相瞎请求啊，比如说浏览器请求服务器A返回了一个网页，结果这个服务器A跑的A系统的网页里，有一个请求要去请求服务器B上部署的B系统，那这种就很奇怪了，对浏览器来说你们是两个服务器，也就是两个不同的系统，干什么要互相瞎访问，有没有可能A系统是一个涉灰系统在搞破坏，盗取数据，对不对？
2024-08-05 09:17:57
415
原创 lowdb数据库的使用教程
lowdb 是一个简单易用的本地 JSON 数据库，使用原生 JavaScript API 进行查询。在几个项目应用过，记录下常用的API和使用技巧。初始化数据，相当于建表，如果已存在，则不会重复创建，也不会覆盖原有数据。更多使用方法请参考：lodash 官方文档 ，基本都是通用的。使用的lowdb版本：“^1.0.0”
2024-06-13 17:21:33
295
原创 vue2源码重写数组方法学习
总的来说，重写数组方法使得 Vue 能够更好地支持响应式数据更新，提供了更加便捷和灵活的数据操作方式，从而使得开发者能够更加轻松地管理和操作数据，同时保持了视图和数据的一致性。响应式数据更新：通过重写数组方法，Vue 能够捕获对数组的变更操作（如 push、pop、shift 等），并在数据发生变化时自动更新视图，实现了数据的响应式更新。便捷的操作语法：通过重写数组方法，Vue 使开发者能够直接对数组进行操作而无需手动触发视图更新，提供了一种更加便捷的操作语法。
2024-05-31 17:34:59
285
原创 手写一个vue2的diff案例
在某些情况下，如果同一组件在不同的渲染中，存在相同的 key，Vue 可能会复用该组件的状态。总体来说，Vue.js 2.x 中的 Virtual DOM diff 算法主要通过创建新旧虚拟 DOM 树的比较，并根据差异进行最小化的更新来实现高效的页面更新。而当列表中的元素有 key 时，Vue 会基于 key 的变化重新排序和更新元素，这样可以确保列表的变化能够正确地映射到数据的变化上，避免出现意外的渲染结果。差异的应用：最后，Vue.js 根据这些差异使用最小的操作数来更新真实 DOM。
2024-05-31 16:51:26
911
原创 webpack学习汇总
前端工程化Webpack概念本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。有哪些常见的Loader？你用过哪些Loader？css-loader：加载 CSS，支持模块化、压缩、文件导入等特性style-loader：把 CSS
2024-05-31 15:59:55
712
原创 前端浏览器面试汇总
（1）概念CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。（2）攻击类型GET 类型的 CSRF 攻击，比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交。
2024-05-30 17:23:41
978
原创 keep-alive的应用和底层实现原理的探索
具体来说，当一个被 keep-alive 包裹的组件被切换出去时，它的状态会被保留，而不会被销毁。keep-alive 是 Vue.js 中的一个内置组件，它用于缓存组件的状态或避免对组件进行多次销毁和重建。通过使用 keep-alive 组件，可以在组件切换时将状态保留在内存中，以便在下次需要时直接复用，从而提高性能并改善用户体验。在 Vue.js 中使用 keep-alive 组件通常需要配合动态组件（）或者路由来实现组件的切换和缓存。也可以通过 meta 属性指定哪些页面需要缓存，哪些不需要。
2024-05-30 16:35:56
419
原创 如何识别真假性分手？
相信大家都会有很多各种各样的情感困惑，本想着一心一意分享技术类文章，后面想来，看技术文章或许会有些许枯燥乏味，以后会在技术博文中穿插些各种有趣的文章，供大家欣赏，有需要可酌情采纳。当人们遭遇分手时，他们往往难以确定对方的真实意图，是真的想分手还是用分手来警示对方。如果不能及时识别自己是被误解分手，可能会错过挽回的最佳时机。我们来看看真假性分手的定义：真性分手：就是当一段感情出现了难以调和的矛盾，一方已经对另一方失望，彻底不想再见到另一方时提的分手，我们称之为真性分手；
2024-05-30 15:10:09
666
原创 vue经典面试题
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在 Vue 中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。
2024-05-27 22:01:14
875
原创 手写promise
Promise 是一种用于处理异步操作的 JavaScript 对象，可以更优雅地处理异步代码，避免回调地狱（callback hell）的问题。Promise 对象代表一个尚未完成、但预期将来会完成的异步操作，可以通过它的状态（pending/fulfilled/rejected）和值来获取操作的结果或错误。一个 Promise 可以处于以下三种状态之一：Pending（进行中）：初始状态，表示异步操作尚未完成。Fulfilled（已成功）：表示异步操作已经成功完成，可以获取最终的值。
2024-05-27 21:12:29
673
原创 手写节流和防抖
用于限制某个函数在短时间内被频繁调用的情况延迟执行：防抖会延迟执行目标函数，直到一定的空闲时间过去后才执行，如果在这段时间内再次触发，则会重新计时。合并触发：多次连续触发的事件会被合并为一次触发，只有在最后一次触发后的空闲时间内没有再次触发才会执行目标函数。输入框实时搜索：在用户输入搜索关键词时，使用防抖可以避免在用户输入过程中频繁触发搜索请求，提高搜索性能和用户体验。按钮点击事件：在防止用户重复点击按钮后多次触发事件时，可以利用防抖来控制按钮的点击事件，确保只有在用户停止点击后才执行操作。
2024-05-27 20:46:11
1083
原创 剖析vue中nextTick源码
timer 函数根据环境选择合适的定时器来执行回调函数。如果当前没有待执行的回调函数，则调用 timer 函数来触发执行，并标记有待执行的回调函数。flushCallbacks 函数用于执行所有存储在 callbacks 数组中的回调函数，并在执行完成后将 waiting 设置为 false。整体流程是将回调函数加入队列，通过选择合适的定时器来异步执行这些回调函数，保证它们在下一个微任务或宏任务中被执行。callbacks 数组用于存储待执行的回调函数，waiting 变量用于标记是否有待执行的回调函数。
2024-05-27 20:10:34
344
原创 Router滚动行为
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。使用前端路由时，可以通过 vue-router 自定义路由切换时页面的滚动行为，实现页面在切换到新路由时滚动到顶部，或者保持原先的滚动位置，就像重新加载页面一样。当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法。
2024-05-27 19:29:27
216
原创 Vue3 中模板编译做了哪些优化，你知道吗？
BlockTree 在 Vue.js 的编译器和渲染器中扮演着重要的角色，用于描述模板中的各个块（block）以及它们之间的关系，帮助 Vue.js 在编译和渲染过程中正确处理模板的结构。在 Vue.js 编译模板为渲染函数的过程中，编译器会识别并分析哪些部分是静态的（不会随数据变化而改变），将这些静态内容提升到渲染函数之外，在初次渲染时只会执行一次，之后不再重复执行。静态提升用于在编译阶段将静态内容提升到渲染函数之外，以避免在每次渲染时重复创建相同的静态内容，从而提高性能并减少不必要的开销。
2024-05-27 13:08:54
886
原创 Nodejs 爬虫 案例
HTML解析和操作：Cheerio 可以将 HTML 字符串加载到内存中，并将其转换为一个可操作的 DOM 树结构，从而可以方便地对 HTML 文档进行解析和操作。类似于 jQuery 的API：Cheerio 提供了类似于 jQuery 的选择器和操作方法，使用户可以使用 CSS 选择器、DOM 操作等方法来操纵 HTML 文档，例如查找元素、修改属性、添加样式等。
2024-05-27 09:55:33
806
原创 发布订阅模式
定义：发布订阅模式（Publish-Subscribe Pattern）是一种软件架构模式，用于实现一对多的依赖关系，其中一个对象（称为发布者）将消息发送给多个订阅者。在发布订阅模式中，发布者和订阅者之间是解耦的，发布者不需要知道订阅者的存在，订阅者也不需要直接与发布者交互。当发布者有新消息时，它将消息发送给一个中介（称为消息代理或事件总线），然后该中介将消息广播给所有订阅者。这种模式在解耦组件、实现事件驱动架构、异步通信等方面非常有用，常见应用场景包括消息队列、事件处理系统、UI框架等。
2024-05-27 09:30:52
534
原创 Vue 中 diff 算法原理
diff 的核心就是比较两个虚拟节点的差异。Vue 的 diff 算法是平级比较，不考虑跨级比较的情况。1.2相同节点比较属性,并复用老节点（将老的虚拟 dom 复用给新的虚拟节点 DOM）老的儿子是一个列表，新的儿子也是一个列表 updateChildren。如果头部节点不一致，我们就从后向前对比，相同节点则复用。老的儿子是文本，新的儿子是文本，直接更新文本节点即可。1.3比较儿子节点，考虑老节点和新节点儿子的情况。老的有儿子，新的没儿子。默认优化了子节点追加和子节点删除的情况。
2024-05-26 01:26:35
398
原创 谈谈你对 SPA 的理解？
SPA（single-page application）单页应用，默认情况下我们编写 Vue、React 都只有一个html 页面，并且提供一个挂载点，最终打包后会再此页面中引入对应的资源。多页应用跳转需要整页资源刷新。（就是在打包的时候，先将页面放到浏览器中运行一下，将HTML保存起来），仅适合静态页面网站。如何分清在哪渲染：HTML 是在前端动态生成的“客户端渲染”，在服务端处理好并返回的是“服务端渲染”。SSR + CSR 的方式， 首屏采用服务端渲染的方式，后续交互采用客户端渲染方式。
2024-05-26 01:15:02
244
原创 谈谈你对 vue 的理解 ？
传统更新页面，拼接一个完整的字符串 innerHTML 全部重新渲染，添加虚拟 DOM 后，可以比较新旧虚拟节点，找到变化在进行更新。虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。Vue 的渲染核心就是调用渲染（render）方法将虚拟 DOM 渲染成真实 DOM （缺点就是虚拟 DOM 编写麻烦）专门写个编译时可以将模板编译成虚拟 DOM （在构建的时候进行编译性能更高，不需要再运行的时候进行编译）早在 JQ 的时代编写的代码都是命令式的，命令式框架重要特点就是关注过程。
2024-05-26 01:03:25
613
原创 json web token及JWT学习与探索
Signature 部分是对前两部分的签名，防止数据篡改，需要指定一个密钥（secret）。然后，使用 Header 里面指定的签名算法（默认是 HMAC SHA256）,用大白话来说就是：签名是使用私钥对头部和负载进行加密的结果。Payload 部分也是一个 JSON 对象，用来存放实际需要传递的数据。算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（.）分隔，就可以返回给用户。token(令牌)的类型（即 “JWT”）和所使用的签名算法。
2024-05-24 10:22:16
477
原创 还有多少个十年
有过些成功我们一起分享。那些年我们曾朝夕相向。这些年我们也有过彷徨。多少人过客般你来我往。多少年总希望随心所向。这样的日子也不用太长。
2024-01-22 10:09:57
406
原创 关于JS stack trace解决办法
直接在项目下 新建一个index.js文件夹，然后再终端执行 node index.js,这样做的意义是 在运行项目进行编译时，由于要使用到node_module依赖中对应的插件和包，对每一个执行文件写入一个相对大一点的内存空间，在调用node_module依赖里面的包得时候会执行bin文件去调取对应的包，给调用包分配一个较大的内存空间，以至于解决内存空间不足的问题。npm run serve启动前端项目时，控制台输出下图一堆的文字，JS stack trace ,
2023-11-23 10:26:08
835
原创 node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen)
这是node.js 的版本问题，因为 node.js V17开始版本中发布的是OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响。每次启动项目输入启动命令时，先在命令行输入SET NODE_OPTIONS=–openssl-legacy-provider， 回车后输入 再npm启动命令npm start。不管是项目迭代，还是团队开发，这种都比较有效。，来告诉nodejs,别使用最新的SSL3.0,还是使用以前旧版本的。
2023-07-28 10:39:29
3825
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人