关于第一次web前端面试的记录
最近参加了一场面试，感觉自己题目都懂，但是说起来就是有点说不明白，所以写个博客整理以下吧。答案不少不是面试时回答的答案，只是整理一下可行答案
1、
如图1，使B相对于A垂直居中
图1
<style> /*方案一，父元素高度确定，使用高度+行高，内部只能有一行元素(可以有几个单行排列的行内盒子)*/ #A{ height: 100px; line-height: 100px; } /*方案二，父元素高度不定，使用内边距，内部不限制盒子数量*/ #A{ padding: 10px 0; } /*方案三，使用弹性盒子，内部不限制盒子数量*/ #A{ display: flex; height: 100px;/*最好设置，否则两个盒子会没有间隙，虽然这也可以算是居中吧*/ align-items: center; } /*方案四，父元素高度确定，使用表格单元格格式，内部不限制盒子数量*/ #A{ display: table-cell; vertical-align: middle; height: 100px; } </style> <div id="A"> <div id="B"></div> </div>
此题答的时候没听清问题，以为是垂直水平排布呢，直接答了各内边距都是10，及一个定位+移动
2、
如图1，使B相对于A水平居中
<style> /*方案一，父元素宽度不定，使用内边距，内部不限制盒子数量*/ #A{ padding: 0 10px; } /*方案二，父元素宽度确定，使用文本居中，内部不限制盒子数量，只对行内/行内-块级元素起效*/ #A{ text-align: center; } /*方案三，父元素宽度确定，使用弹性盒子，内部不限制盒子数量*/ #A{ display: flex; width: 100px;
/*最好设置，否则内外两个盒子会没有间隙，虽然这也可以算是居中吧*/ justify-content: center;
/*使用center会使内部盒子间没有间隙，使用space-around更好吧，不过对于单个盒子来说显示效果并没有区别*/ } </style> <div id="A"> <div id="B"></div> </div>
这个答了一个弹性盒子，一个定位。
以上两个居中均可使用定位+位移实现，不过使用定位+位移后麻烦蛮多的，还是少用吧
/*水平居中*/ #A{ width: 300px; position: relative; } #B{ position: absolute; left: 50%; transform: tranlateX(-50%); } /*垂直居中*/ #A{ height: 100px; position: relative; } #B{ position: absolute; top: 50%; transform: tranlateY(-50%); }
3、
如图2，使盒子内单行文本水平垂直居中
图2
<style> /*方案一，元素宽度不定/确定，高度确定，使用高度+行高+文本居中，内部只能有一行文本*/ #A{ height: 100px; line-height: 100px; text-align: center; } /*方案二，元素宽高不定，使用内边距，内部不限制文本行数*/ #A{ padding: 10px 0; } /*方案三，元素宽高不定，使用弹性盒子，内部不限制文本行数*/ #A{ display: flex; width: 100px;/*最好设置，否则盒子和文本没有间隙，虽然这也可以算是居中吧*/ height: 100px;/*最好设置，否则盒子和文本没有间隙，虽然这也可以算是居中吧*/ align-items: center; justify-content: center; } /*方案四，元素宽度确定/不定，元素高度确定，使用表格单元格格式，内部不限制文本行数*/ #A{ display: table-cell; vertical-align: middle; height: 100px; text-align: center; } </style> <div id="A"></div>
这题答了一个内边距和一个弹性盒子吧。
4、
清除浮动的方式
/*传统做法，写好后需要在需要清除浮动的元素上写上class名称，会添加多余的属性*/ .clearfix::after{ display: block; height: 0; /*此处内容随意，"."占位比较小故写个“.”*/ content: "."; clear: both: } /*从bootstrap中学来的，好处是html中不会有多余的属性，坏处该元素不能与弹性盒子同时使用，伪元素会占位*/ /*固有的一些需要清除浮动的类名，此处使用nav来举例*/ .nav::before, .nav::after{ display: table; content: ""; } .nav::after{ clear: both; }
这题答的时候逻辑比较差，如果使用打字应该好很多
5、
visibility: hidden;和display: none;的区别
visiblity是使元素不可见，但是还是在文档流中占位，display: none;是使元素消失，就像文档中没有这个标签及其子元素一样
这题回答的时候，我以为visiblity是超出裁剪呢，不过倒是没说超出裁剪，而是说了只是看不见，但是还是占着位，而display倒是完全没错，我都没去研究过，真是歪打正着哈哈哈（写博客时特地去研究了一下）。
6、
问：js有哪些数据类型
答：number、String、Boolean、Object、null、undefined
提问的时候有点蒙，什么是叫js的数据类型啊，是指int什么的吗，但是js没有啊，然后就提着胆答了这些东西，结果问的就是这个，我对于这些名词真的没什么感觉就是了。
7、
问：控制台会打印出什么来
var a = {b: 1, c: 2}; var d = a; d.b = 10; console.log(a);
答：会打印出{b: 10, c: 2}
原因：因为a是一个对象，所以在创建d的时候，赋的值的是a的内存地址，故修改d的属性就是修改它对应内存地址对象的属性，所以a也会跟着改变。
答的时候一开始还答错了，以为是复制了一个a过去呢，还好面试官提了一下才反应过来是赋了一个内存地址。
8、
问：控制台会打印出什么来
var a = 10; a.pro = 10; console.log(a); console.log(a.pro); console.log(a.pro + a); var s = 'hello'; s.pro = 'world'; console.log(s.pro + s);
答：会打印出10, undefined, NaN, undefinedhello
原因：
1、a是10，故打印10
2、a是number类型变量，故找不到a.pro
3、a.pro是undefined类型，undefined是NaN，而根据ECMAScript的规则，使用算术运算符+号时，一个数据为NaN则答案为NaN
4、s.pro也是undefined类型，但是使用为字符串运算符+号时(相加数据有一个为字符串会是字符串运算符)，所有数据均会变成字符串然后连接。
我回答的时候，第一个是对的，第二、三、四个就完全懵了，只知道a不是对象所以a.pro应该是一个错误数据，所以第二、三个应该是错误信息，第四个答了个worldhello，就很蒙。
9、
问：控制台会打印出什么来
var test = (function(a) { this.a = a; return function(b) { return this.a + b; } )(function(a,b){ return a }(3,5))); console.log(test(7));
答：10
原因：此处是使用了两个立即执行的匿名函数+闭包。
首先，使用立即执行的匿名函数时，
(function(a){ }(3))
相当于
function c(a) {} c(3);
其次，闭包是指函数及函数创建时所在的词法作用域（此处从MDN抄来的），就是说这个返回的匿名函数的this.a是指它的父函数里的this.a，b是指它的参数b。
再次，
(function(a,b){ return a }(3,5)
该段代码会返回一个a的值回去，而a的值就是3。
最后，
var test = (function(a) { this.a = a; return function(b) { return this.a + b; } )(3)); console.log(test(7));
该段代码的运行逻辑是，先执行一次匿名函数，存入参数a=3，之后为test变量赋值，值为function(b){...}，其中，这个function(b){...}中存着this.a=3，之后调用test函数，为其参数b赋值7，之后运行该函数，其返回结果就是10了(3+7)
面试时，回答的逻辑糟糕透了，毕竟全是匿名函数我都不知道怎么称呼。
10、
问：vue有哪些指令
答：v-html, v-bind, v-if, v-for, v-model（这时面试官叫停了，问了我下一题）
这问题问的我头蒙，什么叫指令啊，最后问了问是不是指v-html这一类的东西，面试官说是了之后就安心了，就答了下去
ps: 隔几天看vue文档，原来文档每个指令后面都有“指令”两个字，我倒是一直没注意😓
11、
问：上面那些指令的功能是什么
答：
v-html="msg": 可以使用其绑定的数据填充元素内部，类似于该元素.innerHTML = msg，而使用{{msg}}的效果比较像把msg中所有<>使用正则转换成对应的Unicode编码然后再该元素.innerHTML = msg一样，且使用js修改msg时，该元素也会实时更新
v-bind:xxx="attribute": 可以绑定该元素的属性例如xxx为style，attribute为一个写了css样式的字符串，效果和使用style=“css样式”一样，且使用js修改attribute时，该元素也会实时更新
v-for(list of lists): 使用数组lists进行for循环，list指代lists[i]
v-if="条件": 如果条件符合才显示该标签，否则不显示
v-model=“msg”: 对该标签进行双向数据绑定，即在该标签上输入内容后，在其他使用msg的标签上实时更新，如果使用js进行修改msg，则原标签和使用msg的标签均会更新
12、
问：简单实现一下vue的双向数据绑定
答：
<input type="text" id="inputMsg"/> <div id="showMsg"></div> <script> const obj = {}; const inputMsg = document.querySelector('#inputMsg'); const showMsg = document.querySelector('#showMsg'); Object.defineProperty(obj, 'msg', { enumerable: true, configurable: true, get() { console.log('get!'); return this.msg; }, set(newValue) { inputMsg.value = newValue; showMsg.innerHTML = newValue; console.log('set!'); } }); inputMsg.oninput = () => { obj.msg = inputMsg.value; } </script>
当时的回答：对input进行oninput监听，在触发该事件时，使其更新js中对应的msg，并设置其他使用该msg标签的innerHTML为msg；在js中创建一个setMsg函数，参数是需要修改的msg变量及更新后的数据，函数内是先设置msg变量为更新后的数据，之后设置input的value为msg，其他使用该msg标签的innerHTML为msg。
今天查了一下，ES5自带的方法Object.defineProperty(obj, prop, descriptor)可以直接实现我所想要的get、set，所以就填到了答中（原作者链接）。
仔细看了看，感觉使用该方法和使用我的方法的区别大概就是自带方法设置msg时可以直接msg = '...'，而我则是setMsg(...)，好吧，还是自带方法使用起来比较优雅。
最近翻阅文章的时候发现，我的这种方法应该称呼为观察者模式。
13、
问：vue中如何使css只在该块起效果
答：在.vue文件的style标签中添加scoped，这会使该style只对本组件及其子组件生效。
我回答是没用过.vue后缀文件，不过我猜是在该文件中设置style应该就好了。
14、
问：通常网站都有输入框，例如登陆注册，如何使其不保存以前输入的内容。
答：使用autocomplete="off"
说起来答到这个的时候，我特地扭头看了看我写的项目，因为实在不记得这个的英文名叫什么了，只是知道在input标签里设置一个属性就行，然后面试官声音都变了，所以面试是考试性质的不是考察性质的吗？我还以为可以看看自己写过的项目呢。
