在第三方的组件或者是一些类库 按照文档的流程去进行配置和api的调用就能实现功能的需求，

其实也不能说太难，只是在第一次对接的时候有一定的学习成本。

其实我觉得前端最难的不是框架的应用和类库成使用，而是数据的处理，在我们的实际开发过程当中，

有些后台返回的数据并不能直接用于我们的类库，这个时候往往需要进行数据的处理，

改变数据的层次结构等来满足目标组件或者类库的时候。

这个比较考验前端的数据结构的处理能力，要对数组或者是函数的递归调用等很熟悉才行。

1 无焦点扫码枪

通过全局监听 keypress 事件 然后获取 ev 对象是否为 Enter 事件

计算 扫码枪录入的平均间隔时间 10s 通过的话就请求接口获取商品信息

原理：扫码枪就是一个输入设备，和电脑连接扫码就会输入数字最后有个 Enter 字符 如 1 2 3 Event

判断每次的 ev 对象里面的 key 不同执行不同逻辑 数字就 记录第一个输入的时间 然后将数字添加到数组 

如果超过了 50 毫秒每输入就清空数组 避免之后二次输入

是 Event 就获取第一次记录时间 和 当前时间相差的时间戳 除以 数组的长度 判断是否小于 10 毫秒

如果提到了在任何页面扫码都可以 就要说 会先判断当前的页面是否是盘点页这样 是的话就正常流程，

否则就是默认弹出一个表单框里面有对应的商品信息显示这样

2 权限管理

一般可以分为 接口权限 按钮权限 路由权限

路由权限

3 scoket实现双向视频通话

createOffer // 创建一个offer 对象

video 需要添加 autoplay pl

webrtc的一些基础概念:

1 SDP

2  const pc =  new  RTCPeerConnection()

3 createOffer

4 createAnswer

5 setRemoteDescription

6 setLocalDescription

7 navigator.mediaDevices( getUserMedia getDisplayMedia )

8 pc.onicedidate()

9 pc.oncl

 具体的实现;

1 通过navigator.mediaDevices来获取摄像头或者是音频信息( 也可以是共享屏幕)

2 通过createOffer创建一个 offer 然后得到对应的offer的sdp

3 通过socket.io把这个sdp给到对方

4 接受放在收到提示的时候如果确认通讯的话会调用createAnswer来创建一个answer对象 然后也会获得对应的answer的sdp,再把这个 ans的sdp传递给发起方

5 无论是发起方 还是 接收方 都是分别跟别双方的关系去调用 setRemoteDescription 和 setLocalDescription传入对应的sdp就完成了通讯。 （ 发起方的local是offer remote是ans  ， 接收方的local 是ans remote 是offer ）

6 通过 rtc实例对象的 ontrack 事件的监听让video标签的srcObject播放媒体流。

4 实时聊天室怎么实现的

登录后会拿到对应的uuid然后和后端建立连接

客户端主要是通过 socket 的 io 实现长连接来达到 emit 提交信息 然后通过 on 接受对应的信息 然后渲染到页面上

实现客户端的逻辑，包括发送消息、接收服务器广播的消息、处理加入聊天室请求等。

后端主要就是创建了一个socket的连接 用来监听客户端的连接请求

实现服务器端的逻辑，包括接收客户端消息、处理加入聊天室请求、广播消息给聊天室中的其他成员等。

然后添加了一个 uuid 用来区分各用户在各聊天室消息的唯一性

5 excel 如何导入导出 -sheetjs

js-export-excel导出：

<code>const handleExport = () => {

const option: {

fileName: string;

datas: {

sheetData: CustomerType[];

sheetName: string;

sheetFilter: string[];

sheetHeader: string[];

}[]

} = {

fileName: "客户信息", // 导出的文件的名称

datas: [

{

sheetData: filterTableData.value, // 表格数据

sheetName: "客户信息", // excel表格中表格的名字

sheetFilter: ["number", "name", "sex"], // 需要导出的数据的字段

sheetHeader: ["客户编号", "客户姓名", "客户性别"], // 表头的值

}

]

}

var toExcel = new ExportJsonExcel(option); //new

toExcel.saveExcel(); //保存

ElMessage.success("导出成功")

}

XLSX导入:

import * as XLSX from 'xlsx'

<input type="file" hidden id='fileRef' onChange={importExcel} />code>

const importExcel = () => {

const file = (document.getElementById('fileRef') as HTMLInputElement).files![0]

if (!file) return

const reader = new FileReader()

reader.readAsBinaryString(file!) // 转成 二进制格式

reader.onload = function () {

const workbook = XLSX.read(this.result, { type: 'binary' });

const tableData = workbook.Sheets['产品列表'] // excel表格中表格的名字，拿到表格数据

const proList: any[] = XLSX.utils.sheet_to_json(tableData) // 转换成产品列表js对象

proList.forEach((item: any, index: number) => {

item.index = index

})

setProList(proList)

}

}

6 自定义海报生成