- 博客(39)
- 收藏
- 关注
RSS订阅原创 代码输出题
拿到getNameFunc函数，然后执行的时候是自执行，所以是window2.先拿到object.getNameFunc()的值再执行，箭头函数中的this是getNameFunc下的this，由于getNameFunc的调用方式是通过myobject调用的，所以this是myobject3.setTimeout的作用域里的this永远指向window。
2023-07-08 10:34:03
297
原创 一些忘了的东西（二）
在 JavaScript 第一个版本中，所有值都存储在 32 位的单元中，每个单元包含一个小的 类型标签(1-3 bits) 以及当前要存储值的真实数据。000: object - 当前存储的数据指向一个对象。1 : int - 当前存储的数据是一个 31 位的有符号整数。010: double - 当前存储的数据指向一个双精度的浮点数。100 : string - 当前存储的数据指向一个字符串。110 : boolean - 当前存储的数据是布尔值。如果最低位是 1，则类型标签标志位的长度只有一位；
2023-06-04 22:46:00
586
原创 useMemo和useCallback使用场景
简而言之，useMemo是用来缓存的。计算属性其实是函数的返回值，或者说指那些以返回一个值为目标的函数。有些函数，需要我们手动的去点击，去完成一些动作才触发。而有些函数，则是直接在渲染的时候就执行，在DOM区域被当作属性值一样去使用。后者，就被称为计算属性。而计算属性，最后一定会使用return返回一个值！
2023-04-02 18:33:19
5514
原创 react与vue的区别
vue：挂载前，先给每一个Data属性进行遍历，注册getter，setter，也就是reactive化。在getter中维护了一个用来收集依赖的对象。挂载中，一是把template/el转成render函数。二是创建一个updateComponent函数，在这个函数中会调用上一步的render函数。三(依赖收集过程)是给每个组件实例new 一个自己的Watcher对象，然后把updateComponent函数传入，此时watcher会立即调用这个函数，然后会调用组件的render函数去生成虚拟DOM。
2023-01-31 12:37:35
436
原创 react源码学习
1、fiber概述在现有React中，更新过程是同步的，这可能会导致性能问题。当React决定要加载或者更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，那React就会一鼓作气运行到底，中途绝不停歇。在此过程中浏览器渲染引擎处于挂起的状态，无法进行任何渲染，浏览器无法执行任何其他的任务，调用栈如下图破解javascript中同步操作时间过长的方法其实很简单——分片。
2023-01-31 12:34:07
220
原创 react18-代码规范-ts-仿网易云项目
因为react创建项目不像vue会提示需要按照xxx，react默认创建出的项目是不包含其他东西的，我们想集成typescript时，可以追加参数删掉一些无用文件变成下图我们会发现一个文件此文件引用特定于使用Create React App启动的项目的TypeScript类型声明。这些类型声明添加了对导入资源文件的支持，如bmp、gif、jpeg、jpg、png、webp和svg。它还添加了对导入CSS模块的支持。
2023-01-13 18:34:45
1157
原创 图片懒加载
类似于大型的淘宝商城、京东等网页，设计大量的商品图片信息，如果我们使页面包含的所有图片一次性加载完成，那用户体验很差。目前流行的做法是滚动动态加载，也就是懒加载，显示在屏幕之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示这样做的好处，一是页面加载速度快(浏览器进度条和加载转圈很快就结束了，这样用户的体验也比较好)，而是节省流量，因为不可能每一个用户会把页面从上到下滚动完。
2023-01-12 22:59:26
168
原创 VueDiff算法对比ReactDiff算法区别
当老 VNode 节点的 end 和新 VNode 节点的 start 相同时，这时候在 patchVnode 后，还需要将当前真实 dom 节点移动到 oldStartVnode 的前面，同时老 VNode 节点结束索引减 1，新 VNode 节点的开始索引加 1。只有旧节点有子节点而新节点没有，说明更新后的页面，旧节点全部都不见了，那么要做的，就是把所有的旧节点删除，也就是直接把DOM 删除。旧节点和新节点自身不一样，当两个节点不一样的时候，直接创建新节点，删除旧节点。
2023-01-10 12:24:53
918
原创 Vue挂载Dom与映射真实Dom流程
vue：template标签解析时，1.将模板字符串通过parse函数转换成为AST（抽象语法树)2.将AST通过generate函数转换成为render函数3.在这个render函数中又有很多h函数（createElement函数），调用这些h函数生成一个又一个对象，这些对象互相存在联系从而生成虚拟dom树。
2023-01-10 11:57:00
868
原创 token无感刷新
最近遇到个需求：前端登录后，后端返回和，当token过期时要求用旧token去获取新的token，前端需要做到无痛刷新token，即请求刷新token时要做到用户无感知。
2023-01-09 12:48:08
2925
原创 大文件分片上传
上传大文件时，以下几个变量会影响我们的用户体验上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等为了解决上述问题，我们需要对大文件上传单独处理。
2023-01-06 10:06:54
617
原创 各类包管理工具的使用
有几个字段是package必须填写的，会在执行npm init的时候填写：◎ name：项目名称，必需字段。◎ version：项目版本，必需字段。◎ main：入口文件。◎ license：项目遵守的许可证。◎ scripts：可运行的npm命令。◎ keywords：关键字。◎ author：作者。◎ description：项目描述。使用npm init -y可以简化必填的操作，默认都是yes。
2022-12-16 11:52:43
222
原创 react仿写airbub项目
◼◼ 组件内部state管理； redux的hooks代码； 其他hooks相关代码（比如自定义hooks）； 其他逻辑代码； 返回JSX代码； redux目前我们学习了两种模式，在项目实战中尽量两个都用起来，都需要掌握； 每个模块有自己独立的reducer或者slice，之后合并在一起； redux中会存在共享的状态、从服务器获取到的数据状态；◼ 对axios进行二次封装； 所有的模块请求会放到一个请求文件中单独管理；
2022-09-22 23:15:29
313
原创 微前端qiankun使用+踩坑
首先，qiankun并不是单一个框架，它在基础上添加更多的功能。以下是qiankun提供的特性实现了子应用的加载，在原有single-spa的JSEntry基础上再提供了HTMLEntry样式和JS隔离更多的生命周期子应用预加载全局状态管理全局错误处理。............
2022-07-15 22:17:19
7916
2
原创 实习知识点学习
什么是eslint?ESLint 是一个开源的 JavaScript 代码检查工具，它是用来进行代码的校验，检测代码中潜在的问题，比如某个变量定义了未使用、函数定义的参数重复、变量名没有按规范命名等等。ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。ESLint 使用 Node.
2022-06-20 21:36:11
418
原创 前端性能优化篇
性能优化防抖和节流对搜索框和提交按钮防抖，用户频繁点击只会最后发送请求对播放动画节流路由懒加载和图片懒加载路由懒加载采用箭头函数和import引入组件图片懒加载采用监听滚动距离，当滚动距离加可视化高度大于图片的offsetTop时再设置图片的src，可以用loading组件占位减少回流与重绘回流是dom元素尺寸或结构改变，重绘是元素的样式改变。回流一定重绘。即不要频繁操作dom图片优化小图片使用base64使用雪碧图(多图合一)webpack优化利⽤CDN加速: 在构建过程中，
2022-05-05 19:10:40
609
原创 计算机网络
http1.0和http1.1之间有哪些区别?●连接方面，http1.0默认使用非持久连接，而http1.1默认使用持久连接。http1.1 通过使用持久连接来使多个http请求复用同- -个TCP连接,以此来避免使用非持久连接时每次需要建立连接的时延。●资源请求方面，在http1.0中，存在-些浪费带宽的现象，例如客户端只是需要某个对象的-部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，http1.1 则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206 (Part
2022-05-04 17:28:10
1620
原创 TypeScript
每一样技术的出现都会让惊喜，因为他必然是解决了之前技术的某一个痛点的，而TypeScript真是解决了JavaScript存在的很多设计缺陷，尤其是关于类型检测的TypeScript的编译环境在前面我们提到过，TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境：我们需要在电脑上安装TypeScript，这样就可以通过TypeScript的Compiler将其编译成JavaScript；安装命令npm install typescript -g查看版本tsc
2022-03-30 17:37:14
1212
原创 Vue2响应式原理源码解读
vue三大核心系统Compiler模块：编译模板系统；Runtime模块：也可以称之为Renderer模块，真正渲染的模块；Reactivity模块：响应式系统；渲染系统，该模块主要包含三个功能：功能一：h函数，用于返回一个VNode对象；功能二：mount函数，用于将VNode挂载到DOM上；功能三：patch函数，用于对两个VNode进行对比，决定如何处理新的VNode；h函数的实现：直接返回一个VNode对象即可Mount函数 – 挂载VNode第一步：根据tag，创建HTML
2022-03-21 22:41:46
1265
原创 Vue3补充
非父子组件的通信这里我们主要讲两种方式：Provide/Inject；Mitt全局事件总线；Provide/Inject用于非父子组件之间共享数据：比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容；在这种情况下，如果我们仍然将props沿着组件链逐级传递下去，就会非常的麻烦；对于这种情况下，我们可以使用 Provide 和 Inject ：注意要引用data中的数据会有this问题，应将provide写成函数，只适用于上下级关系，不适用兄弟关系。如果data的数据会变化写成计算属性父
2022-03-03 23:19:54
563
原创 Vite的基本使用
什么是vite呢？ 官方的定位：下一代前端开发与构建工具；它主要由两部分组成：一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源但是，目前vite虽然已经更新到2.0，依然并不算非常的稳定，并且比较少大型项目（或框架）使用vite来进行构建；pvite的整个社区插件等支持也还不够完善；安装vitenpm install vite –g # 全局安装npm insta
2022-02-16 13:20:32
4760
原创 权限管理（Vue）
VUE权限管理思路：在login.vue中登录成功时，后端会返回token和该用户对应的权限，前端根据权限数据， 展示对应的菜单。点击菜单， 才能查看相关的界面。但是在login.vue获得的权限数据要在home.vue中使用，所以要把请求来的权限数据保存到vuex中login方法export const login = data => { return request({ url: '/login', method: 'POST', data })}lo
2022-02-05 20:47:40
14230
4
原创 一些忘了的东西。。。
复习1.剩余参数function a(...args) { console.log(...args);//1,2,3 console.log(args);[ 1, 2, 3 ]}a(1,2,3)2.手写bind//bind返回改变完this指向的函数Function.prototype.wyhbind = function (thisArg, ...args) { var fn = this; thisArg = thisArg ? Object(thisAr
2022-01-13 22:16:46
496
原创 es6 import三种导入区别
ES6新语法常见有三种形式import … from “…”(随意命名)```javascript// A.jsexport default 20// B.jsimport A from './A'上面的代码生效的前提是，只有在A.js中有默认导出的export default语法时才会生效。这种不使用｛｝来引用模块的情况下，import模块的命名是随意的，即如下三种引用命名都是正确的：//B.jsimport A from './A'import B from './A'impo
2021-10-31 12:42:44
1913
原创 html css js题目
BFC的布局规则1.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。2.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。3.计算BFC的高度时，浮动元素也参与计算。解释css sprites，如何使用？答：Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。怎么实现跨域问题？同源策略:协议 端口 域名要相同，如果是协议和端口造成的跨域问题“前台”是无能为力的。1.j
2021-09-10 18:02:37
260
原创 Axios
Axios的基本使用get，获取数据post，提交数据（表单提交以及文件上传）put，更新数据 （提交所有的数据）patch，提交数据 （提交修改的数据）delete，删除数据axios({ method: 'get', url: '', params: {}}).then(res => { do something })并发请求同时进行多个请求，并统一处理返回值，如果在某些场景中我们需要同时依赖两个接口返回的数据，那么我们可以使用并发请求。axios.a
2021-08-14 22:16:05
630
原创 Vuex的基本使用
Vuex的基本使用Vuex是做什么的?■官方解释: Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以-种可预测的方式发生变化。0Vuex 也集成到Vue的官方调试I具devtools extension ,提供了诸如零配置的time -travel调试、状态快照导入导出等高级调试功能。■状态管理到底是什么 ?状态管理模式、集中式存储管理这些名词听起来就非常高大上,让人捉摸不透。其实,你可以简单的将其看成把需要多个组件共
2021-08-14 20:14:13
91
原创 vue-cli bug
Vue 引入路径 import ××× from ‘×××’ 报错引入的文件名和地址都是正确的，但是还是报错误Already included file name ‘×××’ differs from file name ‘×××’ only in casing.这时候我们只要把文件名的后缀vue去掉就好了解决方案解决方式一：把文件名的后缀vue去掉就好了解决方式二：把路径前面的点改成@路径 作用. / 当前文件同级目录. . / 当前文件上一级目录@ 在引入模块时，可以使用 @ 代
2021-08-08 18:56:28
1193
1
原创 Webpack
Webpack基础知识一.为什么要学习webpack现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决SCSS，Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。现在最流行的三个前端框架，可以说和webpack已经紧密相连React.js+WebPackVue.js+WebPackAngluarJS+WebPack可以看出
2021-06-08 18:07:39
1722
原创 Vue基本知识
Vue基本知识插值表达式{{}}注意：差值表达式不会解析html元素指令v-on注意：v-on指令事件绑定机制,缩写是@，在vue中，使用事件绑定机制，为元素指定事件处理机制，如果加了小括号，就可以给函数传参了<div id="app"> <input type="button" value="v-on指令" v-on:click="doit"> <input type="button" value="v-on指令简写" @click
2021-06-05 11:32:52
625
原创 垂直水平居中div
垂直水平居中divdiv没有固定宽高1.使用 CSS 方法：父盒子设置：display：table-cell； vertical-align：middle；Div 设置： margin：0 autotable-celldisplay：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对
2021-03-02 20:24:01
95
原创 移动端学习
移动端二倍图3.1物理像素&物理像素比●物理像素点指的是屏幕 显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750* 1334●我们开发时候的1px不是一 定等于1个物理像素的●PC端页面， 1个px等于1个物理像素的,但是移动端就不尽相同●一个px的能显示的物理像素点的个数 ,称为物理像素比或屏幕像素比background-size属性规定背景图像的尺寸background-size:背景图片宽度 背景图片高度;特殊样式流式布局(百分比
2021-02-02 21:33:21
181
原创 HTML,CSS复习
HTML,CSS复习6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.●在链接文本的href属性中,设置属性值为#名字的形式,如< a href= “#two”>第2集●找到目标位置标签,里面添加一个id属性=刚才的名字,如: < h3 id=“two” >第2集介绍</ h3>border-collapse: collapse;可以合并为一条边框 table{ width: 100%; b
2021-01-29 18:12:52
947
原创 双栏，三栏布局
12.4周报双栏布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
2020-12-04 21:58:28
661
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人