前端高阶面试题

前端高阶面试

1.单行或多行文本溢出展示省略号的实现方法

css 实现

1. 单行文本

   固定容器宽度

   white-space：nowrap

   work-break:keep-all

   overflow:hidden

   text-overflow:ellipsis

2. ​ 多行文本

   添加line-clamp属性

   转成弹性布局

js

多行文本检测子容器和父容器的高度，子容器高度超过父容器时，对子容器的字符串内容进行遍历，配合slice对子容器的高度进行重新更改，当新的容器高度高于父元素高度时，截取最后两个字符并且替换成,"…"

#container {
  border: 1px solid;
  height: 90px; 
  width: 30px; // height 和 width 都必要
  /*overflow: hidden;*/
  overflow-wrap: break-word; // 设置文本溢出容器宽度时换行（但会溢出容器长度）
}
#content {
  line-height: 30px; // 必要，控制文本行数。否则文本会被挤压，行数不定
}

var $container = $('#container')
var $content = $('#container .content')
var str = $content.text()
if ($content.height() > $container.height()) {
  for (var i = 0; i <= str.length; i++) {
    $content.text(str.slice(0,i))
    if ($content.height() > $container.height()) {
      $content.text(str.slice(0,i-2) + "..");
      break;
    }
  }
}

2.你知道ES6中的Generator和yiled吗，在实际开发中有使用过吗?

Generator的初衷是用来解决异步的嵌套问题

语法: 使用 * 声明一个函数，这个函数在调用时会返回一个Generator对象，使用 * 声明的函数内部使用yield生成阻塞行为，yield后面声明的内容，配合一个外部调用的next方法来控制被阻塞代码的执行，并且yiled会将Generator中的value值设置成为刚刚被阻塞的内容的返回值，一个yiled配合一个next使用。

​ 所以在使用时通常可以将异步处理放在yiled后生成一个阻塞，配合一个返回值是promise的函数进行异步处理操作，需要使用两次的next，第一次是调用yiled后的函数，第二次是获得异步操作的结果

​ 实际应用:redux中间件的saga中takeEvery内部封装了这两部操作，两步并作一步直接让开发者拿到结果

3.redux处理的中间件有什么作用，使用过哪些redux处理的中间件？有什么优缺点

redux是相当于一个仓库，配合react使用时能够成为一种状态管理工具，但是redux本身的特性规定其在派发信息时只能派发同步并且是扁平化的内容，这样在redux中若想实现异步操作就会有很大的局限性，中间件等同于一个仓库管理员的身份，每次想去仓库中取货，必须经过管理员去取钥匙，redux-thunk，redux-saga是两个常用的中间件，通过中间件能够增强redux本身的功能，redux-thunk中能够处理函数，其内部机制就是识别派发的参数类型，若是函数则直接调用，若是对象直接进行派发的操作，redux-saga则在内部封装了一些方法能够拦截派发的请求，到内部执行异步操作后，再去处理数据。

redux-thunk直接函数，较为直接，但是由于派发内容可以是扁平的对象，也可以是函数，所以不易于维护。

redux-saga仍旧派发扁平对象，符合redux派发规则，但是实现的逻辑较为复杂，其实就是在内部封装了处理异步的行为。

4.简述微信支付的开发原理

微信支付存在两种模式的实现，其中第二种模式较为简洁且易于实现
基本逻辑:
首先，用户需要在开发者的系统中下单，完成下单行为后向开发者的服务器发送请求，这个请求能够携带商品信息等数据，在服务器接收到请求时，需要向微信服务器发送请求，以完成一个预支付的行为，在发送请求前需要按照微信服务器的规则生成一些必要的参数，微信服务器在接收到请求时，会对签名进行验证，随后会返回一个支付url，开发者服务器需要将连接处理成为二维码供用户扫码支付
之后，用户在扫码后微信服务器会验证连接真实性及有效性，在完成支付行为后，微信服务器会以一种异步的形式，向开发者服务器发送请求，以通知开发者服务器支付状态，方便开发者执行后续操作。

5.如何在react中构建一个弹出的遮罩层

实现方式:

1. 组件库
   直接使用antdesign组件库中的遮罩层

2. react portal
   portal是ReactDOM上的一个方法，能够更改某组件或节点的挂载位置
   我们在需要构建弹出层的时候，将某个元素利用portal直接提升到与根组件并列的位置上，加一些覆盖的样式，就能够实现一个弹出层

 ReactDOM.createPortal(
 	<myComponent></myComponent>,// 更改位置的节点
 	document.queryselector("#root")// 挂载位置
 )

为了便于复用，我们可以将portal封装在一个高阶组件或者装饰器中

import React from 'react'
import ReactDOM from 'react-dom'

function withModel (WrapperedComponent) {
 return class extends React.Component {
   render() {
     return (
       ReactDOM.createPortal(
         <WrapperedComponent {...this.props}></WrapperedComponent>,
         document.querySelector('body')
       )
     )
   }
 }
}

export default withModel

6.装饰器是什么

装饰器是ES6中一种增强类的功能函数，基本实现就是传入一个类，在修饰器加工后返回一个具有修饰器中功能的新的类，常用在react中，类似于高阶组件的实现，但时没有了高阶组件的嵌套结构，语法上清晰明了
但是在webpack环境中如果使用修饰器，需要另外载入一些解析修饰器语法的babel

    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "@babel/plugin-proposal-decorators": "^7.10.5"