weixin_44607531的博客

要想实现new，要先知道new做了什么function Person(name, age){ this.name = name this.age = age}let gailun = new Person('gailun', 18)如上述代码，我们通过new创建了一个Person对象new做了哪些事情1、创建了一个空对象this2、给this添加__proto__ = Person.prototype3、向this身上添加属性，name age4、若..

1、常规父子组件通信 props 父 ——> 子 父通过自定义属性传递，子通过props接收 $emit 子 ——> 父 子通过this.$emit([event], value)传递， 子通过 @[event]='handleGetVal(value)' 接收2、父子组件通过实例通信 子组件拿到父$parent实例进而获取其data 父 ——> 子 父组件拿到子$children实例进而获取其data 子 ——&g...

vue 生命周期及各阶段的状态加载渲染过程：父beforeCreated > 父created> 父beforeMount> 子beforeCreate> 子created> 子beforeMount> 子mounted> 父mounted子组件更新过程：父beforeUpdate> 子beforeUpdate> 子updated> 父updated父组件更新过程：父beforeUpdate&...

vue 生命周期及各阶段的状态 beforeCreate 创建组件实例之前 created 组件实例创建完成。未生成真实dom beforeMount 模板编译完成，尚未挂载（添加到页面） mounted 挂载之后，此时才能获取dom beforeUpdate 数据更新之前 updated ...

今天介绍一种在react种进行组件传值的方式——context需求有三个组件ABC，A为B父，B为C父。A中有一个数据username，要将它传给C组件。完整代码与效果首先看如下完整代码，我们再逐渐分析import React, { Component } from 'react'const MyContext = React.createContext()const {Provider} = MyContextexport default class A extends C

react实现路由懒加载一般我们引入路由像import World from '../World' 这样引入而路由懒加载要使用lazy函数1、懒加载方式引入路由const World = lazy(() => import('../World'))2、使用Suspense只是像第一步那样还不够，系统会报错。首先明白一点：使用了懒加载之后加载路由的时机是点击对应的路由链接时开始发送请求引入路由组件。假如网速慢就要等待很长的时间，这时候需要显示正在加载中的文字或效果以提升.

react 默认创建出来的项目文件一大堆，默写文件我们从头到尾都不会用到，而且这些文件会干扰我们项目的开发，所以本文章将讲解怎样创建一个精简版的初始化项目1、创建项目在指定路径下执行如下命令创建react项目create-react-app demo2、删除部分文件刚创建完的项目结构如图所示可以选择性删除git和readme等文件清空public和src文件夹，即删除两者下的所有文件清理完的结构目录如下：3、添加index.html文件在public文.

react中有两种路由模式，即BrowserRouter和HashRouterBrowserRouter 借用了H5的history APIHashRouter借用了url的hash值两者有何不同点呢？1、表现形式不同 hash地址栏带#2、兼容性不同。 browser由于h5的history API，不兼容IE9及以下 而hash使用的是url的哈希值兼容性好3、刷新对路由state参数的影响 browser没有影响，state...

路由的基本使用let obj = {id:'001', name='gailun'}<Link to={`/home/${obj.id}/${obj.name}`}>{obj.name}</Link><Route path='home/:id/:name' component={Home}/>

我们一般使用react路由时，链接要与组件相匹配，如下使用<NavLink to='/home'>Home</NavLink><Route path='/home' component={Home}/>模糊匹配如下所示，当链接第一级路径能匹配上相应的组件，而链接后面再多几级路径也不会产生影响，依旧能正常匹配（当然链接路径少于组件路径时不能匹配，像to='/a/home/b'这样也无法匹配）<NavLink to='/home/a/b'&gt.

如下是引入样式的代码<link rel='stylesheet' href='./css/bootstrap.css'>使用路由情况<NavLink to='/one/other'>other</NavLink><Route path='/one/other' component={Other}/>原因分析使用了类似多级路由的路由'/one/other'，请求样式时把前面的路径one也加入请求地址，而文件找不到，react默认会返

众所周知，一个promise调用then后会返回一个新的promise，那么这个新promise的状态与值如何？let promise2 = new Promise((resolve, reject) => { resolve(1)}).then( value => { console.log('success1',value) // return undefined //默认为undefined // return 1

俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~若有问题请留言或私信！一个promise指定多个回调如下let p2 = new Promise((resolve, reject) => { resolve(1)})p2.then(value => { console.log('第一个', value)})p2.then(value => { console.log('第二个', value)})p2是一个成功的promis.

俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~若有问题请留言或私信！nth-child() 同级第n个且为某元素的元素nth-last-child() 同级倒数第n个且为某元素的元素first-child 同级第一且为某元素的元素last-child 同级最后且为某元素的元素only-child 同级下只有某元素的元素nth-of-type() 同级某元素的第n个nth-last-of...

俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~若有问题请留言或私信！先解析一下BFC是什么BFC(block formatting context)块级格式化上下文定义：是web页面对盒模型采用不同的渲染模式，形成隔离的独立容器。BFC的形成条件1、根元素。html标签2、浮动元素float。除none3、定位元素position。absolute fixed4、display。inline-block table-cell table-captio...

俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~若有问题请留言或私信！以下所有属性都没有单位且都是只读的offsetdiv.offsetWidth/Height 自身可视区宽高(内容、padding、边框 、滚动条) div.offsetParent 为最近定位父元素，若没有则为body div.offsetLeft/Top 距离最近定位(相/绝)父元素边缘的距离，若没有则为相对于document的距离client...

俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~若有问题请留言或私信！网页图层创建的条件拥有3D变换的CSS属性使用加速视频解码的节点<canvas>节点拥有css加速属性的元素(will-change)...

前提知识浏览器加载资源时先看是否命中强缓存，若命中则不会发送http请求直接使用本地资源若未命中则发送http请求，看是否命中强缓存，若命中则不返回资源，使用本地资源，此时相应的状态码为304若未命中强缓存则返回资源，此时相应状态码为200强缓存：expire：GMT格式 （过期日期） http1.0cache-control： http1.1— max-age=时间戳 （保质期）expire和cache-control同时存在时，

俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~若有问题请留言或私信！1、使用CDN 和 缓存，强缓存和协商缓存（后端设置）2、减少http请求 1）代码压缩，图标使用iconfont 2）图片懒加载3、控制资源加载顺序 1）link放前面，提前加载，提前解析（异步加载解析） 2）script异步加载，使用async或defer4、加快解析速度 标签尽量避免深层嵌套，选择器避免过长5、减少回流 1）集中操作dom ...