前端有什么难点_前端项目难点

在第三方的组件或者是一些类库 按照文档的流程去进行配置和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 需求：如何实现自动提取图片作为封面

解释 需求是模仿微信公众号后台发布文章的功能 ，发布文章的时候能够自动提取图片让客户选择作为封面

具体实现 通过正则匹配提取富文本的当中的img标签的图片，然后选择最大的5张图片出来，当用户选择之后就用该图片作为封面。用户也可以选择自主上传

11 需求：中后台当实现表单定制和打印功能

lodop在js中如何使用(react项目中如何实现打印功能） - 掘金

解析： 需求 要求在项目中能够实现把现有的表格实现打印。

具体实现 ：根据公司之前的使用案例 ， 引入对应的控件到项目中 ，LodopFuncs就是跟着官方提供的这个demo来修改使用。

12 使用 orgchart 来实现组织架构的可视化管理

https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md

官方的git上面有个demo ，下载下来然后跟着里面的参数修改

13 项目当中接入腾讯IM

需求：当时公司要求快速的接入一个 Im聊天而不是自己开发 ，然后我就看到了腾讯im

大概流程就是 引入sdk 然后封装 tim.js文件作为tim模块独立出来，引入对应的cos包，并导出tim实例，

当时遇到的难题就是 userSig 签名 ，为了能在本地登录账户，需要利用客户端计算UserSig生成签名，再配上userID，就可以登录到IM系统， 后来我还是参考了官方的示例文件 GenerateTestUserSig.js和lib-generate-test-usersig.min.js来生成签名 。

关于项目集成腾讯IM即时通讯相关记录 - 掘金

14 扫码传图

需求： pc页面上传图片 既支持传统的选择电脑的本地图片的上传方式 也要实现 扫一个二维码就能把手机上的图片进行上传

实现方式：上传组件实例化的时候生成一个请求后台返回一个 shotuuid 值，然后上传组件 一开始实例的时候就利用监听一个跟这个 id 相关一个event， 然后组件使用qrcodejs 一个后端写好的固定的链接加上这个id传参的链接 生成一个二维码，用户通过扫码这个二维码 在微信公众号内实现选择图片上传到服务端，服务端通过socket通知我的组件 上传结果，然后把上传的链接通知到我的组件内 ，大概就是这个流程

15 ocr文字识别

需求： 识别上传文件当中的 的文字内容，然后从当中提炼出 手机号码 和订单号

实现方式 项目中引入了tesseract.js，然后根据用户上传的文件从File对象当中使用tesseract进行识别 然后使用正则表达式去匹配手机号码和订单号（订单说是固定的格式） ，过程当中有准确率不高的情况，后来使用了p5.js 一个图片的预处理库（大概就是实现了 二值化、反转、扩张、纠偏或重新缩放），然后准确率得到了一定的提升。

如何用React和Tesseract.js进行图像到文本的转换(OCR) - 掘金

16 移动端 h5 开发中遇到的难题

1 用户分享海报需要加上自己的专属二维码

实现当时 通过qrcode.js生成二维码，并通过绝对定位把生成的二维码图片定位到预设的位置，用户保存的时候使用html2canvas把html节点的内容保存为图片（base64）

使用 html2canvas 将页面保存成图片_html2canvas topng_allen_csdns的博客-CSDN博客

2 运营要求在公众号的页面当中统计用户的访问行为，不使用第三方平台的的解决方案

经过自己的学习和了解，知道了新浪使用了css 当中的:after伪类标签可以使用content有url来请求一个静态资源，以此作为埋点，所以我封装了一个全局的 v-res 的指令， 使用该指令的节点就自动加上一个带有埋点功能的样式。