css专场:
* 问题:flex:1 是哪些css属性集合?
答:flex是由三个属性组成:
- flex-grow: 存在剩余空间, 为正, 分配
属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。在「flex」属性中该值如果被省略则默认为1. - flex-shrink: 不存在剩余空间, 为负, 计算收缩比例
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。 - flex-basis: 分配剩余空间前, 定义宽度
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的 <' width '> 设置,如果自身的宽度没有定义,则长度取决于内容。
*问题:什么是rem?1rem是什么意思?
答:rem是一个相对单位,相对根元素字体大小的单位。我们只需要指定根元素为参考值,就可以了。1rem等于根元素的fontSize大小
*问题:什么是rpx?1rpx怎么计算是多少像素?
答:rpx是解决屏幕自适应的尺寸单位,可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为750rpx。
计算方式:1除以750 再乘以屏幕宽度像素等于1rpx是多少像素
*问题:1rem,1em,1vw,1px的概念?
- rem是一个相对单位,相对根元素字体大小的单位。
- em是一个相对单位,相对于最近的具有fontSize属性的祖先元素,没有就相对于根元素
- 1vw等于视口宽度(viewport width)的百分之一
- px代表的是像素单位,一般为网页中标识字体的单位
*问题:cssx选择器优先级?
答: 1. !important
- 行内样式,在style属性里面写的样式。
- id选择器
- class选择器
- 标签选择器
- 通配符选择器*
- 浏览器的自定义属性和继承
*问题:flex布局常用属性?
答:1.flex-direction属性决定主轴的方向(即项目的排列方向)。
2.flex-wrap属性决定是否布局是否换行。
3.justify-content属性定义了项目在主轴上的对齐方式。
4.align-items属性定义项目在交叉轴上如何对齐。
5.align-content属性定义了多根轴线的对齐方式。
6.order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
7.flex-grow属性定义项目的放大比例,默认为0,,即如果存在剩余空间,也不放大。
8.flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
9.flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。默认auto,项目本身宽度。
10.flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。
11.align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
*问题:什么是BFC?
答:BFC 定义
BFC (Block formatting context)块级格式化格式化上下文,它是一种独立的渲染区域,只有Block-level-box参与,它规定了内部的Block-level-box如何布局,并且与这个区域外部毫不相干。
2、生成BFC:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
*问题:如何清除浮动?
1.利用 clear 属性,在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,利用 :after 伪元素在元素末尾添加一个内容为空高为0并带有 clear: both 属性的元素。
2.触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素。overflow:hidden
js基础
*问题:知道==和===的区别吗?
答:1. ===:称为等同符,当两边值的类型相同时,直接比较值,若类型不相同,直接返回false;
- ==:称为等值符,具有隐性的类型转换。当等号两边的类型相同时,直接比较值是否相等,若不相同,则先转化为类型相同的值,再进行比较;(优先转换为数字进行比较。)
*问题:内存泄漏是什么?哪些操作造成内存泄漏?
答:1. 内存泄漏:就是没有使用,或已经使用完的变量,没有及时回收。
- (1) 意外的全局变量,初始化未经声明的变量,总是会创建一个全局变量。
(2)计时器,一旦离开,要clear
(3)dom清空或删除时,事件未清除导致的内存泄漏
(4)闭包
*问题:http和https区别?
答:1.https协议需要到CA申请证书。
2.http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl/tls加密传输协议。
3.http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
- http的连接很简单,是无状态的;HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。
*问题:js数组方法
答:基础:toString()、join()、pop()、push()、shift()、unshift()、splice()、concat()、slice()、reverse()、sort()、tolocaleString()、valueOf()
es6+:map()、filter()、reduce()、every()、some()、indexOf()、lastIndexOf()、forEach()、find()、findIndex()、fill()、copyWithin()、from()、of()、entries()、keys()、values()、includes()
*问题:js数据类型有哪些?
答:1.值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
2.引用数据类型:对象(Object)、数组(Array)、函数(Function)。
*问题:引用类型和基本类型存储位置有什么区别?
答:1. 基本类型的变量会保存在栈内存中,如果在一个函数中声明一个值类型的变量,那么这个变量当函数执行结束之后会自动销毁
2.引用类型的变量名会保存在栈内存中,但是变量值会存储在堆内存中,引用类型的变量不会自动销毁,当没有引用变量引用它时,系统的垃圾回收机制会回收它
*问题:知道箭头函数和普通函数的区别吗?
答: 1. 箭头函数是匿名函数,不能作为构造函数,不能使用new
- 箭头函数不绑定arguments,取而代之用rest参数…解决
- 箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值
- 箭头函数通过 call() 或 apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响。
- 箭头函数没有原型属性
- 箭头函数不能当做Generator函数,不能使用yield关键字
*问题:es6特性了解多少?
答:1.变量声明方式:const和let
2.模板字符串
3.箭头函数
- 函数的参数默认值
5.Spread / Rest 操作符(多参变数组rest,数组变多参spread)
6.二进制和八进制字面量
7.对象和数组解构
8.对象超类
9.for...of 和 for...in
10.ES6中的类
*问题:什么是闭包?
答: 闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取[局部变量],所以闭包可以理解成“定义在一个[函数]内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
*问题:知道null和undefaul的区别吗?
null:Null类型,代表 “空值”,代表一个空对象指针,使用typeof运算得到 “object” ,所以可以认为它是一个特殊的对象值。
undefined 是 Undefined 类型的唯一值,它表示未定义的值。当声明变量未赋值时,或者定义属性未设置值时,默认值都为 undefined。
*问题:promise是什么?
答:Promise是异步编程的一种解决方案
Promise对象有以下2个特点:
1.对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
2.一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved;从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象田静回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
*问题:axios怎么封装?
答: axios请求拦截:每次请求都尝试带上token.
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
响应拦截:请求失败的统一处理。
// 响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
// 下面列举几个常见的操作,其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期,请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误,直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
})
js进阶React.js
*问题:react生命周期?
答:
初始化阶段
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
更新阶段
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
错误捕获
static getDerivedStateFromError()
componentDidCatch()
*问题:refs是什么?何时使用refs?
答:在某些情况下,你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素。可以利用refs。
下面是几个适合使用 refs 的情况:
管理焦点,文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。
*问题:可以在render中执行setState吗?
答:不可以,因我执行setState后会触发render,所有会报错,会死循环
*问题:如何判断一个input是受控组件还是非受控组件?
答:受控组件就是可以被 react 状态控制的组件,绑定了value属性和onChange方法,value为当前组件的state,onChange将触发setState
*问题:useEffect的返回值一般什么时候用?
答:useEffect对的返回值可以模仿类组件的componentWillUnmount,清除一些计时器和订阅事件或请求
*问题:connect函数做了什么?
答:connect 是一个高阶组件
内部利用context获取state和dispatch,根据不同的参数(mapStateToProps,mapDispatchtoProps,mergeProps),扩展传入组件的属性,使这些值可以在props中获取
*问题:hooks解决了什么问题?
答:解决问题:1.在组件之间复用状态逻辑很难,React 没有提供将可复用性行为“附加”到组件的途径,你也许会熟悉一些解决此类问题的方案,比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构,你可以使用 Hook 从组件中提取状态逻辑,使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。
*问题:什么是虚拟dom?
答:Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。
2.复杂组件变得难以理解,生命周期钩子中充满大量数据请求,计时器订阅等,无法拆分,还有在componentWillUnmount中清除,使人不好理解,hooks 的useEffect可将逻辑细粒拆分。
*问题:react-router如何传值给组件?
答:1.query方式:
路径为对象
var data = {id:3,name:sam,age:36};
var path = {
pathname:'/user',
query:data,
}
- props.params 动态路由方式:
3.state方式
var data = {id:3,name:sam,age:36};
var path = {
pathname:'/user',
state:data,
}
版本库-工具类
*问题:git常用命令?
答:基于当前组件创建分支:git checkout -b 分支名。
提交命令:git commit
切换分支:git checkout
命令行工具:
创建目录:mkdir 目录名
进入文件:cd 相对路径
发送请求:curl