bryfroze

1. 简介 mxgraph 第一个版本提交于 2012 年，当时前端工程化还在启蒙阶段，工具链严重缺失，用当下的眼光去看待 mxgraph 简直不堪入目。但是框架的架构设计的非常优雅，即使放在当前前端百家齐放的环境下依然足够优秀，作为一个范本，研究 mxgraph 源码可以学习…

1. 目录说明 javascript: mxgraph 核心代码文件夹，其中 javascript/src 为框架源码；javascript/examples 为示例代码。 mxgraph 仓库主要包含几类类型的资源，最核心的是 javascript/src 目录下的图形引擎源…

1. 简介 mxgraph 内部使用一种树形数据结构记录图形文档的内容，在内容树上，每一个节点代表一个图形元素，元素信息会被存储在节点对象上；节点的父子关系表示父节点图形包含子节点图形，可以用于实现图形的分层、分组功能。例如，对于下面的图形： 内容树是图形文档的底层数据模型，有…

具体来说在我们项目中有一堆边缘节点，每个节点上部署一台强大的GPU服务器及N个网络摄像头，服务器持续记录摄像头的高清码流，同时跑模型持续分析视频内容；边缘服务器与数据中心之间有一条网络链路，但带宽非常小，通常只作数据、控制命令下发用；数据中心部署了一系列web服务，为不同用户提…

事务 是 mxGraph 内部实现的一套更新控制方法，在一次事务过程会持续收集所有变更请求，直到事务结束后一次性推送到渲染器 mxCellRenderer 执行图形UI更新，或者在出现异常时允执行回滚。技术上来说， 事务 并不是必要的，我们可以直接使用图形更新接口，结果会被即时…

1. 拖拽的实现 首先，需要简单了解一下mxGraph是如何实现拖拽的。在 mxGraph 内部有一个 mxGraphHandler 类专门用于监听鼠标 keydown、mousemove、keyup 等事件，当用户选中某个图形并执行鼠标拖拽后，会触发 mxGraphHandl…

简介 webpack是什么？ 简单的说，webpack就是一个现代前端开发的打包机。现代前端非常流行使用模块化的方式开发，webpack所做的就是将各个js模块合理的打包成bundle或者chunk。

无论是对象还是数组，需要实现双向绑定的话最终都会执行这个函数，该函数可以监听到 set 和 get 的事件。 在 Object.defineProperty 中自定义 get 和 set 函数，并在 get 中进行依赖收集，在 set 中派发更新。接下来我们先看如何进行依赖收集…

这里可以看到我们给Promise对象定义了3种状态以及一个用来当做默认成功会传入的值value和失败会传入的原因reason，同时定义了resolve和reject方法，将它们传入executor，也就是我们在调用生成Promise对象时会传入的执行函数，里面放着我们需要调用的…