光大教育笔试题

Mark 一下光大教育面试的笔试题~

1. flex 布局有哪些可设置的属性？

• 容器属性：
  • flex-direction 决定主轴的方向
  • flex-wrap 如果一条轴线排不下，如何换行
  • flex-flow 是flex-direction属性和flex-wrap属性的简写模式
  • justify-content 定义了项目在主轴上的对齐方式
  • align-items 定义项目在交叉轴上如何对齐
  • align-content定义了多根轴线的对齐方式。如果项目只有一个轴线，该属性不起作用
• 项目属性；
  • order定义项目的排列顺序。数值越小，排列越靠前，默认为
  • flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
  • flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
  • flex-basis定义了在分配多余空间之前，项目占据的主轴空间。
  • flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
  • align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

Flex布局教程：语法篇——阮一峰的网络日志

2. 利用css实现（结构如下）.wrap宽度为1000px，a, b, c同行，b固定宽度为100px，剩余宽度平均分配给a, c

<div class="wrap">
	<div class="a"></div>
	<div class="b"></div>
	<div class="c"></div>
</div>

.wrap {
    width: 1000px;
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
}

CSS Grid 网格布局教程——阮一峰的网络日志

3. 输出页面所有 dom 节点，并且输出其所在的层级

【Dom】通过递归获取节点的层次关系

4. 简要阐述 vue 响应原理

最简化 VUE的响应式原理

5. 简要阐述浏览器事件循环，并简要说明vue.$nextTick实现原理

a. 浏览器事件循环：

• 浏览器首先执行宏任务，也就是我们script（仅仅执行一次）
• 完成之后检查是否存在微任务，然后不停执行，直到清空队列
• 执行宏任务

宏任务主要包含：setTimeout、setInterval、setImmediate、I/O、UI交互事件
微任务主要包含：Promise、process.nextTick、MutaionObserver 等

一文看懂浏览器事件循环——知乎

b. vue.$nextTick 实现原理

用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM.

同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发

Vue.nextTick 的原理和用途——知乎
Vue $nextTick 原理

6. 简要阐述 vue 组件通信

• props 和 $emit
• EventBus 中央事件总线
• $attrs 和 $listeners
• provide 和 inject
• vuex

详解可参考：https://www.cnblogs.com/barryzhang/p/10566515.html
https://segmentfault.com/a/1190000019208626

7. 请分别对数组 [1, 1, 2, 2, 3, 4] 和 [{id: 1}, {id: 1}, {id: 2}, {id: 2}] 去重

• [1, 1, 2, 2, 3, 4]：

let arr1 = [ 1, 1, 2, 2, 3, 4 ];
let arr = [];	// 最后去重的数组
let newArr = arr1.reduce((pre, cur) => {
  // 写法1
  // if (!arr.includes(cur)) {
  //   arr.push(cur)
  // }
  return pre.includes(cur) ? pre : [ ...pre, cur ];		// 写法2
}, []);

• [{id: 1}, {id: 1}, {id: 2}, {id: 2}]

let arr = [ { id: 1 }, { id: 1 }, { id: 2 }, { id: 2 } ];
let newArr = [];  // 去重后数组
let map = {}
arr.forEach((item, index) => {
  if (!map[ item.id ]) {
    map[ item.id ] = item.id;
    newArr.push(item);
  }
})

8. 简要阐述浏览器缓存策略

浏览器缓存过程：

• 开始加载，域名解析，DNS缓存
• 本地缓存（memory缓存）
• Http缓存（强缓存和协商缓存）
• 服务端缓存（cdn缓存）

浏览器缓存机制——知乎
浏览器缓存缓存策略（看完就懂）