前端面试题目

[navydong]

1.前端登录的逻辑是什么？

登录的前后端交互流程、token过期问题

• 登录页 - 前端发送用户名和密码到服务端
• 服务端经过验证返回token给前端，表示身份验证成功，可以登录否则返回错误信息
• 前端拿到token存储到storage，并跳转到首页，发送ajax请求，并在请求头中携带token
• token过期、错误时，前后端定义过期及错误code，前端先根据code判断token是否过期及错误再进行返回体数据应用，如果过期、错误则跳转到登录页
• 用户一直操作，期间token过期（不能按上面的返回登录页，这样太不友好了），需要在操作时刷新token。
  1. 前端刷新 前端根据后端返回的token过期时间，设置定时器，定期刷新token（旧token换新token）
  2. 后端刷新 后端根据token过期时间，在过期时返回新的token给前端（返回体的增加newToken字段），存在旧token和新token同时发送给服务端的问题，需服务端解决

     2.水平垂直居中

问题来源：模态框能用flexBox的方式实现水平垂直居中吗?（没什么不可以的）

//html 
<div class="wrap">
<div class="box">
<div style="color: red;">123</div>
</div>
</div>

// 用flexBox方式
.wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  opacity: 0.5;
}
.wrap .box{
  border: 1px solid #000;
  background: #fff;
  width: 100px;
}

// 元素定位，left,right,top,bottom为0，margin:auto可以实现
      .box{
           position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
     }

//用伪元素方式
.wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    opacity: 0.5;
    text-align: center;
}
.wrap::after{
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.wrap .box{
    display: inline-block;
}

[navydong]

3. import来的依赖再webpack中是怎么处理的

tips: import、require在浏览器为什么不能使用

• 浏览器端的模块系统无法使用，不只是 require，即使 es6 标准中的 import 也无法支持。 原因在于目前模块之间依赖树的处理方法上还有一个明显的难题没有解决：
  • 因为只有在浏览器完全下载完一个 js 文件，并且宿主引擎解析到 require 或 import 这些关键字的时候，才知道还有依赖需要下载并解析。然而该文件依赖的这个模块可能还依赖于其他模块，理论上依赖树可以有无限长，目前这种依赖的同步加载方式无疑会带来严重的进程阻塞和极高的网络开销。
  • 目前并没有很好的解决方案使浏览器端自然地使用各个模块系统，只能使用 webpack 等工具预先将所有依赖打包，最终在浏览器环境中运行。

简书webpack打包原理链接

webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。 webpack就是识别你的 入口文件。识别你的模块依赖，来打包你的代码。至于你的代码使用的是commonjs还是amd或者es6的import。webpack都会对其进行分析。来获取代码的依赖。webpack做的就是分析代码。转换代码，编译代码，输出代码。 webpack本身是一个node的模块，所以webpack.config.js是以commonjs形式书写的(node中的模块化是commonjs规范的) webpack中每个模块有一个唯一的id，是从0开始递增的。整个打包后的bundle.js是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个function。function的内容则为每个模块的内容，并按照require的顺序排列。

[navydong]

4.数组去重

使用reduce高阶函数

const arr = [ 1,2,3,4,5,6,6,4,3,2 ]
function removeDulp (init, current){ 
      if( init.indexOf(current)>-1 ){
             return init
      }
      init.push( current )
      return init
}
const res = arr.reduce( removeDulp, [] )

5.瀑布流布局

使用css3 Mutil-column特性

<div class="masonry">
    <div class="item">
        <div class="item__content">
        </div>
    </div>
    <div class="item">
        <div class="item__content">
        </div>
    </div>
    <!-- more items -->
</div

.masonry {
   width:100%;
   column-gap:10px;
   column-count: 5;
   margin: 0 auto;
}
.item {
   box-sizing: border-box;
   -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
   page-break-inside: avoid; /* Firefox */
   break-inside: avoid; /* IE 10+ */
   padding: 10px;
   counter-increment: item-counter;
   /* 下面这两行代码是为了兼容火狐浏览器的因为内容太长而出现断层的问题。*/
   height:100%;
   overflow: auto;
}

/* 利用媒体查询，增加响应式布局 */
.masonry {
    column-count: 1; // one column on mobile
}
@media (min-width: 400px) {
    .masonry {
        column-count: 2; // two columns on larger phones
    }
}
@media (min-width: 1200px) {
    .masonry {
        column-count: 3; // three columns on...you get it
    }
}

[navydong]

6.函数柯里化及应用

// 正常正则验证字符串 reg.test(txt)

// 函数封装后
function check(reg, txt) {
    return reg.test(txt)
}

check(/\d+/g, 'test')       //false
check(/[a-z]+/g, 'test')    //true

// Currying后
function curryingCheck(reg) {
    return function(txt) {
        return reg.test(txt)
    }
}

var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)

hasNumber('test1')      // true
hasNumber('testtest')   // false
hasLetter('21212')      // false

[navydong]

一面：

1. 实现一个 array 多维数组，把他拍平。遍历以及 reduce 的实现方法。
2. Angular 预编译是怎么做的？@Component 中的元数据是如何被使用的？
3. Object.defineproperty 和 Object.freeze，哪个是深层的冻结？
4. Http 拦截器的原理是什么？如何实现？
5. 截流和防抖的区别，说说如何实现一个防抖函数。
6. Jwt 鉴权的整个过程，前端，后段。
7. 如何判断一个类型是否为其他类的子类？如果让你实现 instanceof ，你会如何实现？
8. 路由守卫的原理，如何实现？
9. 斐波那契在递归时，如何优化性能？
10. Node 中超大文件的读取，写入，移动是怎么做的？
11. 最近在看什么有趣的东西？可以介绍一下吗？(回答 decorator)
12. Eslint 的原理，如何检测出不符合规则的代码？ 二面：
13. Rx中的 swichMap 是如何实现的？
14. 看你最近做的项目，线上加载的 js 很多超过 200k 的，你打算怎么优化？
15. 如果让你实现一个全景空间(WebVr)你有哪些思路？
16. 谈谈对 scrum 的认识。