【2019/09/18】前端面试

2,120 阅读5分钟

STX前端面试:

1、react 与 vue的 区别

  • 1)设计理念上的区别:Vue使用的是可变数据,而React更强调数据的不可变。所以应该说没有好坏之分,Vue更加简单,而React构建大型应用的时候更加棒
  • 2)数据流的不同:
    Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。 所以现在我们只有 组件 <--> DOM 之间的双向绑定这一种。 React 从诞生之初就不支持双向绑定,React一直提倡的是单向数据流,他称之为 onChange/setState()模式。
  • 3)组件通信的区别:

在Vue 中有三种方式可以实现组件通信:

  • 父组件通过 props 向子组件传递数据或者回调,虽然可以传递回调,但是我们一般只传数据,而 通过 事件的机制来处理子组件向父组件的通信
  • 子组件通过事件向父组件发送消息
  • 通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据,可以跨越多个层级。

在 React 中,也有对应的三种方式:

  • 父组件通过 props 可以向子组件传递数据或者回调

  • 可以通过 context 进行跨层级的通信,这其实和provide/inject 起到的作用差不多。 可以看到,React本身并不支持自定义事件,Vue中子组件向父组件传递消息有两种方式:事件和回调函数,而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的,这可能是他们二者最大的区别。

  • 4)模板渲染方式的不同:

    • React 是通过JSX渲染模板
    • Vue是通过一种拓展的HTML语法进行渲染
    • 但其实这只是表面现象,毕竟React并不必须依赖JSX。在深层上,模板的原理不同,这才是他们的本质区别:
    • React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值,条件,循环等,都是通过JS语法实现的
    • Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如条件语句就需要 v-if 来实现

2、讲讲axios

Axios的特点

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应 (就是有interceptor)
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

基本用法

//执行get请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  }).then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

3、现在有一个ul,里面有四个li,给里面的li元素for循环,每个绑定一个onclick事件,push一个li,这个push的li有没有绑定事件

没有

4、响应式布局如何做及rem原理

rem是根元素字体的单位,比如 html{font-size:16px;} ,1rem相当于16px

通过修改根节点的font-size大小,实现等比例缩放

1、给根元素设置字体大小,并在body元素校正 - html{font-size:100px;} - body{font-size:14px;}

  • 使用rem代替px,直接除100即可
.menu li{
	display: table-cell;
	padding: .1rem .3rem;/*相当于10px 30px*/
}

2、绑定监听事件,dom加载后和尺寸变化时改变font-size

详细解析: juejin.cn/post/684490…

5、有一个大盒子,里面有一个小盒子,小盒子的宽高为100px,如何让小盒子在大盒子中间水平垂直居中

  • 1)定位居中1
<style>
     *{
         margin: 0;
     }
     .one{ 
         position: relative; 
         width: 100%; 
         height: 500px; 
         background: #c5c5c5;
     }
     .two{ 
         position: absolute; 
         left: 50%; 
         top:50%; 
         margin-left: -100px; 
         margin-top: -100px; 
         background-color: #a00; 
         width: 200px; 
         height: 200px;  
     }
 </style>
 <div class="one">
     <div class="two"></div>
 </div>
  • 2)定位居中2
<style>
    *{
        margin: 0;
    }
    .one{ 
        position: relative; 
        width: 100%; 
        height: 500px; 
        background: #c5c5c5;
    }
    .two{ 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%,-50%);
        background-color: #a00; 
        width: 200px; 
        height: 200px;  
    }
</style>
<div class="one">
    <div class="two"></div>
</div>
  • 3)flex布局
<style>
   *{
        margin: 0;
    }
    .one{ 
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; 
        height: 500px; 
        background: #c5c5c5;
    }
    .two{  
        background-color: #a00; 
        width: 200px; 
        height: 200px;  
    }
</style>
<div class="one">
    <div class="two"></div>
</div>

9、如何实现上拉加载

  • scrollTop:滚动视窗的高度距离window顶部的距离,它会随着往上滚动而不断增加,初始值是0,它是一个变化的值;
  • clientHeight:它是一个定值,表示屏幕可是区域的高度;
  • scrollHeight:页面不能滚动时是不存在的,body长度超过window时才会出现,所表示body所有元素的长度,

由上面的三个值所产生一个原理公式:

scrollTop + clientHeight >= scrollHeight

let clientHeight  = document.documentElement.clientHeight; //浏览器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;

let distance = 50;  //距离视窗还用50的时候,开始触发;

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("到底了,开始加载数据");
}

10、有一个大盒子,大盒子很大,想让上面一排有四个正方形,如何实现

blog.csdn.net/weixin_4184…

11、跨域问题

juejin.cn/post/684490…

12、数组的方法

juejin.cn/post/684490…

13、自我学习的平台

14、如何封装组件,封装组件会用到什么技术

15、介绍js原型?何时会用使用到原型

juejin.cn/post/684490…

关于react

react的传参方式如何传递,子传父如何传递

关于vue

1、何时使用vuex

2、关于vue的父子组件通信,参数分别是什么

3、vue的生命周期

4、第一次页面加载会触发哪几个钩子

5、用swiper插件是会遇到哪些兼容问题,如何解决