![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
小王学前端️
分享工作或学习中遇到的问题一同探讨
展开
-
Qiankun 子应用之间 如何通信 主应用和子应用如何通信
你可以在主应用中通过 props 传递数据给子应用,然后在子应用中通过 props.onGlobalStateChange 和 props.setGlobalState 来监听和修改全局状态。这种方式可以避免命名冲突,但是需要手动管理事件的生命周期,例如在不需要事件时移除事件监听器。:你可以在 window 对象上定义全局变量,然后在其他应用中访问这些变量。然后你可以在一个应用中修改状态,然后在其他应用中监听状态的变化。在这个例子中,主应用通过 props 传递全局状态和两个函数给子应用。原创 2024-06-11 18:06:08 · 545 阅读 · 0 评论 -
什么是Web Worker 并示例
它允许主线程创建 Worker 线程,将一些任务分配给后台 Worker 线程去执行,当 Worker 线程完成任务后,再把结果返回给主线程。在这个例子中,主线程将一个大数发送给 Worker,Worker 接收到这个数后,计算从 0 到这个数的和,然后将结果返回给主线程。原创 2024-06-11 15:52:10 · 122 阅读 · 0 评论 -
深拷贝和浅拷贝 分别示例
然后,它创建一个新的对象或数组,然后递归地拷贝输入对象的所有属性。当我们修改obj2.b.c的值时,obj1.b.c的值并没有改变,这是因为obj1.b和obj2.b指向的是两个不同的对象。当我们修改obj2.b.c的值时,obj1.b.c的值并没有改变,这是因为obj1.b和obj2.b指向的是两个不同的对象。:创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。当我们修改obj2.b.c的值时,obj1.b.c的值也跟着改变,这是因为obj1.b和obj2.b指向的是同一个对象。原创 2024-03-28 12:18:49 · 223 阅读 · 0 评论 -
闭包是什么 用在什么地方 分别示例
在这两个例子中,debounce和throttle函数都返回了一个闭包,这个闭包可以访问并修改debounce和throttle函数的timeout和inThrottle变量。在这个例子中,createCounter函数返回了一个闭包,这个闭包可以访问并修改createCounter函数的count变量。:当连续触发事件时,throttle会在n秒内只执行一次,所以节流会稀释函数的执行频率。:闭包可以用来模拟私有变量,因为闭包内的变量只能通过闭包函数来访问,无法直接访问。例子1:数据封装和私有变量。原创 2024-03-28 12:12:04 · 284 阅读 · 0 评论 -
词法环境和词法作用域
在JavaScript中,一个变量的作用域是在写代码的时候就决定了的,这就是词法作用域。换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变(除了特殊的eval或with情况)。每个执行上下文都有一个与之关联的词法环境,当执行流进入一个由函数、模块、脚本或者with语句创建的块时,会创建一个新的词法环境。在这个例子中,inner函数形成了一个闭包,它可以访问其自身作用域内的y变量,也可以访问包含它的outer函数的作用域内的x变量。原创 2024-03-28 12:11:08 · 217 阅读 · 0 评论 -
匿名函数是什么 是干什么用的
当你使用函数作为参数(例如在setTimeout或addEventListener中)时,匿名函数非常有用。:当函数被用在表达式中时,例如赋值给变量,或者作为对象的方法,通常使用匿名函数。:匿名函数可以立即执行,这在初始化代码或创建作用域以隐藏内部细节时非常有用。:匿名函数可以形成闭包,闭包可以让函数拥有私有变量。原创 2024-03-28 12:00:33 · 229 阅读 · 0 评论 -
JS的数据类型 如何来判断这些数据类型
数字类型,包括整数和浮点数,例如:42,3.14159。:字符串类型,用于表示文本数据,例如:“Hello, World!:布尔类型,有两个值:true(真)和 false(假)。:对象类型,用于存储键值对的集合。:有一个值null,表示一个空值或者无值。:有一个值undefined,表示未定义或不存在的值。:符号类型,是一种新的数据类型(ES6引入),用于创建匿名的对象属性。:大整数类型,用于存储任意精度的整数。原创 2024-03-28 11:58:36 · 145 阅读 · 0 评论 -
移动端调试工具-Eruda
Eruda 是一个专为手机网页前端设计的调试面板,类似于 DevTools。:现在,你可以在手机上打开你的网页,然后在页面中看到 Eruda 的调试面板。原创 2024-03-26 16:16:25 · 371 阅读 · 0 评论 -
移动端调试工具-vConsole
它可以直接嵌入到你的web页面中,提供了控制台日志,网络请求查看,元素查看等功能。:现在,你可以在手机上打开你的网页,然后在页面中看到vConsole的调试面板。原创 2024-03-26 16:13:24 · 472 阅读 · 0 评论 -
普通数组以及数组对象去重的方法
Set是ES6中新增的数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值。:filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。:reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。原创 2024-03-25 22:28:04 · 287 阅读 · 0 评论 -
发布-订阅模式
,它定义了如何在多个对象之间进行消息传递。在这个模式中,发送消息的对象(发布者)不会直接发送消息给接收消息的对象(订阅者),而是通过一个中间的对象(通常被称为 “主题” 或 “事件”)进行通信。发布-订阅模式可以解耦发送消息和接收消息的对象,使得你可以在不改变发布者的情况下改变订阅者,反之亦然。:如果你的应用中有一些复杂的业务逻辑,你可以使用发布-订阅模式来解耦这些逻辑,使得代码更易于维护和扩展。:在实时应用中,如聊天应用、实时数据更新等,发布-订阅模式可以用于在服务器和客户端之间进行实时通信。原创 2024-03-21 11:58:03 · 218 阅读 · 0 评论 -
Web Workers是什么 以及示例
在上述代码中,我们首先创建了一个新的 Worker,并指定了 Worker 的脚本(worker.js)。然后,我们使用 postMessage 方法向 Worker 发送数据,使用 onmessage 事件监听器接收 Worker 发送的数据,使用 onerror 事件监听器处理 Worker 的错误。在 Worker 脚本(worker.js)中,你可以使用 self 或 this 来引用 Worker 的全局作用域。Web Workers 是一种在。原创 2024-03-21 11:52:53 · 150 阅读 · 0 评论 -
浏览器输入Url到页面展示做了哪些事情
浏览器解析 HTML 生成 DOM 树,解析 CSS 生成 CSSOM 树,然后结合 DOM 树和 CSSOM 树生成渲染树。然后,浏览器会布局渲染树(计算元素的位置和大小),最后绘制渲染树(将元素绘制到屏幕上)。JavaScript 可能会修改 DOM 树和 CSSOM 树,这可能会导致渲染树、布局和绘制的更新。:浏览器发送 HTTP 请求到服务器,请求包含了请求方法(如 GET 或 POST)、URL、HTTP 版本、请求头和请求体。:最后,浏览器会关闭 TCP 连接,进行四次挥手。原创 2024-03-21 11:50:53 · 196 阅读 · 0 评论 -
JS 打包格式
在你的代码中,umd 可能是指你的 JavaScript 代码将被打包为 UMD 格式,这样它可以在多种环境中运行。在这种格式中,你可以使用 import 来导入模块,使用 export 来导出模块。在这种格式中,你可以使用 require 来导入模块,使用 module.exports 或 exports 来导出模块。:这种格式旨在兼容 CommonJS 和 AMD,使模块可以在多种环境中运行(如浏览器和 Node.js)。RequireJS 是最知名的使用 AMD 格式的库。原创 2024-03-20 22:24:04 · 214 阅读 · 0 评论 -
JS中的this指向
当一个函数被作为普通函数调用时(即不是作为对象的方法、构造函数或者 call / apply / bind 调用),this 指向全局对象(非严格模式)或者 undefined(严格模式)。在浏览器中,全局对象是 window。:当一个函数被作为对象的方法调用时,this 指向调用该方法的对象(也就是myObj):当一个函数被作为构造函数调用(使用 new 关键字)时,this 指向新创建的对象。:箭头函数没有自己的 this,它的 this 值继承自包含它的函数或全局作用域。原创 2024-03-20 21:54:54 · 164 阅读 · 0 评论 -
Call Bind Apply 是干嘛的 有什么区别以及什么时候使用!!!
上文就有同学疑惑了。原创 2024-03-20 21:43:32 · 287 阅读 · 0 评论 -
JS中 forEach 和Map的区别
forEach 没有返回值,它仅仅是对数组的每个元素执行提供的函数。而 map 会创建一个新的数组,数组中的每个元素都是原始数组元素通过提供的函数处理后的结果。:如果你需要改变原数组或者对数组进行操作但不需要结果,那么可以使用 forEach。如果你需要对数组的每个元素进行操作并需要结果,那么应该使用 map。:forEach 可以改变原数组,而 map 不会改变原数组,它会返回一个新的数组。forEach 和 map 都是。原创 2024-03-20 16:38:23 · 242 阅读 · 0 评论 -
前端-ES6箭头函数以及带来的好处
箭头函数是引入的一种新的函数语法。它的语法更简洁,而且解决了一些函数作用域中的的问题。原创 2024-03-19 18:54:42 · 352 阅读 · 0 评论 -
Vue2 和Vue3 双向数据绑定的区别和原理
双向数据绑定在 Vue 2 中,双向数据绑定是通过实现的。Vue 2 会使用为数据对象的每个属性创建和,当属性被访问或修改时,Vue 2 可以通过和捕获这些操作,从而实现数据的响应式更新。在 Vue 3 中,双向数据绑定是通过实现的。提供了更多的拦截操作,不仅可以拦截属性的访问和修改,还可以拦截删除操作、检查操作等。这使得 Vue 3 的数据响应系统更强大、更灵活。双向数据绑定的工作流程如下:当你修改数据时,Vue 会通过捕获这个操作,然后更新视图。原创 2024-03-19 18:51:26 · 950 阅读 · 1 评论 -
WebSocket 和SSE的区别以及优缺点
WebSocket 和 Server-Sent Events(SSE)都是用于:WebSocket 是全双工的,这意味着服务器和客户端可以同时发送和接收消息。而 SSE 是单向的,只允许服务器发送消息到客户端。:WebSocket 可以发送任何类型的数据,包括文本和二进制数据。而 SSE 只能发送文本数据。:WebSocket 连接一旦建立,就会保持打开状态,直到客户端或服务器主动关闭它。而 SSE 连接在每次消息发送完毕后都会被关闭,然后客户端需要重新连接。原创 2024-03-19 18:33:10 · 1592 阅读 · 0 评论 -
Websorket 和Websorket的底层协议
它在 TCP 上增加了一种新的数据帧格式,并添加了握手和心跳机制等。WebSocket 协议的握手过程是通过。这个例子中,ws://example.com 是 WebSocket 服务器的地址。完成的,这使得 WebSocket 能够复用现有的 HTTP 基础设施。方法用于向服务器发送消息,事件用于接收服务器的消息。原创 2024-03-19 18:23:30 · 424 阅读 · 0 评论 -
Js 原型和原型链
在这个例子中,Person.prototype 是 person1 和 person2 的原型。当调用 person1.sayHello() 或 person2.sayHello() 时,sayHello 函数是在 Person.prototype 中找到的,这就是原型链的工作方式。当试图访问一个对象的属性时,如果对象自身没有这个属性,那么 JavaScript 会沿着原型链去寻找这个属性,直到找到或者到达原型链的末尾。([[Prototype]]),它就是对于其他对象的引用。原创 2024-03-19 17:40:52 · 213 阅读 · 0 评论