王布尔-优快云博客

原创【谷歌插件】基本原理

我们从浏览器说起，浏览器会有一个后台 - background，它会在你的计算机中默默运行，相当于人体的大脑，用于发送指令、统筹全局，background的强大甚至可以读取任何页面cookie，当然是在用户同意的前提下。大脑有了，然后就是其他组成部分了，----页签，页签指的是浏览器每个页面标签，如图下图。比如说关闭某个页签、打开某个页签、访问页签的icon、访问页签的url、访问页签的title、访问页签中的cookie等等，也可以监听某个页签关闭、打开、刷新、切换等事件。那么，大脑可以做什么？

2024-11-28 18:51:25 673

原创 React面试题(一)

Fiber 具备任务取消的能力(shouldComponentUpdate或者React.PureComponent)，可以取消不必要的更新，提高性能。高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件，这个新的组件可以对原组件进行扩展或增强，例如添加一些通用的逻辑、状态、行为等。Hooks的出现减少了不必要的生命周期方法的使用，使得代码更加简洁，同时提高了虚拟DOM的diff算法效率，从而提高了页面渲染速度。识别不稳定的使用模式，如未使用的DOM节点、未使用的Refs。

2024-04-29 12:05:36 896 2

原创 JavaScript面试题(浏览器)

在用户第一次使用 session 的时候（访问 jsp 页面会获取 session，所以一般访问 index.jsp 就算是第一次使用 session 了），服务器会为用户创建一个 session 域对象。不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。同源策略是浏览器向服务端发送请求时的一种安全策略，它规定了浏览器只能请求域名、端口号、协议相同的数据源，非同源的请求会被浏览器拦截，造成跨域问题。当浏览器请求域名、端口号、协议不同的数据源时，会被浏览器拦截，此时就会报跨域。

2024-04-29 12:00:40 762

原创 JavaScript面试题(三)

严格模式（Strict Mode）是一种在代码中启用的特殊模式，用于提供更严格的语法和错误检查，以改善代码质量和增强安全性。因为js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。执行栈和调用栈通常是指程序在执行过程中的两种不同的数据结构。

2024-04-28 16:25:43 2190 2

原创 JavaScript面试题(二)

Promise是一个用于异步编程的对象，它允许你以同步的方式编写异步代码，但Promise对象本身在创建时立即执行，不会造成主线程的阻塞。然而，Promise的回调函数，如then()和catch()，是异步执行的，它们会在当前脚本的所有同步任务执行完毕后调用。如果是单个promise实例，即使有多个then，仍然会按照顺序执行。如果是多个promise实例同时调用.then，then会出现交替执行的情况。这个是编译器做的优化，主要是为了避免某一个promise占用的时间太长。Promise本身是同步的。

2024-04-28 16:24:08 842 1

原创 JavaScript底层原理(栈、堆、主线程、任务队列、事件循环机制)

栈是栈内存的简称，堆是堆内存的简称。顾名思义，内存是干啥的？内存就是用来存放数据的。

2024-04-26 10:33:36 885 4

原创 JavaScript深拷贝

总结：只能进行浅层的深拷贝。

2024-04-26 10:26:37 464 1

原创 JavaScrpit数组拍平

【代码】数组拍平、数组转树、树转数组。

2024-04-26 10:22:24 256

原创 JavaScript面试题（一）

因为JavaScript 数据类型在底层是以二进制的形式表示的，二进制的前三位为 0 会被 typeof 判断为对象类型，null 的二进制位恰好都是 0 ，因此，null 被误判断为 Object 类型。let块级作用域声明方式、const声明常量、箭头函数、模版字符串、解构赋值、展开运算符、模块、class类、Set、Map、Promise。因为const只能浅层检测引用类型数据指针(地址)，所以不能直接修改引用类型数据的指针(地址)，但是可以修改引用类型数据内部的元素。

2024-04-26 09:49:48 502 2

原创 CSS面试题

Important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！

2024-04-26 09:48:31 683

原创前端面试题合集（持续更新中...）

26.localStorage能储存多少数据量？6.浏览器事件传播流程是什么？怎么阻止事件默认行为？27.localStorage和sessionStorage的区别。25.axios发送请求无法携带token是什么原因，如何解决？23.promise.all和promise.race的区别。11.typeof和insetensof的区别。9.var声明的变量是全局变量还是局部变量？26.es5怎么实现继承和es6怎么实现继承。26.cookie和session的区别。26.axios常用的api有哪些？

2024-04-22 17:38:44 1568

原创 JavaScript数据类型

null 有属于自己的类型 Null，而不属于Object类型，typeof 之所以会判定为 Object 类型，是因为JavaScript 数据类型在底层都是以二进制的形式表示的，二进制的前三位为 0 会被 typeof 判断为对象类型，而 null 的二进制位恰好都是 0 ，因此，null 被误判断为 Object 类型（000表示对象、1表示整数、010表示浮点数、100表示字符串和110表示布尔值）引用类型的值是保存在内存中的对象（同时保存在栈内存和堆内存中）。引用类型的值按引用访问。

2024-04-12 17:29:46 1678 1

原创 JavaScript数组去重

本篇文章只是介绍一些简单的去重方法，其实数组去重的方法有很多，大家自行摸索～～～

2024-04-12 15:19:20 243

原创 Array、Object、String、Number、Math常用方法

三、String方法。四、Number方法。二、Object方法。

2024-04-12 15:00:34 1029

原创 JavaScript常用方法(Array、Object、String、Math)

一、数组方法item1item2item1item2index,number,item1,,thisValue。

2024-04-09 17:41:17 404 1

原创 css布局方式

流动布局是HTML默认的布局方式，流动布局随文档流自上而下按顺序动态分布。在默认状态下，块状元素的宽度为100%，占据一行显示，不管这个元素是否包含内容，宽度是否为100%行内元素都会在包含元素内从左到右水平分布显示，类似于文本流，超出一行后会自动换行显示，然后继续从左到右按顺序流动，以此类推。栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。

2024-04-08 18:46:43 1627

原创 sql-formatter -- 格式化sql数据

首先你需要一个可以展示代码的组件；我使用的是tech-ui(内部组件库)；

2024-03-22 14:27:14 2439

原创如何在鼠标点击指定元素以外的元素时触发事件

步骤三：通过ref.current.contains()函数判断点击的元素是否是当前元素;步骤四：如果不是当前元素(非指定元素)则执行想要的事件;步骤一：通过React.useRef()获取指定元素;步骤二：给document对象添加点击事件;

2024-03-14 14:56:27 1013

原创鼠标光标选取文本值、获取文本索引

步骤四：通过event的selectionStart属性和selectionEnd属性获取文本位置；步骤三：通过mouseup事件的event + 类名来限制可截取元素的范围；步骤一：通过document添加mouseup事件；这是在做一个字段分割的需求。

2024-03-07 17:44:26 705

原创如何在控制台重新发送请求、修改请求参数

右键鼠标右键点击接口、选择复制、选择以fetch格式复制。- 进入控制台、粘贴内容、可以对请求进行修改、最后点击回车。注意：重放XHR不会重新渲染页面数据，只是单纯的请求接口。- 回到网络、查看请求方式、GET修改为POST了。- 鼠标右键点击请求，选择重放XHR。- 可以看到重新发起了一次请求。注意：可能会遇到跨域问题。

2024-03-06 15:19:04 3061

原创 Bigfish接口请求失败导致阻塞异步任务执行问题

因为js是单线程，只有主线程的任务执行完之后才会执行异步请求，接口无法加载数据导致主线程阻塞，所以像分页器这些异步请求就无法发起执行。检查之后发现逻辑没有问题，唯一的问题是页面中有两个搜选接口500。经过分析确认了原因，接口报错导致阻塞异步任务(分页器)执行。用户反馈antd Table组件的分页器失效。

2024-01-26 11:25:22 577

原创 react-activation -- 页签(适用Umi项目)

思路：通过react-activation实现页面缓存，通过umi-plugin-keep-alive将react-activation注入umi框架，封装页签组件最后通过路由的wrappers属性引入页面。浏览本博客之前先看一下我的博客实现的功能是否满足需求，实现功能：- 页面缓存- 关闭当前页- 鼠标右键>关闭当前- 鼠标右键>关闭其他- 鼠标右键>关闭左侧- 鼠标右键>关闭右侧- 鼠标右键>全部关闭(默认跳转到首页)- 鼠标右键>重新加载(刷新缓存页面)

2024-01-18 18:10:07 3452

原创 react 页签(自行封装)

自己临时封装的一个小组件，功能如上图。缺点：没有刷新和拖拽功能。优点：可以缓存页面。

2024-01-17 17:22:23 981

原创 amap/amap-jsapi-loader -- 高德地图

默认信息窗体封装了关闭按钮，使用 API 默认的信息窗体样式，这个时候只需要对 InfoWindow 设定 content 属性即可，content 可以是 dom 对象，也可以是 html 识别的字符串。在参考本示例之前，需要注意的是，高德地图服务平台 - Web端(JS API)已经无法满足我们需求了，我们需要使用服务平台 - Web服务。进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)。在项目中新建 MapContainer.css 文件，用作地图组件样式。

2024-01-11 16:34:37 9936 4

原创 antv/l7 -- 地图功能

/ 开启默认高亮效果// 开启并设置高亮颜色为红色zIndex: 4, // 设置显示层级}).size(2)// 设置点击生效});});

2024-01-05 17:11:29 3639 1

原创 Codemirror -- 代码编辑器(react、umi)

pnpm install @types/react-codemirror@1.0.8 // ts项目。方法1: 在根目录创建declaration.d.ts文件，添加以下代码。方法2: 安装ts依赖(推荐)

2024-01-04 16:25:27 1191

原创 AntV-G6 -- 将G6图表应用到项目中

【代码】AntV-G6 项目中的应用。

2024-01-04 11:00:45 983 1

原创 JavaScript运算符集合(含新运算符)

在工作中总结一些知识，希望能够帮到你。

2024-01-03 16:29:03 1436 1

原创常用工具函数

【代码】常用工具函数。

2024-01-02 11:02:00 634

原创 braft-editor -- 富文本编辑器(自定义文件上传和拓展功能)

图片上传需要借助braft-utils插件value?: string;onChange?width?height?//表单提交的时候需要把数据通过toHTML()方法处理一下value,onChange,// 在这里调用图片上传接口onChange(?null),!},],),

2023-12-29 10:12:03 2166 1

原创 react-monaco-editor -- 代码编辑器(适用Umi)

这是我配合antd封装的编辑器组件，可以适用于表单元素，也可以独立使用。在config.ts或者.umirc.ts中配置以下代码。

2023-12-28 10:55:07 2380 9

原创 JavaScript方法（Set、Map、URLSearchParams、FormData、Date、File、Blob、Proxy）

为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。JavaScript的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。Set集合是一种数据结构，类似于数组，但是不能存放重复的值可以理解为Set 中的值总是唯一的。通常用于数组去重和字符串去重。Set集合中key和value是相同的，所以 keys() 和 values() 是一样的。

2023-12-19 10:56:02 558 1

原创 React搭建项目

yarn create react-app my-app --template typescript 创建React-typescript脚手架。yarn create react-app my-app 创建React脚手架。postcss-px-to-viewport-8-plugin 页面vw适配。在根目录下创建craco.config.js文件，文件内容如下。首先在根目录下创建router.tsx文件，文件内容如下。在App.jsx文件,引入Outlet标签。react-router-dom 路由。

2023-12-14 17:47:03 634 1

空空如也

空空如也