- 博客(54)
- 收藏
- 关注
RSS订阅原创 vite-plugin-pwa配置详解
随着项目越来越庞大或者需求越来越复杂，有时候我们需要，缓存某些特定的路径文件，或者请求类型，以及单独设置js或者html的缓存时间和个数，这个时候我们就需要用到配置/**/***/ method?/**options?: {/**/**/**handler: 取缓存的策略，有五种CacheFirst：缓存优先CacheOnly：仅使用缓存中的资源：网络优先：仅使用正常的网络请求：从缓存中读取资源的同时发送网络请求更新本地缓存method。
2023-05-26 11:08:16
3573
原创 一文搞懂TS中的泛型
为了便于大家更好地理解f泛型，我们先来举个例子，在这个例子中，我们将一步步揭示泛型的作用。首先我们来定义一个通用的identity现在，我们将identity这里identity的问题是我们将number类型分配给参数和返回类型，使该函数仅可用于该原始类型number。但该函数并不是可扩展或通用的。很明显这并不是我们所希望的。所以当我们想要定义一个变量不确定类型的时候我们该怎么做呢，其实有两种方式：使用any我们失去了定义应该返回哪种类型的能力，并且在这个过程中使编译器失去了类型保护的作用。
2023-05-04 17:25:16
2203
原创 一看就懂的虚拟列表
前言在前端开发过程中，有时候会遇到一些不能使用分页来加载数据的情况，因此当我们需要渲染上十万条数据的时候，可能会造成渲染的卡顿，导致用户体验特别不好，那么对于这种情况我们该怎么去解决呢？这个时候就不得不提到虚拟列表什么是虚拟列表虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。假设有10万条记录需要同时渲染，我们屏幕的可见区域的高度为550px,而列表项的高度为55px，则此时我们在屏幕中最多只能看到10个列表项，那么在渲染的
2021-09-30 10:34:20
12680
6
原创 手动实现一个react的message组件
手动实现一个react的message组件组件目录如下：Message入口文件// index.tsximport { useState,useEffect } from 'react';import * as ReactDOM from 'react-dom';import Msg from './Msg';import { MessageApi,List } from './config';import './index.less';let add: (L: List) =&g
2021-08-16 16:59:56
1486
原创 手动实现一个Vue插件
手动实现一个Vue插件在web开发过程中，实现一个全局的定制化组件是很常见的需求，下面会以message组件为例子，来自己手动实现一个全局的message组件，分别用vue和react两种方式来实现，vue的message对照element-ui，而react的message对照antd，本篇文章会首先介绍vue的实现方法，下一篇会介绍react实现方法我们看antd或者element不难发现，其实message这样的全局组件和常规组件不同，他暴露的不是一个组件而是一些调用API// element-
2021-08-16 16:58:35
516
2
原创 Typescript中type和interface到底有何区别
Typescript中type和interface到底有何区别使用过ts的伙伴都知道，在一些类型定义，使用type和interface都可以实现相同的效果，但是我们在使用中其实很少会去关注他们的区别点，今天趁着有空，我来学习总结一哈相同点都可以用来描述一个对象或者函数// interfaceinterface Info { name:string; age:number;};interface SetInfo { (name:string,age:number):viod
2021-07-09 10:28:53
936
原创 canvas理解：一看就懂的save和restore
一看就懂的save和restoresave：用来保存最近一次的Canvas的状态。restore：用来获取save保存的Canvas之前的状态。防止save后对Canvas执行的平移、放缩、旋转、错切、裁剪等可以改变画布的操作对后续的绘制的影响。下面我会从颜色属性接平移属性对save和restore做解析，至于其他的放缩、旋转、错切、裁剪我就不一一说明，原理都是一样的，感兴趣的自行实验颜色属性<script> const canvas = document.getEleme
2021-07-06 11:29:50
4887
2
原创 canvas实现取色器
// 取色器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>取色器&
2021-07-03 21:11:09
960
原创 canvas之----探照灯
// 探照灯<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>探照灯&
2021-07-03 21:09:17
312
原创 canvas之-------水滴扩散特效
// 水滴扩散特效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水
2021-07-03 21:07:14
1065
原创 canvas之---刮刮奖
// 刮刮奖特效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>刮刮
2021-07-03 21:03:40
241
原创 canvas中的合成------globalCompositeOperation
canvas中的合成------globalCompositeOperation我们知道canvas其实就是一层一层的图层，后画的图案会覆盖到前面图案的上面，通过一层一层叠加的方式呈现到我们眼前，如下图所示<body> <canvas id='canvas' width="600" height="500"></canvas></body><script> const canvas = document.getElementByI
2021-07-03 20:57:29
767
2
原创 从零手动实现redux/react-redux
浅谈对redux/react-redux的理解以及手动实现redux/react-redux什么是redux？为什么我们要用redux?引用官方的原话：Redux is a predictable state container for JavaScript apps.，用大白话说redux就一个容器，这个容器为我们提供了一种管理公共状态的方案，方便不同组件之间的状态共享。摆脱了层层透传数据的繁琐，利于项目数据的维护怎么自己实现redux既然redux是管理公共状态的方案，那么组件肯定有使用甚至更新
2021-03-04 17:52:45
197
1
原创 一看就懂的浏览器缓存
一看就懂的浏览器缓存什么是浏览器缓存？ 浏览器缓存其实就是，浏览器把通过http请求的网络资源存储在本地的一种行为。为什么需要浏览器缓存？可以加速资源的下载速度，提升页面加载速度减小服务器的压力浏览器缓存的资源去哪里了呢？Memory cache：这个表示存储在内存中，等下次获取的时候就不用重新下载，而是直接从内存里面获取，由于这种存储方式在进程退出后资源会被删除，所以一般用于存储一些脚本文件，或者外连的一些图片资源Disk cache：这个表示存储在磁盘中，等下次获
2021-03-03 17:39:01
598
2
原创 antd按需引入和自定义antd类名
antd按需引入和自定义antd类名一：antd样式引入有两个方式一次性全部引入（不推荐）一次性全部引入antd的样式，打包的时候样式文件会变得很庞大，导致第一次加载的时候需要的时间很长，用户体验差// 入口样式文件引入样式@import 'antd/dist/antd.less';按需引入（推荐）（使用了tree shaking原理自动过滤没有被引入的样式）按需引入antd的样式，打包的时候只有被使用的组件的样式才会被打包进样式文件，样式文件会小很多，第一次加载时间会快很
2020-09-15 19:30:55
9589
6
原创 解决Please use require(“history“).createHashHistory instead of require(“history/createHashHistory“)
解决Warning: Please use require("history").createHashHistory instead of require("history/createHashHistory") 最近接手了一个经过超级多人之手的项目，代码一运行F12，浏览器一堆warning，是的你没有看错，一推的warning，我当时就在想，之前开发的人是怎么开发下去了，作为强迫症的我，第一件事，解决warning，不怕大家笑话????解决了一天的warning今天主要总结其中一个关于Dva的wa
2020-09-08 19:43:54
3106
3
原创 webpack4中的devtool配置
webpack4中的devtool配置为什么有时候需要配置devtooldevtool配置选项是用来控制是否生成source map，以及如何生成source map什么是source map它是一个储存源代码和打包代码映射关系信息的文件，专门用于调试和debugsource map作用因为sourceMap是一个映射关系，所以可以把打包后出错的代码位置和源代码对应的代码位置对应，这样我们可以很快定位错误webpack4关于devtool的默认配置mode:developmen
2020-08-26 21:14:09
2194
原创 debugger for chrome调试代码
debugger for chrome调试代码安装debugger for chrome插件按f5开启debugger，这个时候会弹出框，让选择(我选择的是chrome)选择之后会弹出一个lanch.json配置文件其中name就是你这个调试的程序的一个名字，可以随便取url就是你这个程序启动运行起来的ip+port(比如：http:// 10.25.7.78:8080)修改其中的name和url{ // Use IntelliSense to learn ab
2020-08-26 20:47:16
613
1
原创 webpack4打包iconfont
webpack4打包iconfont在日常开发中，项目中引入一些图标是十分常见的事情，那么遇到这样的图标，我们在打包项目的时候该如何配置webpack呢？首先我们需要一个loaderfile-loader需要到iconfont矢量图标库下载相应的图标如果还不知道怎么从阿里矢量图标库下载并且应用下载的图标，可以看我之前写过的一篇文章iconfont使用的三种方式把下载好的矢量图标文件夹，放项目的font文件夹在index.css文件中引入iconfont.css文件/
2020-08-26 20:17:32
925
原创 webapck4图片引入打包
webapck4打包图片在webpack中loader通常会被用来打包一些webpack不能识别的非js文件，像图片这样的文件就需要借助一些特定的loader来实现打包上线运行，对于打包图片这样的文件其中涉及到的loader：url-loaderfile-loaderloader作用是否发送http请求适用的图片url-loaderurl-loader 会将引入的图片以 base64编码并打包到文件中，最终只需要引入这个dataURL就能访问图片了。当然，如果图片较大
2020-08-26 20:10:11
253
原创 webpack4样式篇(抽离压缩css)
webpack4样式篇(下)上一篇总结了样式打包的配置，这一篇主要总结如何抽离出css，压缩css，压缩js其中涉及到的plugin：mini-css-extract-pluginoptimize-css-assets-webpack-pluginterser-webpack-pluginplugin作用mini-css-extract-plugin把css抽离成单独的文件optimize-css-assets-webpack-plugin把抽离出来的css代码
2020-08-26 20:00:27
856
原创 webpack4打包样式篇(less/sass/css)
webpack4打包样式篇(上) 我们都知道webpack是模块打包机，他可以打包不同类型的文件，但是对于非js得文件，我们需要借助一些loader来帮助我们打包，这一小节主要介绍借助一些样式loader帮助我们打包一些.css，.less，.sass文件其中涉及到的loader有：style-loadercss-loaderless-loaderpostcss-loaderloader作用style-loader会把之前css-loader解析的css内容挂载到
2020-08-24 21:45:07
791
原创 优化if else这种嵌套过多的泥石流代码
优化if else这种嵌套过多的泥石流代码原始泥石流代码const showReplyTimePerson = () => { let showReplyInfo; // 判断状态是否是 已回复 或 已解决 或 已关闭 const replyInfo = ['reply', 'resolved','closed'].includes(currentStatusNameUs); // content是返回数据里面一个字段，我们判断是否是返回为空 if(cont
2020-08-19 21:10:22
309
原创 适用于所有react项目的国际化demo（一）
适用于所有react项目的国际化demo（一） 最近工作不是特别忙，所以就估摸着写一些和国际化相关的博客，毕竟国际化这个需求在现在的项目中还是比较常见的，你说也是奇怪，原本在我准备写文章之际，突然看到网上一个博主写的文章，在Hook中用国际化不会立即更新，需要再次刷新页面才会生效（由于我用的是calss组件），所以相当好奇，感觉Hook应该不会这么不智能吧。首先我用到的国际化库是阿里的：react-intl-universal其它废话不多说，直接上代码和效果图：这张是初次进来的页面图片
2020-07-25 23:18:44
430
1
原创 总结dangerouslySetInnerHTML的用法
总结dangerouslySetInnerHTML的用法你可以使用react的一个标签属性dangerouslySetInnerHTML，resTempalate`既可以是字符串也可以是带标签的模板<div dangerouslySetInnerHTML={{__html: resTempalate}} ></div>双大括号{{}}，是react的写发，第一个大括号是表示这是jsx语法，里面的大括号表示这个属性接受对象形式的参数{__html: resTempalate
2020-07-19 22:14:29
2983
原创 前端实现html转canvas，html转img，html转pdf
前端实现html转canvas，html转img，html转pdf 最近项目上有一个需求就是由纯前端html转化生成PDF，开始也是一脸蒙蔽的，但是咱也不能说不会做啊是吧，毕竟现在找份满意的工作也不容易????想要实现这个功能需要借助两个包html2canvasjspdf我的实现思路如下利用dangerouslySetInnerHTML可以吧后端返回的html字符串模板渲染，如果不懂可以看我的另外一篇文章总结dangerouslySetInnerHTML的用法利用``html2c
2020-07-19 22:00:02
877
原创 getBoundingClientRect()方法获取Dom元素与浏览器窗口的位置
获取Dom元素与浏览器窗口的位置（二）----- getBoundingClientRect()方法 getBoundingClientRect()这个方法可以在不需要额外传参的情况下获取Dom元素的位置，但是值得注意的是，他获取到的位置是可视区范围的，不包括文档滚动的距离下面我们用一张图来表示他获取到的Dom元素相关信息上面的那张图让我们对getBoundingClientRect有了一个整体的初步认识，为了更加直观和细致的感受getBoundingClientRect的用法，下面我打算用一个
2020-07-15 22:13:00
3457
原创 前端安全问题之----XSS
前端安全问题之-----XSS 各行各业“安全”问题都是一个很大的话题，在IT中我们可以把安全问题按照发生的区域分，可以分为后端安全问题和前端安全问题，作为一名前端开发，这篇文章我们就先来总结一哈给前端有关的安全问题咯。XSS攻击 又叫跨站脚本攻击，主要是通过用户输入或者其他方式，来向我们的程序中注入一些带有危险行为的代码，一旦我们没有很强的防御意识，去执行了这段危险代码，我们的程序就会受到相应的攻击 常见的有：留言板/富文本(持久性攻击)通过修改URL参数的方式加入攻击代码htt
2020-07-06 22:08:50
301
原创 超级详细的css的position属性
超级详细的css的position属性position: staticCSS定位中的默认值。当元素不设定任何position属性时，默认用static，表示没有定位，元素出现在正常的流中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
2020-06-27 15:20:31
1539
3
原创 增加页面和代码健壮性（二）
增加页面和代码健壮性（二）使用背景当我们在项目中想要访问深层结构数据的某一个值得时候，一般都是通过xxx.xx.x得形式来获取，当然这样的获取方式并不安全，很有可能会遇到错误提示Uncaught TypeError: Cannot read property...从而导致程序被迫中止当然如果加上对每一层数据得前置校验检查，前面得代码会变成xxx && xxx.xx && xxx.xx.x，这样得代码显得既坠余又不美观// 例子let test = {
2020-06-27 07:51:08
321
原创 Iconfont使用的三种方式
Iconfont使用的三种方式 作为一个前端开发，项目中用矢量图标是家常便饭，最近笔者项目中正好有使用，所以就抽空总结了一下阿里图标库的三种使用方法（笔者项目中用到的是Symbol 引用方式）矢量图标库使用步骤如下：首先需要登录阿里矢量图标库 阿里矢量图标库：https://www.iconfont.cn/挑选你需要的矢量图标并加入购物车点击步骤1把心仪的图标加入购物车加入完毕后，点击步骤2准备下载你选好的图标代码点击步骤3所示的下载代码按钮，把你选好的图标的实
2020-06-17 22:35:42
1334
原创 获取元素宽高和距离定位父级的距离
获取元素宽/高和距离定位父级的距离获取元素宽高offsetWidth/offsetHeight获取元素的宽度和高度（包含边框和内边距）clientLeft/clientTop取元素左/上边框宽度clientWidth/clientHeight获取元素宽度（不包含边框）计算公式：offsetHeight = 元素高度+元素上内边距+元素下内边距+元素上边框+元素下边框offsetWidth = 元素宽度+元素左内边距+元素右内边距+元素左边框+元素右边框clientLeft =
2020-06-16 21:22:32
9561
原创 获取鼠标坐标常用方法
获取鼠标坐标常用方法offsetX/offsetY，鼠标点击位置离事件元素边框的距离，事件元素左上角坐标为（0，0）clientX/clientY，鼠标点击位置相对于浏览器（这里说的是浏览器的有效区域）的距离，不包含滚动距离pageX/pageY，clientX/Y+横/纵向滚动的距离<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
2020-06-16 21:20:31
3209
原创 面试题之拖拽元素
点击拖拉获取鼠标点下时候距离子元素边框的坐标位置（x蓝色线做表示的距离）父元素区域相对于浏览器有效区域的坐标位置（drgeX黄色线所表示的距离）移动的时候相对于浏览器有效区域的坐标位置（x1红色线代表的距离）计算移动的距离left = x1 - x - drgeX （left = 红色线坐标长度 - 黄色坐标长度 - 蓝色坐标长度）<!DOCTYPE html><html lang="en"><head> <meta charset="U
2020-06-16 21:16:40
410
1
原创 CSS实现视觉上的游泳圈
CSS实现视觉上的游泳圈 接着上一篇说一下第二到道css面试题，用css3实现游泳圈实现结果如下实现代码如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>游泳圈</title><style type="text/css"> .swimming1{ position: relative; width
2020-06-11 18:51:45
495
原创 CSS实现折角样式效果
CSS实现折角样式效果 最近朋友找工作，给我一套面试题，其中一个三道题，两道都是css有关的，一道是用CSS实现折角样式效果最后的实现效果如下：实现思路如下：用linear-gradient实现戒掉右上角的效果用::after实现一个小矩形用linear-gradient截去小矩形的一半用box-shadow制造阴影效果用linear-gradient实现截掉右上角的效果background: linear-gradient(225deg, transparent 32px, p
2020-06-11 18:47:07
2828
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人