20240116 前端开发日报

前端对接电子秤、扫码枪设备serialPort 串口使用教程；【面经】5年前端2023面经（滴滴、集度、百度、地平线）；如何用 Canvas 实现 PS 的液化功能；Gitlab CI/CD自动化部署；如何实现一个Canvas渲染引擎(一)：节点和层级关系；开源 UI 组件库和开发工具库概览 | 开源专题 No.59；Vue3 源码解读-watch 实现原理；Vue2 + Monaco Editor 使用教程

1. 前端对接电子秤、扫码枪设备serialPort 串口使用教程

   因为最近工作项目中用到了电子秤，需要对接电子秤设备。以前也没有对接过这种设备，当时也是一脸懵逼，脑袋空空。后来就去网上搜了一下前端怎么对接，然后就发现了SerialPort串口。 SerialPort

2. 【面经】5年前端2023面经（滴滴、集度、百度、地平线）

   两岸猿声啼不住，轻舟已过万重山。我们终究都会找到一份满意的工作的，只要你能熬得住，有耐心，所以不管何时，我们都要心怀光明，船到桥头自然直，车到山前必有路，没有什么事情是到不了终点的,行则将至。

3. 如何用 Canvas 实现 PS 的液化功能

   如何用 Canvas 实现 PS 的液化功能？本文带你进入 Canvas 和传统图像处理的魔法世界~

4. Gitlab CI/CD自动化部署

   一来公司用的仓库本就是gitlab，其中的部分项目也用到了当中的CI/CD工具，但是这些都是前人留下来的遗产，具体的搭建过程对我来说就是个黑盒；二是很久很久之前买来的云服务器一直在吃灰。秉承着…

5. 如何实现一个Canvas渲染引擎(一)：节点和层级关系

   canvas并不会主动维护一个层级关系，我们能做的事情，只有画圆、画矩形、画线等，至于像DOM那样，在一个节点上调用appendChild来给这个节点添加子节点这种事情，在canvas里是不存在的..

6. 开源 UI 组件库和开发工具库概览 | 开源专题 No.59

7. Vue3 源码解读-watch 实现原理

8. Vue2 + Monaco Editor 使用教程

9. Web前端 —- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

   文章浏览阅读624次，点赞41次，收藏34次。本文介绍了vue3中的computed计算属性和watch侦听属性

10. 开源标准统一Webhook

11. 与react的初定情素

    文章浏览阅读127次。努力打好基础才能学好它！由于我使用vue已经3年了！来学习react，所以我写的只要我自己看得懂的就行！学这我自己会与vue的语法做对比的！

12. 从回调地狱到async/await：JavaScript异步执行的进化之路

13. JS异步问题及常见的异步场景分析

14. 前端分页加载/懒加载预览PDF

15. Ventoy：打造你的万能启动 U 盘 | 开源日报 No.146

16. Vue3+antDesignVue实现表单校验

    文章浏览阅读315次，点赞13次，收藏4次。【代码】Vue3+antDesignVue实现表单校验。

17. Vue3.js+Nginx 之代理，反向代理(Vue代理部署不生效)

    文章浏览阅读172次，点赞5次，收藏2次。Vue代理部署上线不生效

18. Vue+Video.js实现视频抽帧返回抽帧图片Base64

    文章浏览阅读136次，点赞3次，收藏3次。【代码】Vue+Video.js实现视频抽帧返回抽帧图片Base64。

19. vue3中watch的使用及一些问题

    文章浏览阅读105次，点赞3次，收藏2次。情况三（在多介绍一个）通过ref定义一个对象(此处仍然无法正确的获取oldValue)因为它内部还是会求助reactive的Proxy(注意此处监听ref定义的对象需要.value哦，结构html里不需要)。⑤情况五：监听reactive所定义的某些响应式数据中某个属性（这里oldValue是可以使用的）—-某些。③ 情况三：监听reactive所定义的多个响应式数据(此处无法正确的获取oldValue) —全部。① 情况一：监听ref所定义的一个响应式数据。(注：这里我用的是setup语法糖)。

20. React16源码: React中调度之batchedUpdates的源码实现

    文章浏览阅读509次，点赞8次，收藏6次。进入到 requestWork 函数中的相关判断，可以在源码 nodemodules/react-dom/cjs/react-dom-development.js 中。找到 requestWork 进行debugger，重启 react项目，之后在 Chrome 中调试。在 ReactFiberSchduler.js 中的。

21. vue-cli使用侧边栏和面包屑以及三级路由跳转（通俗易懂，超易上手）

    文章浏览阅读114次，点赞5次，收藏3次。该教程是为了给新手使用的(设置方便通俗易懂)，使用的是最普通的路由方式进行侧边栏和面包屑的显示(升级版有使用递归显示)

22. antdvue之vbenadmin树自定义搜索

    文章浏览阅读269次，点赞9次，收藏5次。placeholder="搜索"/>选中的经营范围:

23. [GN] 使用vue3+vite+ts+prettier+eslint

    文章浏览阅读260次，点赞9次，收藏4次。做到代码格式等统一，此时，esint和prettier就要登场了。eslint是代码检测工具，可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义。prettier是代码格式化工具，作为代码格式化工具，能够统一你或者你的团队的代码风格。=> 安装prettier+eslint包，并做一系列的配置

24. 关于antd vue form表单回显的问题（vue2）(antd 1.x)

    文章浏览阅读240次，点赞7次，收藏4次。动态表单回显失败，antd vue 1.x，适用于vue2

25. vue-form-render + vue3

    文章浏览阅读111次，点赞2次，收藏2次。JSON Schema是基于JSON的格式的规范，用于定义JSON数据的结构。它是根据2011年到期的IETF草案撰写的.JSON Schema。1.创建一个json文件，比如data.json，并保存在项目目录下的static文件夹里。注意：读取本地json文件时需要在开发环境下运行，因为静态文件只能在开发服务器中访问。完整的结构验证，对自动化测试很有用。完成结构验证，验证客户提交的数据。清晰，人性化和机器可读的文档。描述您现有的数据格式。