Blacktdfj-优快云博客

原创简单概括 vue2 的响应式实现方式

vue2 通过数据劫持来追踪数据的变化，具体涉及 Object.defineProperty。

2023-03-15 22:18:36 322 1

手抄：浏览器性能优化-硬件加速一个dom节点对应了一个渲染对象，渲染对象依然维持着dom树的树形结构，渲染对象将知道如何绘制一个dom节点的内容，它通过向一个绘图上下文发出必要的绘制调用来绘制DOM节点渲染层 RenderLayer处于相同坐标空间（z轴空间）的渲染对象，都将归并到同一个渲染层中，对于满足层叠上下文条件的渲染对象，浏览器会自动为其创建新的渲染层，条件如下：根元素display不为static的opacity < 1有css filter属性有css mask属性

2022-03-28 14:49:34 666

原创同源策略保护了什么、如何规避同源限制

同源策略保护了什么、如何规避同源限制基本照抄阮一峰的博客：浏览器同源政策及其规避方法同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它帮助阻隔恶意文档，减少可能被攻击的媒介。例如cookie窃取，如果没有同源策略，当用户从网站a退出，进入另一个网站b时，网站b可能就拿到了用户在网站a中存储的cookie，泄露了用户的信息或伪装成用户向网站a的后端发送请求。同源的要求：协议、域名、端口号相同要求同源的场景：如果不同源，以下三种行为会受到

2022-03-27 21:13:36 5402 2

原创 Cookie 简单认识

前端通过js可以获取当前域的cookie，js使用document.cookie可以获取和设置cookie后端在报文里可以使用setCookie设置cookiecookie有如下几个字段：name 名称value 值domain 域 cookie是不可跨域的HttpOnly 出现则只能由服务端读取，但是这个字段前后端都可以设置path 只有在domain下的指定路径(path)下才会被发送expires 过期时间secure 出现这个字段则只有在https或tls的情况下才会被发送限

2022-03-19 16:59:44 727

原创 JS 原型与原型链

原型是js中非常重要的东西，其串起了很多常用的js实现最开始js没有原型这个概念。为什么会出现原型呢？假如我们有一个对象：const obj = {}然后我们添加一个属性，一个方法obj.name = 'Tony Dog'obj.sayName = function () { console.log(this.name)}然后我们运行一下这个函数obj.sayName() // Tony Dog那假如我有十个类似于obj的对象呢，我想给他们都执行一下sayName方法，就只能单

2022-03-17 16:46:04 204

原创散记，无用之人30分钟速通日常实习

投日常实习的故事告一段落了，拿了两家公司的offer待遇都差不多，刚好够在北京或上海吃饱饭的，暂时决定是去北京的知乎，继续提高一下技术，然后准备以后的招聘。如果上学期没有发生过那些比较意外的事情，以及大二两个学期的荒废，应该能拿到更好的offer，再怎么说，还是比较清楚自己的实力的。加油。...

2022-03-16 11:11:47 159

原创 React hook useEffect 与计时器 setInterval

import React, { useEffect, useState } from "react";export default function App() { const [counter, setcount] = useState(0); useEffect(() => { setInterval(() => { setcount((pre) => pre + 1); }, 1000); }, []); return ( &l

2022-03-14 19:40:28 1991

原创 JS Array.prototype.fill 值引用问题

Array.prototype.fill = function (value) { const me = this; for (let i = 0; i < me.length; i++) { me[i] = value } return me}const arr = new Array(3).fill(new Array(3).fill(0))console.log(arr) // [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]c

2022-03-08 15:39:44 278

原创 JS 手写bind

Function.prototype.myBind = function (thisArg, ...args) { if (typeof this !== 'function') { throw new Error ('Not a function!') } const _this = this const fnBound = function (...args1) { const self = this instanceof _this ? this : thisArg _this.a

2022-03-06 21:24:46 184

原创 WebSocket JS

参考阮一峰博客：WebSocket 教程优点：HTTP协议只能由客户端发起，服务器无法主动向客户端推送消息。WebSocket可以。特点：同HTTP一样，WebSocket建立在TCP连接之上与HTTP有良好的兼容性，默认端口为80和443，握手阶段采用HTTP协议，能够通过各种HTTP代理服务器数据格式轻量，通信高效可以发送文本与二进制数据没有同源限制，不过可以手动设置跨域协议标识符是ws，加密的是wss，服务器网址就是urlExample：客户端代码：// client.js

2022-03-06 18:51:36 7140

原创 JS 深拷贝

function deepClone (obj) { if (obj === null) return null // 下面这句替换为 (typeof obj !== 'object') 也可 // 使用instanceof的时候注意其与！的优先级，!的优先级更高，稍有不慎则会爆栈 if (!(obj instanceof Object)) return obj if (obj instanceof Date) return new Date(obj) if (obj instanceof

2022-03-03 21:27:00 138

原创图片懒加载 2种方法

原生js参考：原生js实现图片懒加载（lazyLoad）当元素距浏览器顶部的距离小于滚动距离与视口高度之和时，我们可以得知，元素已经开始进入视口。缺点：滚动行为很密集，性能较差。window.onload = function () { var imgs = document.querySelectorAll('img') function getTop(item) { return item.offsetTop } function lazyLo.

2022-02-22 17:32:37 523

原创 async和await

目的：将异步任务处理得像同步任务。特点：语义化明确（async表示有异步任务、await表示等待右侧结果）、内置执行器（不用手动一步一步执行）、适用性广（await后可以跟原始类型或promise对象）、返回一个promise对象。async function test () { let n = await new Promise((resolve, reject) => { setTimeout(() => resolve(1), 300) }).then(console.

2022-02-21 13:43:46 552

原创 useRef与useImperativeHandle（+forwardRef）使用介绍/父子组件通信

useRefref是用来获取dom元素，然后执行某些方法，获取某些属性的。useRef创建的实例会保存一个叫current的对象，每次重新渲染都会返回同一个对象，实现跨生命周期保存数据，而且current里面发生变化并不会导致组件重新渲染。import React, { useRef } from 'react'function Father () { const inputRef = useRef(null) function foo() { inputRef.c

2022-02-19 00:29:55 839

原创 jwt与base64和base64url

base64编码效果：使用64个可打印的字符来表示二进制数据的方法。A-Z a-z 0-9 + /一共64个字符，本质上是进行表示，并不是加密（但如果打乱字符顺序，也可以达到加密的效果）具体原理见博客：[一篇文章弄懂Base64编码原理_mijichui2153的博客-优快云博客]()base64Url编码base64编码将’+’、’/‘替换成’-’、’_’，将=去掉，就成为了base64url编码，因为这三个字符在url有特殊意义。JWTjson web tokenJWT是一种用户认证

2022-02-15 16:11:05 5772

原创预检请求_

只有复杂请求才发送预检请求。非简单请求是复杂请求。简单请求只有：只可能有GET + POST +HEAD三种请求类型。而且必须满足下面的2和3两个特征，（POST请求也不全是简单请求，后面有例子）不能有自定义头字段，只能有以下几种：AcceptAccept-LanguageContent-TypeContent-LanguageContent-Type的值只能是以下三种：text/plainmultipart/form-data 上传文件用的application/x-w

2022-01-24 00:30:01 6017

原创 HTTP 报文结构

http报文结构请求报文：请求行回车换行首部行回车换行···首部行回车换行空行（回车换行）实体体GET /somedir/pge.html HTTP/1.1Host: www.someschool.eduConnection: closeUser-agent: Mozilla/5.0Accept-language: fr(data data...) 请求行：方法字段空格 URL字段空格 HTTP版本字段回车符换行符首部行：首部字段名：空格值回车

2021-12-21 14:23:28 143

原创前端，从输入URL到用户看到页面，简述

参考优质博文：从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！浏览器分配一个进程(浏览器渲染线程)给这个页面页面是多线程的：http请求会被分配一个异步http请求线程，页面渲染分配一个GUI渲染线程，JS代码涉及到JS引擎线程、事件触发线程、计时器触发器线程代码中的setTimeout和setInterval等计时器，会放入计时器触发器线程，到时间了回调函数就被推入执行事件队列事件触发线程是浏览器给JS引擎线程开的外挂，用来控制事件循环的。JS引擎线程用于执行JS代码

2021-12-12 21:33:45 895

原创 JS cookie与web存储（localStorage与sessionStorage）

cookie<script> document.cookie = 'a=1' console.log(document.cookie) // style=null; a=1</script>设置了cookie，请求会携带给服务端。cookie的构成：名字name值value域domain路径path过期时间expires安全标志secure设置了cookie后，只要请求的域和路径正确，就会自动携带cookie框架中也许需要在配置中手动设置withCre

2021-12-10 20:24:43 773

原创 (抽象)外观模式 JS实现 ES5 and ES6 node环境下的xml解析

每次拿到一些作业。。。我都试图用JS这门流氓一般的脚本语言实现，之前写了c语言的简单版预处理（包括宏定义替换，.h内容引入和不是很完善的注释删除）这次的外观模式本以为是比较简单的实现，毕竟就几个类倒来倒去。事情出乎我的意料，JS甚至耍了我这个初学JS的使用者的流氓，我接受不了。原来的模式：用户直接接触所有的子功能，自己决定实现什么效果。什么是外观模式：用户不关心功能的实现细节，我们只提供一个能使用功能的接口给用户，中间到底经历了多少个步骤，用户是看不到的。我们在用户和子功能之间添加一层外观类，

2021-11-29 21:34:20 502

原创 JS 实现原生防抖函数时遇到的onclick和行内onclick的区别问题

在html的onclick行内添加一个方法，每次触发点击事件都会执行该方法看似没什么问题，但如果这个方法返回的是一个方法呢，如果我们想让返回出来的方法得到执行，就要在行内的末尾加上一对 ()结果就是每次执行返回出来的内部方法都是新的，闭包？我们想要使用的闭包莫得了。解决方案 2种：在script标签中给dom元素的onclick赋值这个方法的执行，返回出来的内部方法就可以应用闭包使用addEventListener给dom元素添加click事件，赋值依然为外层方法的执行<body&gt

2021-11-27 15:31:41 917 2

原创 JS 笔记继承原型式 + 寄生式 + 寄生式组合继承

原型式继承：将父级对象整个赋值给一个空函数的原型，然后new这个函数，将返回值传出去。因此外面的实例可以通过[[proto]]找到构造函数的prototype，沿着原型链找到父级的属性。基本实现：function object(father) { function Fun () {} Fun.prototype = father return new Fun()}let fa = { name: 'father', colors: ['red', 'blue', 'green']}

2021-11-25 21:56:28 524

原创 JS 笔记继承原型链 + 盗用构造函数 + 组合继承

原型链继承：子类的原型赋值为父类的一个实例，所有子类的实例将共享同一个原型包含的引用值。同时子类型在实例化的时候不能给父类型的构造函数传参。只能继承原型上的属性和方法，没法继承父类的实例属性。盗用构造函数继承：在子类的构造函数中调用父类的构造函数，并将this指向子类的实例，Father.call(this)。所以，可以传参。但是单纯调用父类构造方法无法赋予子类实例父类的方法，唯一的实现方法就是在父类构造函数中定义方法，效果为子类实例无法访问父类原型上的方法，而且函数不能重用（每个子类实例中继承的方法都是

2021-11-25 20:30:07 213

原创 JS 手写instanceof

是我疏忽了，居然没发instanceof的。instanceof的概念：判断右边的构造函数是否存在于左边实例的原型链上。简单来说，判断一个实例的类型是否为右边的构造函数。原型链的理解可以看我的另一篇。代码：function instance_of (L, R) { L = L.__proto__ while (true) { if (!L) return false if (L === R.prototype) return true L = L.__proto__ }}fu

2021-11-23 21:58:08 137

原创 JS 类型判断完善版

事情是这样的，typeof可以正确判断除了null之外的原始数据类型(typeof null === object)，instanceof可以判断复杂数据类型，但是不能正确判断基本数据类型(为什么？因为instanceof操作不了，操作对象必须是某一个构造函数的实例，我们没法往后面放构造函数)。先看一下typeof能做的事情：console.log(typeof undefined); // undefinedconsole.log(typeof 1); // numberconsole.log(t

2021-11-22 22:26:33 242

原创 JS 音效触发器 / 给动画添加音效

export default function audioPlayer(name, type, loop) { var pre = document.getElementById('audio-player-snowt') if (pre) { pre.parentNode.removeChild(pre) } if (!name || !type) return const body = document.body const au = document.createEle

2021-11-20 19:32:27 1766

原创 JS 函数柯里化 console.log(curry(柯)(里)(化) === curry(柯, 里, 化)) // true

参考优质博客：5.函数柯里化函数柯里化：允许在一次函数调用中传入数量不足的参数。调用了，但是不会返回结果，而是等待继续调用时传入剩余参数。看代码：function Sum(a, b, c, d) { return a + b + c + d;}const sum = curry(Sum)sum(1, 2, 3, 4) // 10sum(1)(2)(3)(4) // 10sum(1, 2)(3, 4) // 10curry函数实现：function curry(fn, ...arg

2021-11-18 21:54:21 665

原创 Ant Design Pro 不纯的新手入门

最近在写一个demo，最开始用的原生html和css、以及最初始的react脚手架起步刚开始搭建结构，出现了一个问题，脚手架的路由不是很方便配置解决：好兄弟建议我用umi配置项目，我说好，马上搭了一个然后出现了第二个问题：配置Layout的时候，logo和Menu部分起了冲突，初步分析判断：给logo的官方css代码复制过来没起作用，搞了半天没有解决（其实就是不想走出舒适圈，还没有复习flex），快高血压了，又去求助好兄弟，好兄弟建议我用antd pro，这个已经做的很完善了，没有什么问题，我说好，马

2021-11-18 21:03:31 1159

空空如也

空空如也