weixin_38930658的博客

原创 2021-10-31

react路由的作用能够掌握react-router-dom的基本使用能够使用编程式导航跳转路由能够知道React路由的匹配模式react路由介绍现代的前端应用大多都是spa（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好，对服务器的压力更小，所以更受欢迎，为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由功能：让用户从一个视图导航到另一个视图前端路由是一套映射规则，URL路径与组件的对应关系使用react路由，配置路径和组件路由的基本使用

原创 aaaaaaaaaaaaaa

npm install create-react-app –gcreate-react-app app-demo创建react reactdom 脚手架使用react （react.createElement（…） reactDom.render()）JSX(jsx 跟html一样更直观友好) jsx不是标准ECMScript语法，是其扩展，经过babel处理后，转换为virtualDom通过@babel/preset-react 转换的注意：class –》className for—.

原创 ReactX

原创 call、apply、bind、new

1.用什么样的思路可以new关键词2.apply、call、bind方法区别3.实现apply、call、bind、newnew原理介绍new作用：执行一个构造函数、返回一个实例对象。分为四步：1.创建一个新对象2.将构造函数的作用域赋给新对象 （this指向新对象）3.指向构造函数中代码（为这个新对象添加属性）4.返回新对象function Person(){ this.name='Jack'; return {age:18}}var p = new Person(); co

原创 react生命周期

1.挂载constructgetDerivedStateFromPropsrendercomponentDidMount2.更新getDerivedStateFromPropsshouldComponentUpdaterendergetSnapshotBeforeUpdatecomponentDidUpdate3.卸载componentWillUnmount

原创 js的6种继承方式

1.js的继承方式有多少种2.es6的extends关键字是用哪种继承方式实现的

原创 深、浅拷贝

1.Object.assign()方法将所有可枚举的 自身属性从一个或多个 源对象复制到目标对象2.hasOwnProperty()对象是否有这个属性。自身属性。方法返回一个布尔值，指示对象是否将指定的属性作为自己的属性,3.for in遍历对象或数组原型及原型链上的key4.for of 遍历历可迭代对象定义要迭代的数据5.Reflect.ownKeys(obj)返回一个由目标对象自身的属性键组成的数组6.Object.getOwnPropertyDescriptors()方法返回给定对象的所有

原创 webpack5使用

webpack的作用是什么1.模块打包不同模块的文件打包整合在一起，保证他们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。2.编译兼容,通过webpack的loader机制，不仅能帮我们对代码做polyfill，还可以编译转换.less,.vue,.jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提升开发效率3.能力扩展webpack的plugin机制，我们在实现模块化打包和编译兼容的

原创 规范化介绍

为什么有规范化标准1.软件开发需要多人协同2.不同开发者具有不同的编码习惯和爱好3.不同的喜好增加项目维护成本4.每个项目或者团队需要明确统一的标准5.代码、文档、提交日志需要规范化标准ESLinkESLint工具使用定制ESLint校验规则ESLint对TypeScript的支持ESLint结合自动化工具或者Webpack基于ESLint的衍生工具Stylelint工具的使用...

原创 数据结构和算法-树与二叉树

树树形结构是一种非线性数据结构。树中的每个部分称为结点，结点间存在分支结构与层次关系。每个树型结构都有一个根节点。根据结点之间的关系，也存在父节点、子节点、兄弟结点的概念。不含子节点的结点称为叶结点。子树：对某个结点与其后代结点的整体称呼。由于存在父子关系，树中的结点形成多级结构，称为层级。根节点层级为1，向下依次递增。树中最深结点的层级称为树的高度。二叉树二叉树是树形结构中的一种，二叉树中的每个结点最多只能存在2个子节点。左子节点、右子节点、左子树、右子树满二叉树二叉树的每层

原创 算法与数据结构-链表的概念

链表的概念 链表是有序的数据结构，链表中的每个部分称为节点。链表可以从首、尾、中间进行数据存取。链表的元素在内存中不必是连续的空间。添加与删除不会导致其余元素位移。链表的实现 /**节点类：value/next*链表类：addAtTail、addAtHead、addAtIndex、get、removeAtIndex*/// 节点类class LinkedNode { constructor (value) { this.value = value // 用于存储下一个

原创 数据结构与算法-队列

队列的概念先进先出原则的有序集合添加新元素的一端称为队尾，另一端称为队首队列的实现// 数组形式class Queue { constructor () { // 用于存储队列数据 this.queue = [] this.count = 0 } // 入队方法 enQueue (item) { this.queue[this.count++] = item } // 出队方法 deQueue () { if (this.isEm

原创 数据结构与算法-栈

栈栈的概念后进先出的有序集合栈的实现// An highlighted blockclass Stack { constructor () { // 存储栈的数据 this.data = {} // 记录栈的数据个数（相当于数组的 length） this.count = 0 } // push() 入栈方法 push (item) { // 方式1：数组方法 push 添加 // this.data.push(item) /

原创 手写js题目

1.数组扁平化1.reduce方法function flutter(arr,num){ console.log(num) if(num<=0){return arr} return arr.reduce((sum,item)=>{ return sum.concat(Array.isArray(item)?flutter(item,--num):item) },[])} var a=[1,2,3,4,[1,2,3,4,[5,6,7,[1,2]]],[2,3,4]]

原创 前端性能优化

1.减少HTTP请求一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。2.使用http2http2相比http1有以下优点1.解析速度更快。服务器解析 HTTP1.1 的请求时，必须不断地读入字节，直到遇到分隔符 CRLF 为止。而解析 HTTP2 的请求就不用这么麻烦，因为 HTTP2 是基于帧的协议，每个帧都有表示帧长度的字段2.多路复用。3.首部压缩。HTTP/2 在客户端和服务器端使

原创 V8引擎流程和垃圾回收机制

认识v8v8引擎是一款主流的javascript执行引擎v8采用即时编译（源码立即转为机器码）v8内存设限64位操作系统1.5g 32位800Mv8垃圾回收策略分代回收思想：内存分为新生代/老生代针对不同对象采用不同算法：分代回收、空间复制、标记清除、标记整理、标记增量。内存分配：左侧新生代（from /to），右侧老生代v8回收新生代对象小空间存储新生代对象（32M｜16M），新生代指的是存活时间较短的对象，回收过程采用复制算法+标记整理新生代内存区分为两个等大小空间使用空间为

原创 typeof和instanceof的区别

typeof检测数据类型检测数据类型，返回一个小写字母的类型字符串简单数据类型：Undefined/null/boolean/Number/String复杂数据类型：Objectinstanceof检测对象之间的关联性例子和实例，instanceof 左边一定是引用类型值，其实 instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，如果查找失败，

原创 bom知识点

BOM概述BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window。浏览器顶级对象windowwindow对象是浏览器的顶级对象，它具有双重角色。1.它是js访问浏览器窗口的一个接口2.它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法。页面加载事件以及注意事项<button>点击</button><script> var btn=doc

原创 http和https

基本概念http:超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务端请求和应答的标准(TCP)。https：http+ssl，建立一个信息安全通道，来确保数据的传输，确保网站的真实性。区别：1.https协议需要ca证书，费用较高2.http超文本传输协议，信息是明文传输，https是具有安全的ssl加密传输协议。3.使用不同连接方式，端口也不同，http协议的端口80，https端口4434.http链接简单，无状态，https有ssl+http协议构建可进行加密传输

原创 Vue常见问题

Vue常见问题data为什么需要是个函数因为js的对象是按引用传递的，如果使用对象的话，会导致组件内数据无法保持唯一，可能会被其他组件数据修改，所以需要使用函数，每次都重新创建一个新的对象实现。v-for为什么需要key没有key的情况下（或者使用index），diff过程中，无法确定具体更新的节点，会导致删除的节点错误，所以需要一个唯一的key值，用于渲染更新，如果你不需要增删的话，用index其实也没啥问题v-if和v-show的区别v-show通过display none和block进行控

原创 图片懒加载

图片懒加载图片懒加载其实就是延迟加载，浏览器可视范围有限。1）事件监听，监听scroll这个事件，鼠标滚动就触发。window.innerHeight窗口显示区高度getBoundingClientRect().top 图片到视窗上边的距离const images=document.querySelectorAaa('img');window.addEventLister('scroll',e=>{ images.forEach(img=>{ const imageTop=i

原创 一个网络请求是怎么进行的？

浏览器主要功能浏览器主要功能是展示网页资源，包括向服务器发起请求、从服务器获取相关资源，并将网页信息显示在浏览器窗口中。页面请求过程1、当我们打开网站页面，浏览器就会发起网络请求获取该页面资源，f12看到Network面板里，我们能看到所有浏览器发起的网络请求，包括页面、图片、css文件、xhr请求等，还能看到请求状态（200成功、404找不到、缓存、重定向等）、耗时、请求头和内容、返回头和内容等。2、浏览器加载页面。同时页面中涉及的外部资源也会根据需要，在特定的时机触发请求下载，png图片、jav

原创 javascript小数精度问题

小数精度问题计算机使用二进制存储，每个数字都有一个存储容量，javascript使用IEEE754标准，64位双精度。将其分为三部分符号位（1位）,指数位（11位），有效数（52位）0.1+0.2=0.12=0.2 整数部分是00.22=0.4 整数部分是00.42=0.8 整数部分是00.82=1.6 整数部分是10.62=1.2 整数部分是10.22=0.4 整数部分是01.100110011*2·-40.1转化为二进制是: 0.0001100110011001100110011

原创 flex知识点

传统布局与flex布局传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况差ie11或更低版本，不支持或仅部分支持建议：如果是pc端，我们还是用传统布局，如果是移动端或者不考虑兼容性问题的PC端页面布局，我们可以使用flex布局。flex布局原理原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。flex意为弹性布局，任何一个容器都可以指定为flex布局当我们为父元素设为flex布局

原创 css三大模块

盒子模型：box model 四部分组成margin:外边距 盒子与盒子之间距离border：边框 指定上下作用边框大小、样式padding：边框与内容之间距离，内边距content：内容padding：边框与内容之间的距离盒子加了内边距后的影响1）内容和边框有了距离2）盒子会变大内盒尺寸计算盒子的实际大小：内容宽度和高度+内边距+边框padding不影响盒子大小情况，如果盒子没有宽度，则padding不会撑开盒子 <div style="width:200px;..

原创 跨域的方式

因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。为来防止CSRF攻击1.JSONPJSONP 的原理很简单，就是利用 JSONP 使用简单且兼容性不错，但是只限于 get 请求。2.CORSCORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。3.document.domain该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。只

原创 webpac各个模块

module.exports={//入口文件的配置项entry:{},//出口文件的配置项output:{},//模块：例如解读CSS,图片如何转换，压缩module:{},//插件，用于生产模版和各项功能plugins:[],//配置webpack开发服务功能devServer:{}}简单描述了一下这几个属性是干什么的。...

原创 Vuet通信

第一种：props和emit第二种：中央事件总线EventBus(基本不用)第三种：vuex（状态管理器）第四种：emit第二种：中央事件总线 EventBus(基本不用)第三种：vuex（状态管理器）第四种：emit第二种：中央事件总线EventBus(基本不用)第三种：vuex（状态管理器）第四种：parent 和 $children...

原创 函数javascript

函数的定义函数三种定义方式1.function fn(){};自定义函数（命名函数）2.函数表达式（匿名函数）var fun=function() {};3.利用new Function(‘参数1’,‘参数2’,‘函数体’) 函数体以字符串方式写在里边var f=new Furction(‘console.log(123)’)调用f()注意：Function里面参数都必须是字符串格式所有函数都是Function的实例（对象）所有函数都是new Function()得出来的函数也属于对象

原创 es6 generator

generator介绍es6为异步编程提供解决方案，通过yeild关键字，把函数的执行流程挂载起来，为改变执行流程提供可能。generator组成及用法Generator两点区分普通函数function 后带*函数内部有yield表达式用法：//generator函数的声明function* fun1(){ console.log('one') yield 1; console.log('two') yield 2; console.log('three') return 3

原创 javascript常考算法

实现newnew实现的事情1.创建一个空对象，这个对象作为执行new构造函数后，返回的对象实例2.将上面创建的空对象的原型（proto）,指向构造函数的prototype属性。3.将这个空对象赋值给构造函数内部的this，并执行构造函数逻辑4.根据构造函数执行逻辑，返回第一个步创建的对象或者构造函数的显示返回值function Person(name){ this.name=name}const person=new newFunc(Person,'lucas')console.l

原创 vuex

vuexvuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。state：Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态mutation：更改Vuex的store中的唯一方法就是提交mutationaction:action提交的是mutation而不是直接改变状态，action可以包含任意的异步操作。getter：相当于computed计算属性。...

原创 类、原型与原型链

原型构造函数是一种特殊的方法，主要用来创建对象时初始化对象。每个构造函数都有prototype（原型）属性，每个函数都有prototype（原型）属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含特定类型的所有实例共享的属性和方法，即这个原型对象是用来实例共享属性和方法的。而每个实例内部都一个指向原型对象的指针。原型链...

原创 javascript经典实例-创建非重复值得一个集合

Set使用var col1=new Set();//添加col1.add("apple");col1.add("oranges");col1.add("banana");//删除col1.delete("banana");//是否有一个特定的值col1.has("banana");// 可以遍历col1.forEach(item=>{ console.log(item)})//set转换为arrayvar arr=[...col1]console.log(arr)/

原创 vue数据绑定原理

vue数据绑定数据变化更新视图，视图变化更新数据输入框内容变化，data中的数据同步变化view=》modeldata中的数据变化，文本节点的内容同步变化 model =》view设计思想：发布者、观察者模式响应式处理整体过程为initState() => initData() => observe()，其中observe是响应式处理的入口，通过该方法为data对象转化为响应式对象，observe方法接收的是对象且该对象不是响应式时，会为该对象创建一个observe对象，会调用Obs

原创 vue之nextTick

nextTickJS异步编程javascript语言的执行环境是单线程的，一次只能执行一个任务，多任务需要排队等候，这种模式会阻塞代码，为了避免这个问题出现异步编程，本质同构回调函数来实现异步代码的存放与执行。事件循环和消息队列eventloop是一种循环机制，不断去轮询一些队列，从中找到需要执行的任务并按顺序执行的一个执行模型。消息队列：用来存放宏任务的队列。开始整个脚本作为宏任务执行，执行过程中同步代码直接执行，宏任务等待时间到了将方法放入宏任务队列，微任务进入微任务队列，当主线程宏任务执行

原创 vue中computed和watch

vue中computed和watchcomputedcomputed属性称为计算属性。计算属性可用于快速计算视图（view）中显示的属性，这些计算将被缓存，并且只在需要时更新。computed用来监控自己定义的变量，该变量不在data里边声明，直接在computed里面定义。watchwatch主要监控vue实例的变化，它监控的变量必须在data里边声明才可以，...

原创 this总结

this谁调用它，this就指向谁，也就是说this的指向是在调用时确定的。事实上调用函数会创建新的属于函数自身的执行上新闻。执行上下文的调用创建阶段会决定this的指向。总结：this的指向，是在调用函数时根据执行上下文所动态确定的。1）一般构造函数new调用，绑定到新创建的对象上2）一般由call/apply/bind方法显示调用，绑定到指定参数的对象上3）一般由上下文对象调用，绑定在该对象上4）箭头函数中，根据外层上下文绑定的this决定this指向5）函数体重，简单调用该函数是（非显

原创 两种项目的组织方式

Multirepe（Multiple Repository）每一个包对应一个项目Monorepo（Monolithic Repository）一个项目仓库中管理多个模块/包，每一个包单独测试、单独发布packages中单独一个包包中有__test__ 、dist、src 、index、LICENSE、README...

原创 快速原型开发

快速原型开发VueCli中提供了一个插件可以进行快速原型开发需要安装 npm install -g @vue/cli-service-global2.使用vue serve，如果不指定参数默认会在当前目录找以下的入口文件main.js index.js App.vue app.vue可以指定要加载的组件vue serve ./src/login.vue安装ElementUI1.初始化package.jsonnpm init -y2.安装ElementUIvue add element