前端高频面试题：场景题与核心知识点

1. 评论组件里面有很多小的功能点，为了后期维护，就把他提取成了一个单独的组件。然后再文章组件中引入注册，使用就行了。
2. 头部组件抽离。
   1. 抽离一个 headerTop。
   2. 组件内容接受标题或标签。

<template>
  <slot name="left"></slot>
  <div>{{title}}</div>
  <slot name="right"></slot>
</template>
<script>
export default {
  props:['title']
}
</script>

3. 其他组件引入 components:{HeaderTop}。
4. 组件内使用 <HeaderTop title="标题"><div slot='left'>左边内容</div><div slot='right'>右边内容</div></HeaderTop>。

16、怎么做项目的权限控制

项目背景：现有一个后台管理系统，共存在两种类型的人员：1. 超级管理员（称作 admin）；2. 普通用户（称作 editor）。每种类型的人看到的操作栏并不一样，可以进行的操作也不尽相同，于是就需要程序处理一下各个权限问题。 具体实现思路：

1. 在路由 router.js 里面声明权限为 admin 的路由，通过 meta 标签来标示改页面能访问的权限有哪些。如 meta: { role: ['admin','super_editor'] } 表示该页面只有 admin 和超级编辑才能有资格进入。
2. 当用户登录后，获取用 roles，将 roles 和路由表每个页面的需要的权限作比较，调用 router.addRoutes(store.getters.addRouters) 添加用户可访问的路由，生成最终用户可访问的路由表。路由表存在 vuex 里面。
3. 使用 vuex 管理路由表，根据 vuex 中可访问的路由渲染侧边栏组件（菜单）。

17、axios 是怎么封装的

1. 在 Utils 中的 request.js 里面，引入 axios，配置基础路径、请求拦截器和响应拦截器，并返回 axios。
2. 在 api 文件里面，引入 request.js，根据各组件需要，配置各个组件的接口请求文件。

18、PC 端的兼容问题你遇到那些

1. img 下的留白。解决方案：给 img 设定 display:block。
2. 如果图片加 a 标签在 IE9-中会有边框。解决方案：给 img 设定 border:none。
3. rgba 不支持 IE8。解决方案：可以用 opacity。
4. 标签最低高度设置 min-height 不兼容 ie6/7。解决方案：如果我们要设置一个标签的最小高度 200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
5. 图片加 a 标签在 IE9 中出现边框。解决方案：img{border: none;}

19、移动端的兼容问题你遇到那些

1. 在 ios 和 andriod 中，audio 元素和 video 元素在无法自动播放。应对方案：触屏即播 $('html').one('touchstart',function(){ audio.play() })。
2. iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格。可以通过正则去掉：this.value = this.value.replace(/\u2006/g, '');。
3. IOS 移动端 click 事件 300ms 的延迟响应。引入第三方插件 fastclick 可以解决在手机上点击事件的 300ms 延迟。
4. h5 底部输入框被键盘遮挡问题。h5 页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决：
   1. 定义一个 class: .focusState {position: absolute;}。
   2. 利用监听键盘的收起展开事件来添加移除定义的 focusState 样式。

created(){
  var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  window.onresize = function() {
    // onresize 事件会在窗口或框架被调整大小时发生
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (clientHeight - nowClientHeight > 60 ) {//因为 ios 有自带的底部高度
      //键盘弹出的事件处理
      document.getElementById("apply").classList.add("focusState");
      // classList 该属性用于在元素中添加，移除及切换 CSS 类
    } else {
      //键盘收起的事件处理
      document.getElementById("apply").classList.remove("focusState");
    }
  };
},

20、移动端如何做真机测试

方式 1：公司有测试服务器，代码放到测试服务器上，进行手机访问测试。 方式 2：自己电脑上搭服务器，保证自己手机和电脑处于同一个局域网，然后用手机进行访问测试。

21、H5 和 app 的区别

1. H5 是通过链接进行访问，而 APP 是通过应用程序进行访问。
2. H5 在应用商店里面没有，而 APP 是有的。
3. H5 不需要审核就可以上线，而 APP 是需要审核的。
4. H5 的响应速度没有 APP 快。
5. H5 的开发成本比 APP 低。