前端有什么难点

阅读本书更多章节>>>>

在第三方的组件或者是一些类库 按照文档的流程去进行配置和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导出：

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} />    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 自定义海报生成

接下来我们可以通过   html2canvas  来把一个指定的html节点转换成 canvas 然后保存成图片
这里涉及到三个类库
1 qrcode-vue  vue当中的一个二维码生成组件
https://github.com/scopewu/qrcode.vue
2 html2canvas  把一个指定的dom节点以canvans的形式生成截图
https://html2canvas.hertzen.com/ 
3 download-canvas 下载canvans的类库
https://github.com/huytbt/download-canvas

7 需求：需要支持自定义快捷键设置

解释： 让用户可以在中后台设置快捷键 ，进行一些常规的弹窗拉起 ，比如录入操作 锁屏操作

实现方式： 创建一张本地字典，可以支持用户输入快捷键并帮助他绑定相关事件。

（一大串json，放到localStorage里面，例：{ keyBuy: 114, keySell: 115 } ）

那么本地就会存储对应按键编码以及绑定的事件函数，按这些快捷键，就会监听相应的事件，触发对应的事件函数。

8 需求：自定义布局、自定义拖拽改变位置和大小

解释： 有一些统计信息的展示界面，用户可以通过拖拉的形式来放置自己要看的信息（比如财务只想看 日流水统计 运营看 用户访问量 注册量） , 还可以调整窗口大小

解决方式：自己开发的话成本较高；然后通过线上选型分析，最终使用了 vue-grid-layout来实现对应的功能GitHub - jbaysolutions/vue-grid-layout: A draggable and resizable grid layout, for Vue.js. ；选型的理由 该组件下载量大说明社区活跃，遇到了问题可以有更好的提问的渠道，而且该组件api 友好，所以就选择了这个组件。

9 需求：实现离线编辑及自动草稿

解释： 在用户网络丢失链接 或者 意外退出，自动帮用户正在填写的信息进行草稿的形式记录，然后用户重新进入之后 提示用户有草稿存在是否使用草稿的内容。

实现方式： 在组件销毁的生命周期里面，通过vuex + 数据持久化( vuex-persistedstate) 记录数据，如果是表单的数据就按照表单的对象存储，然后通过mixin的方式写一个mounted 里面检测当前页面是否是输入预设的需要录入的页面，如果是 就检测是否有草稿，如果有就提示用户，然后根据用户的选择进行加载

10 需求：如何实现自动提取图片作为封面

解释 需求是模仿 阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-13/158269.html，文章来源：网络cs，作者：峨乐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！