关于第一次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标签里设置一个属性就行，然后面试官声音都变了，所以面试是考试性质的不是考察性质的吗？我还以为可以看看自己写过的项目呢。

转载于:https://www.cnblogs.com/FreezeNow/p/11145931.html