- 博客(242)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端页面无法渲染两个Google Translate插件
在w3c官方给出的demo里尝试了一下，无论添加几个Google Translate标签，始终只会渲染首个Google Translate标签。
2023-03-16 17:15:59
473
原创 提升 Web 应用程序的性能：如何使用 JavaScript 编写缓存服务
在本文中，我们将探索如何使用简单的数据结构在 JavaScript 中编写缓存服务。在此示例中，我们创建了缓存服务的新实例并从缓存中检索值。如果在缓存中找不到该值或已过期，我们会从服务器检索该值并将其存储在缓存中，有效期为 5 分钟，还可以使用 方法清除缓存clear()。该get()方法检索与给定键关联的值，set()设置与键关联的值，并clear()从缓存中删除所有值。在此步骤中，我们将为缓存项添加过期时间，并在它们过期时将其从缓存中移除。编码缓存服务的第一步是定义将用于访问缓存的接口。
2023-03-03 14:25:13
814
原创 google超强插件助力提升网站可访问性，排名直线提升
对于我们几乎所有人来说，网络是日常生活中不可或缺的一部分。全世界，五分之一的人有残疾——视觉、听觉、运动或认知——这可能使他们难以或无法使用网站。过去，残疾人无法使用其网站的组织可以简单地提供替代方案，例如拨打电话号码。然而，今天，这已经不够了。创建一个包容性社会是一个全球关注的问题，无论是创建无障碍建筑、信息、教育、工作还是娱乐……这都是正确的。可感知——人们可以看到或听到内容可操作——人们可以通过打字或说话来访问内容可理解——使用的语言清晰简单健壮——人们可以使用各种辅助技术访问内容。
2023-02-07 11:40:13
485
原创 Failed to minify the code from this file
后来发现，是由于react-scripts版本太低导致，升级一波build成功。
2023-01-13 17:27:44
507
原创 mapbox地图动画一键飞行
最近，Mapbox GL JS 从 v2.9 开始支持将地图显示为 3D 地球。话不多说，马上看看效果怎么样：mapbox地图动画我们通过设置投影属性，即可将地图更改为地球。
2022-12-01 19:15:45
1116
原创 react实现websocket消息推送
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。并且他没有同源限制，协议标识符是ws（如果加密，则为wss）。
2022-11-17 18:55:13
765
原创 前端安全：CSRF、XSS该怎么防御？
XSS是后端的责任，后端应该在用户提交数据的接口对隐私敏感的数据进行转义。NO，这种说法不对所有插到页面的数据，都要进行过滤转移，当没有敏感字符的时候，就可以直接插到页面上显示了。NO，丝毫没有什么作用XSS攻击是页面被注入了恶意的代码，利用恶意脚本，攻击者可以获取用户的Cookie、SessionID等敏感信息。在HTML中内嵌的文本中，恶意内容通过script标签注入在内联的JS中，拼接的数据突破了原本的限制在标签属性中，恶意内容包含引导，从而突破属性值的限制。
2022-11-12 15:54:31
2286
原创 【避坑指“难”】React umi项目打包，服务器找不到资源目录，umi.[hash].js Not Found
homepage 的作用是设置应用的跟路径，我们的项目打包后是要运行在一个域名之下的，有时候可能是运行在跟域名下，也有可能运行在某个子域名下或或域名的某个目录下，这时候我们就需要让我们的应用知道去哪里加载资源，这时候就需要我们设置一个跟路径，而且有时候我们的资源会部署在 CDN 上，你必须告诉打包工具你的CDN地址是什么。中homepage属性时，build打包之后的文件资源默认路径是。
2022-10-11 11:21:07
1328
原创 前端鉴权的10种方式
鉴权(Authentication) 在信息安全领域是指对于一个声明者所声明的身份权利，对其所声明的真实性进行鉴别确认的过程。
2022-10-09 15:15:34
3340
1
原创 深受1px的困扰，如今终于解决了
移动端适配主要就分为两方面，一方面要适配不同机型的屏幕尺寸，一方面是对细节像素的处理过程。如果你在项目中直接写了 1px ，由于 dpr 的存在展示导致渲染偏粗，其实是不符合设计稿的要求。...
2022-08-31 10:36:34
995
原创 通俗易懂，一文学会前端缓存
主要分为：浏览器缓存、http缓存其中http缓存是web缓存的核心，最难懂也是最重要的一部分。浏览器缓存，如localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据，比如用户信息，需要携带给后端的参数。（一般只能保存5M左右的数据，多了不行）所以接下来，我们的重点将围绕http缓存展开。http缓存可以减少带宽流量，加快响应速度。...
2022-08-30 16:24:33
263
原创 又到了battle EventLoop的季节
Event Loop ，“事件循环”浏览器 or Node的一种解决JavaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。执行一个宏任务（栈中没有就从事件队列中获取）执行过程遇到微任务，添加到微任务队列中宏任务执行完毕后，立即执行微任务队列的所有微任务当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）...
2022-08-29 16:40:45
210
原创 从源码层解读react渲染原理
对于生命周期我们只需关注比较重要的几个生命周期的运行点即可，比如render的作用、使用在挂载完真实DOM后做一些副作用操作、以及性能优化点、还有卸载时利用清除副作用。对于首次挂载阶段，我们需要了解react的渲染流程是：通过我们书写的初始元素和一些其他可以生成虚拟节点的东西来生成虚拟节点。然后针对不同的节点类型去做不同的事情，最终将真实DOM挂载到页面上。然后执行渲染期间加入到队列的一些生命周期。然后组件进入到活跃状态。对于更新卸载阶段，需要注意的是有几个更新的场景。以及key的作用到底是什么。
2022-08-23 15:13:24
504
原创 虚拟dom比真实dom还快吗？90%回答掉坑里了
虚拟DOM不一定会比操作原生DOM更快。虚拟DOM的优势在于节点进行改动的时候尽量减少开销React从来没说过虚拟DOM会比原生更快。框架的本质是提升开发效率，让我们的注意力更集中于数据。
2022-08-23 14:02:07
1644
原创 antv L7地图报错：context lost at Funciton
某天疯狂渲染地图组件，大概17次来回切换，屏幕重新渲染地图，最终它还是没能扛下所有，不幸崩塌。分析可能的原因：1、由于L7地图画布一直累加在页面上，old context 无法回溯更新，“新的来了，旧的依旧不去”，最后导致画布丢失。解决方案：重新渲染新的地图画布之前，将上一次画布销毁，直接用的destroy()方法。结果：重新渲染的时候看着是很丝滑，看上去旧的画布已经销毁不复还，再次试验发现10余次渲染之后又爆红报错了。2、查看dom节点，发现地图组件是销毁了，它的底图（图上白色背景的）依旧保留，无数个ca
2022-07-07 11:38:53
1404
4
原创 使用评估工具进行前端性能优化大赏
众所周知，Google一直关注web性能。早在2010年，Google就在一篇博文中指出，性能是影响网站自然搜索结果排名的一个重要因素。如果你运行的网站由内容驱动，且大部分流量来自搜索引擎，这就会让你停下来。好在Google有一个评估工具。Google PageSpeed Insights 会分析网站，并就如何改进其性能和用户体验给出提示。当PageSpeed Insights呈现分析时，它会执行两次：第一次使用移动用户代理，第二次使用桌面用户代理。它分析性能时考虑两个关键因素：内容加载所需时间，以及整个页
2022-06-14 19:56:14
225
1
原创 【数据可视化】Antv L7给地图添加图例Legend
地图组件用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例、比例尺L7 目前支持 ControlZoom 放大缩小Scale 比例尺Layers 图层列表组件介绍：import { Scene, Control } from '@antv/l7';const legend = new Control({ position: 'topleft'})position: string 控件位置支持 8 个方位bottomrighttopright..
2022-05-31 15:56:57
1229
1
原创 性能优化：nginx静态压缩，网页速度倍级提升
随着项目的不断优化迭代，加入了许多高大上且卷的功能，是相当炫酷了。比方说：Antv 的L7、G2、G6、Echart，集众多优秀的组件于一身（它们真的很大，非常大），固然越走越沉重，是时候减负了！为什么要进行性能优化？这是优化前的一张资源加载图，从上图我们可以获取到那些信息呢？1.3M的资源，加载了9.06s，项目经理看了都流泪35个请求，共2.6M资源，传输无压缩，真是太实在了当然，资源的加载速度和网络带宽是密不可分的，需要运维同学去进行优化了，那我们能做些什么呢？nginx 资源动态
2022-05-30 11:51:00
1034
原创 【避坑指“难”】react-dnd引入后，.mjs文件解析错误
需要在config.js文件中添加配置：config.module.rule('mjs-rule').test(/.m?js).resolve.set('fullySpecified', false);
2022-05-28 22:40:40
1057
2
原创 【避坑指“难”】umi3分包优化，提升首屏加载时间
提升首屏加载时间原理：把大体积的包，分成多个小体积的包进行加载，减少请求时间chainWebpack配置在 umi.js 或者 umi.ts 或者 .umirc.js 或者 config.js 中配置，使用 webpack 的优化模块optimization.splitChunks实现。chunks配置chunks 配置需要加上 umi，否则打包完后依旧是白屏，在控制台可看到 umi.js 和 umi.css 并没有引入。compression-webpack-plugin服务端使用gz.
2022-05-24 12:11:21
2776
1
原创 初探mapbox地图可视化实例，带你看看家附近有多少咖啡馆
本实例使用的是Mapbox GL JS，开发文档地址：请点击Mapbox GL JS 是一个用于 Web 上矢量地图的 JavaScript 库。它的性能、实时样式和交互功能为在网络上构建快速、沉浸式地图的任何人设定了标准。官网给大家准备了很多实例，可供参考学习。咖啡馆地图可视化实现效果核心代码 （React + Typescript）import React, { useEffect, useState } from "react";import { history } from ".
2022-05-23 10:47:25
949
原创 【避坑指“难”】el-table表格实现单选
el-table选择多行数据时使用 Checkbox，那么同样的，如果想支持单选的话，我们就可以把Checkbox的功能改为Radio即可。<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column label="选择项" width="55"> <t
2022-05-05 12:42:14
19173
8
原创 【避坑指“难”】React配置AntV G2 饼图
效果如下：核心代码：import { Chart } from '@antv/g2';import React, { useEffect, useState } from 'react';interface PieProps { dataList: any;}const Pie: React.FC<PieProps> = (props: any) => { const { dataList } = props; const data = dataList;
2022-04-07 11:49:34
2168
原创 【避坑指“难”】自定义AntV G2 Chart柱状图悬浮框信息
实现效果如下：官方配置如下：import { Chart } from '@antv/g2';const data = [ { time: '16 Q1', type: '移动游戏', value: 0 }, { time: '16 Q1', type: '移动购物', value: 17.8 }, { time: '16 Q1', type: '移动营销', value: 69.4 }, { time: '16 Q1', type: '共享单车', value: 12.8 },
2022-04-07 11:35:21
947
原创 【避坑指“难”】Antd Table可折叠嵌套List
实现效果如下图：核心功能代码给ProTable 或 Table组件配置expandable={{ expandedRowRender }}const expandedRowRender = (record: any) => { return ( <List style={{ width: 300, marginLeft: 315 }} size="small" split={false} dataSour
2022-04-05 17:49:17
1240
原创 无敌版可配置的查询构建器React Query Builder
基于上一篇《自定义一个玩出花来的查询构建器React Query Builder》在此基础上又做了一次升级改造，让我来看看升级后的查询构建器长什么样吧！左、右两侧支持Cascader级联菜单选择支持级联菜单Tooltip悬浮提示右侧可通过Switch开关控制：输入框input/Cascader级联菜单核心功能代码实现1、左右两侧均为自定义组件1）修改QueryBuilder组件的配置信息<QueryBuilder disabled={disabled}
2022-03-18 17:54:06
1475
原创 【避坑指“难”】Antd Cascader实现悬浮提示Tooltip功能
Antd文档看了几圈下来，没有给出直接配置悬浮提示Tooltip的入口，该功能和自定义新增功能差不多（【避坑指“难”】Antd Cascader实现自定义新增功能），需要重新修改下渲染逻辑。核心代码1、 对Cascader中的options进行遍历操作 options={handleCascaderTooltips(options)}handleCascaderTooltips()方法export const handleCascaderTooltips = (opt: any) => {
2022-03-14 15:10:40
1783
2
原创 【避坑指“难”】Antd Cascader实现自定义新增功能
效果图如下：可以自定义在某一层实现数据新增代码实现对Cascader中的options做处理 <Cascader allowClear expandTrigger="hover" options={customerOption} />const customerOption = handlecustomerOption(showoptions);const handlecustomer
2022-02-18 18:26:02
1539
3
原创 【避坑指“难”】Antd Form动态表单删减，默认显示第一行
默认是通过Button按钮实现From.item的添加。如果我们默认至少输入一条数据，即默认显示第一行输入框，可以这么配置： <Form.List initialValue={[{}]}> </Form.List>
2022-02-17 14:31:24
1070
原创 【避坑指“难”】antd select 模糊搜索
<Select allowClear showSearch filterOption={(input, option) => { if (option && option.title) { return option.props.children.toLowerCase().indexOf(input.toLowerCase...
2022-02-10 16:29:55
1365
原创 自定义一个玩出花来的查询构建器React Query Builder
首先我们来看看官方给出demo：一键直达通过自定义Antd的Cascader组件，最后的效果如下：一、还原demo首先，我们需要把整个demo的架子还原，然后再此基础上才好做自定义拓展。1）引入所需库import QueryBuilder from 'react-querybuilder';import { AntDActionElement, AntDDragHandle, AntDNotToggle, AntDValueEditor, AntDValueSelecto
2022-01-29 15:25:57
2014
5
原创 【避坑指“难”】actionRef.current.reload()不生效
actionRef：Table action 的引用，便于自定义触发MutableRefObject<ActionType>什么时候会用到？ActionRef 手动触发：有时我们要手动触发 table 的 reload 等操作，可以使用 actionRef。interface ActionType { reload: (resetPageIndex?: boolean) => void; reloadAndRest: () => void; reset: ().
2022-01-29 14:40:07
4913
原创 【避坑指“难”】实现ProTable可编辑的拖拽排序
DragSortTable排序采用的react-sortable-hoc，需要提供rowKey来确定数据的唯一值，否则不能正常工作。暂不支持request请求的数据进行排序，可将request请求的数据存起来通过dataSource传入。⚠️：如果拖拽后列表没有重新排序，很大原因就是没有传入dataSource导致的。所以在request里请求到的数据还需要存入dataSource才行。ProTable配置<ProTable rowKey="index" column.
2022-01-29 10:49:02
2930
4
原创 【数据可视化】AntV L7实现地图可视化，DrillDownLayer钻取异步获取数据，悬浮预警框
中国地图展示demo如下：一、钻取地图的使用钻取地图支持两种可视化类型填充图：在地图上显示每个区域，根据区域值设置区块填充颜色气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小1）构造函数scene L7 scene 对象option 行政区划配置项drillDepth number 下钻深度 0 | 1 | 2 1 市级 2，县级customTrigger 是否自定义下钻交互，默认 falsedrillDownTriggerEvent 向下钻取的触发事件 ⛔custom
2022-01-16 17:16:03
2536
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人