weixin_44294593的博客

原创 各种异步被执行的时机

（设置0被认为是没有设置），它可能排在其他宏任务（和延时队列任务同级别）之前（不可能在微任务之前，微队列任务的优先级最高），那么它的执行时机是当这个超时时间到达前，回调函数会被加入队列排队，如果第二个参数设置的足够小。requestAnimationFrame（与延时队列同级别任务，但和帧相关）ResizeObserver（与延时队列同级别任务，但和帧相关）IntersectionObserver（总是在宏任务之后）MessageChannel（与延时队列同级别任务）setTimeout（延时队列任务）

原创 vue样式scoped原理

vue中可以在style标签上增加属性 scoped，来达到“当前组件定义的样式不会影响其他组件的样式”的效果。同时还可以对特殊的样式选择器单独配置/deep/>>>::v-deep来打破这种限制。

原创 SSE 和 Server Push(http2.0)

SSE，基于事件流的服务端推送，是HTML5的新特性，除开IE/Edge的主流浏览器都支持。它允许客户端与服务端建立连接后，服务端单方面向客户端推送实时消息。是基于HTTP的长连接实现的。

原创 ️文件下载

这种方式会直接产生下载提示，用户选择了下载存放位置后就不需要管它了，表现为响应快这样文件的下载会直接，不会有“点击下载还需要等待一端时间才会弹窗下载位置选择”的情况。

原创 前端优化- 图片优化

NextJs的Image组件的解决方法是”在img标签外套一个span标签，在使用组件的时候传入宽高“，这样将内部图片的活动区域进行限制，从而减少布局修改频率。在少量图片/小图加载的时候可能对网站的性能影响不大，但是如果一旦出现对网站产生性能影响的时候就需要考虑一些关于图片优化的方案，所以有了这篇图片优化记录。表现出来的效果是”在需要加载图片的时候会更快的显示图片“。因为它预先加载了，现在需要做的就只有显示。表现出来的效果是”视图内的图片先加载，视图以外的图片在达到某个阈值的时候再加载进来“。

原创 如何让图片(文件)直接触发下载

需要在响应头设置对应的头部，让浏览器知道当前的资源作为附件下载，而不是显示在页面上。

原创 _为什么需要箭头函数

答：消除函数的二义性。function 函数可以 fun（）调用，也可以 new 调用，这种设计不太好，所以设计了 class 来 new，不可以直接调用，又设计了箭头函数来直接调用，不可以 new。这也是回答普通函数和箭头函数区别的依据。

原创 深克隆

相对于①的好处是不会丢掉undefined、可以clone循环引用对象。会将undefined丢掉、克隆循环引用会报错。比如 indexDB、webworker。，这些是不能被结构化克隆算法克隆的。BOM新方法，兼容性差。

原创 「你需要知道的」事件冒泡和事件捕获&阻止事件冒泡

文章来源：https://juejin.cn/post/6844903834075021326#heading-1简介：事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。事件冒泡： 事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。事件捕获： 与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。阻止事件冒泡：1、event.stopPro

原创 git 常用命令

git init 初始化git status 查看当前分支/提交。。状态git diff 查看当前没提交/没有加入缓存的文件的改变git log 查看提交日志q 退出git log版本回退：git reset /版本号/ 就可以回到指定版本，git reset HEAD^ /文件名/就可以单独对文件进行回退git reset HEAD^^ 回退到上上个版本git reset HEAD~2 回退到上上个版本...

原创 react children的多样性

react children 作为传递数据的方式之一，他可以接受element/string/函数/数组多种方式。class Mclass Menu extends Component { render () { return ( <ul>{this.props.children}</ul> ) }}

原创 插入排序、冒泡排序、快速排序

插入排序【类似摸牌排序】 let handle = []; handle[0] = ary[0]; // 开始随便拿一张牌 for (let i = 1; i < ary.length; i++) {//从第二张开始循环摸牌 const A = ary[i]; for (let j = handle.length; j >= 0; j--) { // 将摸到的牌和手里的牌循环对比 const B = handle[j]; if (A

原创 移动端适配

对于移动端适配有多种方式，如：百分比：宽度用百分比，高度不限，相对父元素；vm|vh：知道 （100vw和100vh）的都知道，1vh或者1vw就代表着高度或者宽度的百分之一，如果一个设备的宽度为375，（我们就可以把这个宽度设置为100vw,高度为100vh）,里面有一个div，高度为37.5px，宽为75px那我们就可以把他的高度写为 10vh，宽度为20vw；神奇的地方来了：此时当我们的设备发生变化了，div的大小也会随之改变。假如设备的宽度增加到原来的两倍 750px，那么这div的实际宽度就

原创 vue如何实现『数组』的响应式

上源码，加上自己的理解：// 拿到数组的原型const arrayProto = Array.prototype// 以数组的原型创建一个自己的对象，《创建一个对象作为拦截器》// 这里暴露出去后会在 别处 <observe> 使用到，用于对数组类型原型的改变，// 使其在调用push等方法时会经过下面defineProperty中定义的方法，export const arrayMethods = Object.create(arrayProto) // --------①//

原创 react中setState是同步还是异步

先说一下结论：同步代码块中异步代码块中异步同步在非事件回调和setTimeout下，比如react的生命周期中，setState 的代码是异步执行的。componentDidMount() { console.log(this.state.val); // 0 this.setState({ val: this.state.val + 1, }); console.log(this.state.val); // 0 在这个同步代码块

原创 【1】每天一个小技巧-监听页面显示隐藏

原创 vue 组件之间数据传递11种

1、this.$root.xxx // 该变`xxx`用到的地方可以响应式变化2、props// 存在祖先和后代的限制3、evenBus // **不**存在祖先和后代的限制4、this.$observe // 可以把数据变为响应式的5、provide/inject // 存在祖先和后代的限制6、vuex // as we know7、浏览器缓存 // localstorage... 有时可以利用8、window // localstorage... 有时可以利用9、this

原创 vue2+jsx

// babel.config.jsmodule.exports = { presets: ["@vue/babel-preset-app"],//没有的话jsx语法不行};// *.vue<script>export default { name: "jsx", data() { return { count: 2, }; }, methods: { getCount() { console.log(this.co

原创 vue 利用observe实现组件之间数据共享

原始count为 0 ，点击4次后为4import Vue from "vue";const oCustomObserve = Vue.observable({ count: 0 });export { oCustomObserve };在这里插入图片描述

原创 字符串得相关方法

var oStr = `abcd`;[...oStr] // [a,b,c,d]oStr.split('') // [a,b,c,d]oStr.split('').reverse().join(``) // `dcba`oStr.repeat(2) // `abcdabcd`oStr.startWith(`ab`) // trueoStr.endWith(`cd`) // trueoStr.padStart(7,`*#`) // *#*abcdoStr.padEnd(7,`*#`) // a

原创 前端上传文件 ajax发送FormData，后端如何接收

前后端分离且跨域的情况下form表单提交数据，且数据中包含文件提交上传解决方法 及 步骤：1 前端用formdata()的方式提交 let form=document.getElementById('form') var param = new FormData(form); let config = { //添加请求头 headers: { 'Conten...

原创 部分react小常识，新手观看

react只是一个视图层框架，只解决数据渲染的问题常常与其它框架结合使用前端自动化测试：react函数式的编程利于测试，向函数传值即可测试react 安装create-react-app <项目名>index.js 是整个项目的入口文件自动化测试文件 App.test.js下面是组件的一种写法import React,{ Component }...