- 博客(57)
- 收藏
- 关注
RSS订阅原创 自定义console
let content = arg.reduce((acc, val) => acc + `%c ${val} `, '') // 内容。let content = arg.reduce((acc, val) => acc + `%c ${val} `, '') // 内容。console.sucess('成功', '112')console.sucess('成功', '112')console.error('错误', '112')console.error('错误', '112')
2024-06-21 10:09:30
696
原创 文件加载失败的备用方式
img src="original-image.jpg" onerror="this.src='12.png'" width="105" alt="js onerr事件处理">console.log('加载异常触发')
2024-05-30 13:55:10
155
原创 EventSource 一个API 在页面关闭前，将小数据传递给后端（不接受响应）
【代码】EventSource 一个API 在页面关闭前，将小数据传递给后端（不接受响应）
2024-05-30 13:51:24
476
原创 Session + JWT + Cookie
Signature: 使用Header和Payload, 加上服务器的密钥, 按照指定的签名算法生成签名.例如, 使用HMAC SHA-256算法生成签名。完成验证: 如果签名验证通过且JWT未过期, 说明JWT是有效的, 服务器可以信任JWT中的用户信息.提取并解析JWT: 服务器从请求头中提取JWT, 并将其分成Header、Payload和Signature三部分.用户登录 : 用户通过前端提交登录请求(通常包含用户名和密码)到服务器.
2024-05-29 17:58:55
511
原创 localForage.js
localStorage：localStorage是浏览器提供的一种持久化存储解决方案，用于以键值对形式存储字符串数据。如果浏览器既不支持IndexedDB也不支持WebSQL，则localForage.js将回退到使用localStorage作为底层存储引擎。使用localForage.js，您可以轻松地在浏览器中存储和检索数据，无论是临时数据还是持久化数据。localForage.js会根据可用的存储引擎自动选择最佳的选项，并在后台处理与底层存储的交互。
2023-09-15 09:15:10
410
原创 浏览器的事件循环
总结：现代浏览器通常有一个主进程（浏览器进程）、多个渲染进程（用于运行页面，每个页面一个渲染进程）、一个共享的网络进程（处理网络请求），以及一个共享的GPU进程（处理图形渲染）。其实在我们电脑的操作系统中，每一个运行的程序都会由自己的进程（可能是一个，也可能有多个），浏览器就是一个程序，它的运行在操作系统中，拥有一组自己的进程（主进程，渲染进程，网络进程，GPU进程....）各个进程之间是相互独立的（这样不会因为一个进程的问题导致其他的进程奔溃不能使用），而进程之间又是需要相互协作的。
2023-08-25 14:11:25
801
原创 echart 放大后请求数据，保持X轴状态不变，Tooltip数据索引不对问题
03：此时Tooltip显示对应的索引数据，是旧数据的索引。01：等放大echart时候，去请求后端数据，重新渲染。02：渲染新数据后，X轴的状态不变化。
2023-05-18 15:52:55
377
转载 谷歌浏览器插件content_scripts、background、popup通信
前期页面准备manifest.json|content_scripts : 浏览器里面使用的,和页面共享DOM,不共享JScontent-scripts不能访问绝大部分chrome.xxx.api，除了下面这4种： chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest) chrome.i18n chrome.runtime(connect , getManifest , ge.
2022-05-25 11:22:59
10395
2
原创 echart 使用min max做为坐标起始点
一般情况下，数据都是和X轴点,数据是点对点的显示，也有其他情况下，一个坐标轴下显示两条曲线，并且大家的为维度不是对应的点对点的数据，同时又指定了坐标轴的范围，以这个范围作为起始点 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var xMin = 0; var xMax = 2500; var seaHeight = 5...
2022-05-24 11:31:00
1368
原创 echrat 点击任意地方，点击了知道是那根折线
<!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&...
2022-04-27 14:34:20
1830
2
原创 关于前端跨域的一次总结
以前对于跨域，一直很模糊，遇到的也不知道为什么，怎么去解决?于是自己研究了一下，怎么去解决这个问题！01：为什么产什么跨域？跨域是由于浏览器的同源策略产生的，确定一点这个东西是有浏览器产生的，和后端没有什么多大关系。02：怎么解决？既然是浏览器产生的，是不是可以绕过浏览器，是不是就可以解决了03：解决方案I： 反向代理nginxII：中间服务转发III：后端设置允许跨域（现在流行和常用方式）反向代理nginx下载并安装ngix,解压，其中默认前端静态文件放置在html文件中（当
2022-04-21 10:59:19
2542
原创 await 的认知
先说明await后面跟的两种情况，await等待的是后面promise的执行结果01：不是promsie（此时会将跟的值，转换为promise对象，promise.resolve(val)），02: promise直接运行promise.resolve(val)1.题目解析说明var a = 0；var fn = async()=>{ a =a+await 10; console.log(a);}；fn();console.log(++a);解析：...
2022-04-09 15:58:41
478
原创 输入地址栏的背后
01: 用户在地址栏输入关键字，地址栏会判断是搜索内容还是url地址 I: 搜索内容 => 浏览器默认搜索引擎加上搜索信息合成url II: url地址 => 浏览器加上协议(http|https)合成url 02: 按下回车，浏览器导航loading状态，页面还是之前页面，等待新的数据返回渲染 03: 浏览器进程通过进程间的相互通信IPC, 把url传递给网络进程 04: 网络进程接收到url地址后，先查找...
2022-04-07 11:07:19
251
原创 cookie session token 个人理解
cookie 存在于客户端session 存在于服务端(可能在服务端内存，文件，数据库)token 存在于客户端http 是无状态的，每次访问都是全新的请求，因此是无法记录是那个用户访问，也无法记录用户访问信息于是，当我们想记录每个用户自己操作了什么(比如用户自己购物车，加入产品，是加入到自己的购物车中)，或者下次查询看到的是自己当时的一些信息cookie：当用户登录到服务器，服务端Set-Cookie: “name=value;domain=.domain.com;p..
2022-03-24 11:12:51
114
原创 angularjs 封装的表格组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>an-table</title> <script src="./angular.js"></script&g.
2022-02-11 14:06:03
884
原创 babel中的polyfill和runtime
preset的由来如果转换某个文件下箭头函数，需要安装插件@babel/plugin-transform-arrow-functions于是可以执行babelsrc-ddist--plugins=@babel/plugin-transform-arrow-functions将src下的文件，拷贝到dist目录，并且使用插件，将箭头函数转换,也可以只针对单个文件编辑如果你对文件加入其它转换则需要在添加一个新的插件，于是使用一个配置文件更为方便些，于是出现了preset故使...
2021-10-13 09:45:41
646
原创 gulp-babel 安装小问题
npm上npm install --save-dev gulp-babel @babel/core @babel/preset-envconst gulp = require('gulp');const babel = require('gulp-babel'); gulp.task('default', () => gulp.src('src/app.js') .pipe(babel({ presets: ['@babel/env']
2021-10-09 11:23:01
155
原创 KOA中await next分析？
class Koa { constructor() { this.middleWaver = [] } use(fn) { this.middleWaver.push(fn) } };const app = new Koa(); const f1 = async function (ctx, next) { console.log('f1 >>'); await ...
2021-09-26 10:14:12
575
原创 手写一个Promise
classPromise1{constructor(fn){varthat=this;this.state="open";this.fnArr=[];this.result=null;fn(function(...arg){//修改状态that.state='ok';//...
2021-08-26 09:18:10
72
原创 canvas 从图片中提取颜色
<canvas id="canvas"></canvas> <script> let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); var img = new Image(); img.crossOrigin = 'anonymous'; img.src = "./1.png"; let im.
2021-08-17 10:44:48
1586
2
原创 vue nextTick源码原理分析
<div id="test">old</div> class Tan { constructor(dom) { this.dom = document.getElementById(dom); } nextTick(fn) { if (typeof Promise !== "undefined") { // 支持Promsie var p = Promise.resolve(1);..
2021-08-12 10:13:32
130
原创 HTTP 请求响应+缓存+握手
01:HTTP有哪些⽅法？GET请求书POST发送数据给服务器HEAD请求资源的头部信息,查看资源信息(大小)OPTIONS获取服务器支持请求方法，用来检查服务器的性能，在正式请求前，先进行一次预检请求。服务端返回一些信息，浏览器拿到之后，看后台是否允许进行访问PUT向指定资源位置上传其最新内容DELETE请求服务器删除Request-URI所标识的资源...
2021-07-22 16:26:14
203
原创 js 虚拟DOM 原理展示
<style> #main { border: 1px solid #666; padding: 5px; } .red { color: red; }</style> <div id="main"> </div>// 01思路： 虚拟dom是个对象，上面是对标签数据的描述 // tag:标签类型 props:标签属性 child子元素(字符串|VnDOm) const VnDOm .
2021-07-22 15:38:06
245
原创 频谱图 js+canvas
使用到了Colormap，来用数据对应颜色，在画布上显示其中碰到了一些坑，canvas的画布大小属性和style设置的不是同一个东西，这个和svg的一样 <button>+1 绘制</button><br /><br /> <div class="myChart"> <div class="info"></div> <canvas id="myCanvas" style="borde.
2021-07-22 15:33:43
1785
7
原创 vue webpack与优化！
01: 路由组件懒加载 component: () => import('./components/ShowBlogs.vue')02: prefetch 关闭prefetch 01: 移除 prefetch 插件 config.plugins.delete('prefetch') // 或者修改插件配置 config.plugin('prefetch').tap(options => { options[0].fileBlackl...
2021-04-16 11:32:57
1219
原创 React useEffect+useState ？
https://zh-hans.reactjs.org/docs/hooks-rules.htmluseState01:useState返回一个数组[值，函数]02:首次渲染的时候被创建(重复渲染不会再次创建),React会在重复渲染时记住它当前的值，并且再次渲染时，提供最新的值给我们的函数03:react记录的state的值，是怎么对应Hook中的数据？靠的是Hook调用的顺序来一一对应useEffectinfo1:不...
2021-02-19 11:58:51
860
原创 React Hook useContext？
/* useContext info: 解决子孙后代组件数据传递 01: 结合createContext一起使用 const testContent = React.createContext(themes.light); 02: 结合Provider，为后代组件使用 const val = useContext(testContent);*/export const ThemeContext = React.createContext();c.
2021-02-19 11:51:57
81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人