笔试题
火山口
https://juejin.cn/post/6844903715384590344
1. 什么叫优雅降级和渐进增强？
渐进增强和优雅降级
渐进增强：progressive enhancement，开发页面时，对低版本浏览器要保证基本功能；然后对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：graceful degradation，一开始就构建完整的功能，然后再对低版本浏览器进行兼容。
渐进增强相当于‘向上兼容’，优雅降级相当于‘向下兼容’。
在确定用户群体的情况下，渐进增强：针对低版本保证基本功能，高版本浏览器改效果、交互等，达到更好的体验。
优雅降级一开始就构建完整功能再对低版本进行兼容。
.transition{/* 渐进增强*/ -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s'; } .transition{/* 渐进增强*/ transition:all .5s'; -o-transition:all .5s; -moz-transition:all .5s; -webkit-transition:all .5s; }
2. 什么是标准文档流？
标准文档流
标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。HTML文档中的元素可以分为两大类：块级元素和行内元素。
块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有 span 、a、 img等。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。
3. 写一个左中右布局占满屏幕，其中左右两块是固定宽度 200 ，中间自适应宽，要求先加载中间块写出结构及样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式： </title> <style type="text/css"> html,body{margin:0px;width:100%;} #left,#right{width:200px;height:200px;background-color:red;position:absolute;} #left{left:0;top:0;} #right{right:0;top:0;} #center{margin:0 200px;background-color:yellow;height:200px;} </style> </head> <body> <div id="left">left</div> <div id="center">center</div> <div id="right">right</div> </body> </html>
4. active-class 是哪个组件的属性？嵌套路由怎么定义？
active-class 是哪个组件的属性
active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；
嵌套路由怎么定义
一级路由里面使用children数组配置子路由，就是嵌套路由
组件：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。
模块：最初的目的是将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。不同模块之间也会存在依赖关系，但大部分都是业务性的互相跳转，从地位上来说它们都是平级的。
5. 怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？
在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。
使用 router 对象的 params.id 获取
6. vuex 是什么？怎么使用？哪种功能场景使用它？
是基于vue.js的状态管理工具，解决了组件之间传值混乱问题。组件之间数据状态共享。
使用场景：1、用户的个人信息管理模块；2、电商项目的购物车模块；3、我的订单模块，订单列表中点击取消订单，然后更新对应的订单列表；4、在订单结算页，获取需要的优惠券，并更新订单优惠信息。
7. mvvm 框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
mvvm 是 model + view + viewmodel 框架，通过 viewmodel 连接数 据模 型model 和 view
区别：vue 是数据驱动，通过数据来显示视图层而不是节点操用
场景：数据操作比较多的场景，更加快捷
8. 说出至少 4 种 vue 当中的指令和它的用法？
- v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)
中科天翔的面试题:
一、选择题
1、以下判断结果为 true 的有：（B、D）
A:1="1" B：1=="1" c:1==="1" D：0==false E：0.1+0.2===0.3
2、以下不属于 JavaScript 基本数据类型的是：C
A：Boolean B：Symbol C： Array D： undefined
3、下面哪个选项可以产生 0<=num<=10 的随机整数：（D）
A: Math.floor(Math.random()*6) // 0 B: Math.floor(Math.random()*10) // 4 C: Math. floor(Math. random()*11) // 7 D: Math.ceil(Math.random()*10) // 10
4、下面分别使用JSON.stringify 方法，返回值 res 分别是：（C）
const fn= function(){} const res = JSON.stringify(fn) // undefined const num = 123 const res = JSON. stringify(num) // '123' const res = JSON.stringify(NaN) // null const b= true const res = JSON. stringify(b) // 'true' A:'function'、'123'、'NaN'、'true' B: undefined、'123'、undefined、'true' C: undefined、'123'、'null'、'true’ D：undefined、'123'、'null’、undefined
5、以下哪项可以去除变量 str 中的所有空格:(A)
A：str.replace(/\s*/g,"") B:str.replace(/^\s|\s$/g,"") C: str.replace(/^\s*/,"" ) D:str.replace(/(\s*$)/g,"")
二、问答题
addEventListener 有哪些参数？
事件名称；
事件处理函数；
捕获还是冒泡。
事件处理函数不一定是函数，也可以是个JavaScript具有handleEvent方法的对象，看下例子：
var o = { handleEvent: event => console.log(event) } document.body.addEventListener("keydown", o, false);
第三个参数不一定是 bool 值，也可以是个对象，它提供了更多选项。
once：只执行一次。
passive：承诺此事件监听不会调用 preventDefault，这有助于性能。
useCapture：是否捕获（否则冒泡）。
实际使用，在现代浏览器中，还可以不传第三个参数，建议默认不传第三个参数，因为冒泡是符合正常的人类心智模型的，大部分业务开发者不需要关心捕获过程。除非你是组件或者库的使用者，那就总是需要关心冒泡和捕获了。
