基于Electron的思维导图软件开发技术研究_周宇鹏.pdf

产业与科技论坛2022年第21卷第24期Industrial&Science Tribune2022（21）24基于 Electron 的思维导图软件开发技术研究周宇鹏周子琦【内容摘要】随着计算机应用技术的飞速发展，各种各样的桌面应用不断被开发出来，人们开始使用电子版思维导图代替传统纸质办公去整理思维和项目，本文从 Electron 应用构建方面探讨了思维导图软件开发的技术研究。【关键词】思维导图;Electron 桌面应用开发;eact 组件化【基金项目】本文为北京信息科技大学 2020 年度大学生创新创业训练计划项目(编号:5102010805)研究成果。【作者单位】周宇鹏，周子琦;北京信息科技大学在人们的学习与工作中，一般的思维导图使用虽然便捷，但是随着信息量的逐步攀升，在寻找自己想要的知识或者要点的时候，就会有些捉襟见肘，逻辑关系会非常容易断线，所以想通过开发一款思维导图软件更好地管理思维和时间。这样一种带来愉快体验的工具，可以让人们一步一步地完成自己的目标和计划，用更漂亮的方式把自己的想法与认识传递给更多的人。一、技术支持(一)桌面应用构建库 Electron。Electron 使用 JavaScript脚本语言创建桌面应用程序，利用 Electron 进行开发的人员没必要了解其底层代码库和运作原理，而只需要了解 Elec-tron 的运行过程搭配官方文档，再结合基本的 Web 开发技术就能解决 90%以上的桌面应用开发问题。Electron 官方文档中明确给出了其运作机理:当通过 Electron 建立一个桌面应用程序时会直接创建一个主进程模块 Browserwindow。再通过这个模块来创建一个名叫子进程的新窗口并与主进程窗口进行交互。需要注意的是，无论是主进程还是子进程都会分别在各自独立的窗口中渲染出目标页面。想要利用好 E-lectron 这个桌面构建库，就需要利用好主进程和渲染进程分别渲染的这个特点，通过在合适的地方调度主进程和子进程切换来设计构建桌面应用。(二)前端组件化设计库 eact。熟悉原生前端开发的人都知道，想要更新 Web 界面中的内容需要操作网页中的各种DOM 元素，处理交互设计的时候还需要建立很多动作和操作节点，那么随着节点数量的增多和关系之间越来越繁杂，整理这些节点很容易导致前端开发出现意料之外的 Error。而使用 eact 前端组件设计库则不需要担心这个问题:eact 中的 DOM 树使得开发过程中可以完全不用管理 DOM 的变化，这样前端开发人员可以省下更多的时间并将注意力集中在应用功能和交互逻辑的实现上，极大降低了程序出错的概率，简化了前端开发。在传统前端开发中，一般都是先由前端代码完成 Web 网页的创建和渲染，并向后端服务器传送数计算方法相比，改进的 GA 计算程序有以下三方面优点:一是GA 的全局最优解和准最优解具有良好的一致性和收敛性;二是优化计算时间明显缩短;三是采用自适应终止计算条件，个别计算时长超过平均时长。此问题与初始个体的质量有关。七、结语本文将遗传算法应用于级联优化计算，并为了获得全局最优解，提出并验证了一种改进遗传算法，为级联优化提供了一种新的计算工具。根据优化计算试验结果，获得以下结论:一是采用 GA 优化的级联比采用传统优化的级联具有更高分离效率。二是 GA 的解具有很好的一致性，稳定地收敛于全局最优或准最优。三是采用 GA，计算时间有效大幅度降低。【参考文献】1 V D Borisevich，M A Borshchevskiy，S Zeng，D Jiang On i-deal and optimum cascades of gas centrifuges with variable overall J Chemical Engineering Science，2014，116:465 472 2F Mansourzadeh，A A Gh Khamseh，J Safdari，A NorouziUtilization of harmony search algorithm to optimize a cascade forseparating multicomponent mixtures J Progress in Nuclear En-ergy，2018，111:165 173 3S Zeng，D Jiang，Valentin Borisevich，Georgy SulaberidzeUse of the Q cascade in calculation and optimization of multi isotope separationJ Chemical Engineering Science，2011，66:2997 3002 4A Norouzi，A H Minuchehr，A Zolfaghari，A Hagighattal-ab Parameters Optimization of a Counter Current CascadeBased on Using a eal Coded Genetic AlgorithmJ SeparationScience and Technology，2011，46(14):2223 2230 5 Taekyoon Park，Yeonsoo Kim，Jong Min Lee einforced Ge-netic Algorithm using Clustering based on Statistical Estimation J IFAC PapersOnLine，2018，51(18):287 291 6 Weile，D S and Michielssen，E Genetic algorithm optimiza-tion applied to electromagnetics J IEEE Transactions on Anten-nas and Propagation，1997，45(3):343 353862022年第21卷第24期产业与科技论坛2022（21）24Industrial&Science Tribune据和信息实现交互。但是这样的缺点显而易见，即首次构建的速度较慢，针对这一点，eact 也很巧妙地通过 Node js 直接生成网页代码解决了速度问题1。图 1eact 生命周期1 自动化的 UI 管理。界面和显示数据的变化保持同步，eact 在数据和界面之间构造了一个联合层，把数据的变化转化成一系列事件，开发者只需要根据事件去转换界面的状态，这样可以大大缓解数据和界面之间的逻辑耦合度。2 更高效的 DOM 操作。为了提升效率，eact 在内存中保存了一个 VirtualDOM 的数据结构，VD 变化之后会缓存起来然后跟浏览器 DOM 进行对比后再改变。(三)图可视化引擎 G6。G6 是一个专注于关系数据的一个图可视化引擎，这个引擎可以非常方便地构建思维导图的节点关系，然后把它渲染在界面上。图 2图可视化引擎 G6二、应用开发项目使用 Electron 的客户端主进程渲染出应用 Web 界面，使用 G6 图可视化引擎实现思维导图节点的增、改、删和节点的布局平衡，使用 eact 创建交互式 UI 并渲染 G6 组件，将图像和组件渲染到 Electron 主进程中，使用 eact 实现应用数据的实时响应和自动更新。(一)调整布局。现阶段效果如图 3 所示。通过顶部菜单栏可以切换导图的编辑模式，其中默认模式为修改导图文本和对整体导图的缩放及查看，添加模式可以在父节点的位置添加子节点，删除模式则可以直接删除一个父节点及其子节点，还可以通过修改导图的布局模式进行整体布局调整;在基础思维导图的增删改查之上，还实现了进阶性的功能。图 3L 布局(二)支持 KaTex 公式显示。在结点标签编辑窗口中输入“正文内容 tex(公式内容)”即可在渲染的结点中保留正文内容的同时，将公式的内容渲染到下方的区域中并且保存数据到结点数据中，再次点击该结点时将在下方公式区域渲染该结点保存的公式。图 4KaTex 公式显示(三)支持思维导图节点数据保存和导入。使用 Ctrl+1快速保存数据，即可在当前目录下生成一个 data json 的文件，其中保存了图数据，使用 Ctrl+2 可以快速加载保存的数据。三、结语本文介绍了基于 Electron 思维导图开发使用的技术以及构建的效果，通过 Electron 框架+eact+G6 引擎，完成了思维整理工具的基本目标 用图形化的呈现实现思维的整理，并且实现了在现代流行的思维导图工具中所没有的数学公式渲染，能够使理工科的学习者在链接知识的过程带来完整的公式记录的体验。在未来的研究中，希望能够通过更加系统的方法去优化整理工具，给使用者带来更加新鲜的、更有创意、更加具有使用价值的工具。【参考文献】1 周兴宇，卞佳丽 基于 eact 的前端组件化研究与设计 EB/OL 中国科技论文在线，2016 01 0596