2021-10-23 web前端实习面试

1. rem 的应用场景

• 相对单位
• rem单位是相对于HTML标签的字号计算结果
• 1rem = 1HTML字号大小
• 目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
• rem单位的尺寸 = px单位数值 / 基准根字号
• 使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

2. flex 用的多吗

flex 弹性布局是一种浏览器提倡的布局模型，布局网页更简单、灵活，避免浮动脱标的问题。父元素添加 display: flex，子元素可以自动的挤压或拉伸

• 修改主轴对齐方式属性：justify-content

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白距离均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

• 修改侧轴对齐方式属性：align-items （添加到弹性容器） align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

• 修改主轴方向属性：flex-direction

默认值	作用
row	行，水平（默认值）
column	列，垂直
row-reverse	行，从右向左
column-reverse	列，从下向上

• 弹性盒子换行显示：flex-wrap: wrap
• 调整行对齐方式：align-content

3. 用过哪些CSS预处理器

Less

• Less是一个CSS预处理器, Less文件后缀是.less
• 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
• 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

4. 怎么实现跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这3个中有一个不同就是跨域。

• 通过 jsonp 跨域

var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}

• document.domain + iframe 跨域
• nginx 代理跨域
• node.js 中间件代理跨域
• 后端在头部信息里面设置安全域名

5. 闭包及其应用场景

一个作用域可以访问另外一个函数内部的局部变量 ,或者说一个函数（子函数）访问另一个函数（父函数）中的变量。 此时就会有闭包产生，那么这个变量所在的函数我们就称之为闭包函数。
闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中。闭包的另一个用处，是封装对象的私有属性和私有方法。

6. Vue 生命周期

• beforeCreate：实例刚创建
• created：创建完成，属性已经绑定，但还未生成真实 dom
• beforeMount：模板编译/挂载之前
• mounted：组件已挂载
• beforeUpdate：组件更新前
• updated：组件已更新
• beforeDestroy：销毁开始
• destroyed：销毁实例