biraotian的博客

随着企业数字化的发展，各行各业都需要不断积攒行业数据，数据的来源有很多，但是一般这些数据都需要通过人机耦合的方式进行数据准确性的确认。为了实现模型跑出来的结果可以准确的显示在页面中，正确的结果又可以反哺给模型，所以在前端做了很多尝试。我们实现的有3种:1是把内容转成图片，利用ocr识别，前端svg绘制坐标。2通过把图片/文本加上编号，缺陷是结构要足够简单，复杂排版不满足。3是把文档解析成html，对html进行打标签。这里只讲第三种，也的最近刚写的demo，有兴趣的可以拷贝到自己的项目中试试运行环境：no

接触qiankun框架也有一段时间了，一直没什么产出，这篇文章来源于组内同学的分享ppt，对于新人来说可能觉得没头没尾，希望大家见谅。虽然以下内容已在多个项目中得以验证，但是缺少部分小细节，大体思路如此，仅供参考思路非常重要的3个钩子：getQianKunConfig().then((result) => { (window as any).qiankun.registerMicroApps(result.subApps, { // beforeLoad: app => {

今天遇到一个很有意思的事，见下图，之前可能遇到过，但是忘记了，今天记录下来，加深下印象。起初以为是使用JSON.parse(JSON.stringify(obj))进行深拷贝，把导致特殊的节点被过滤掉了（这个项目里，前面的代码正好遇到过）。后来查了深拷贝的文档后，排除了这个问题。在控制台调试后发现，原来是因为在console.log之后删除了当前节点，居然闹了个大笑话。不过，这个场景还是得记录下，在删除一个属性之前打印该对象，默认是显示当前属性的，但是点开箭头之后，当前对象又是不包含此属性的。以后再

基于wavesurfer，regions 封装的可视化音标标注控件/*! * wavesurfer.js regions plugin 5.1.0 (2021-08-05) * https://wavesurfer-js.org * @license BSD-3-Clause * @author huinian */import WaveSurfer from '@/assets/js/wavesurfer';import Regions from '@/assets/js/wavesur

类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。今天就遇到这种情况（伪代码）：/** * 添加 mousemove事件 */ addMouseMove () { document.getElementById('xxx').addEventListener('mousemove', this.regionBarMouseMove); } /** * 移除 mousemove事件 */ removeMou

如果你想要实现height：0 到 height：auto的过渡效果，直接用height+tansition，你会发现没有过渡效果，下面的方法会让你快速实现过渡效果，原理是获取子元素的真实高度，赋值给父元素的max-height。css 部分（menu-item-active是激活状态，默认高度是0，激活状态下是auto）：.menu-item { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden;

因为我们的业务是和图像识别相关的，所以我们集成了图像自动识别引擎。引擎可以把图片上的内容，识别出来并用一个多边形包裹起来。如下图：但是有一种场景，只需要引擎识别出某一块区域即可，比如只识别标题部分。这就需要我们先限制识别区域，再告诉引擎识别哪一部分，但是最后我们没有使用这一方案，而是采用的第二种方案：引擎识别所有结果后，由前端完成对结果筛选。所以我们有了“判断一个点是否在多边形内，判断一个多边形是否在另一个多边形内”这个需求。核心代码就两块// 计算一个点是否在多边形之内let isInPolyg

websocket有什么特点？在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信

vue3发布以后，经常听到按位运算，到底什么是按位运算，了解以下4点，轻松掌握常见按位运算。为什么大佬们要搞这些骚操作呢，很重要的一个原因就是快。位运算是在二进制层面上进行的运算，更贴近底层，比高级编程语言少了编译的过程。一、按位非运算符是~,作用是将每位二进制取反十进制2的二进制表示为:0000,0010 -> 1111,1101(每位都取反) 这是内存中的保存形式。记忆方法是~(A) = -(A+1)二、按位与&是二元运算符，它以特定的方式的方式组合操作数中对应的位，如

event loop 是一个执行模型，咱们这里可以简单的理解为就是js代码的执行模型。浏览器和NodeJS都实现了自己的event loop。浏览器的event loop 是在html5规范中明确定义的。NodeJS的是基于libuv实现的，可以参考libuv的文档或者nodejs的文档。 libuv已经对eventloop做出了实现，而在html5规范中，只是定义了浏览器的event loop模型，具体实现交给了浏览器厂商。**浏览器的eventloop执行模型：**宏任务队列和微任务队列以

篇首语： 如何才能在工作中进步？1、不断的学习和钻研，是保持个人竞争力的最佳方式。2、利用好现有平台，把最优的实现运用到项目中。插件自身的基本要求1、作用域相互独立，私有变量不能影响使用者的环境变量；2、需具备默认设置参数；3、需提供部分API，可以通过该API修改插件；4、支持链式调用；5、需提供监听入口，针对指定元素进行监听，使得该插件可以正常运行。正常的函数声明注：全局查找变量性能较低自执行函数前的符号说明：https://blog.youkuaiyun.com/u0126154.