这里记录一下自己关于这方面的一些想法：
1.项目架构
针对一个实时编辑/预览的可视化项目，那么至少会由两个模块组成（编辑模块、预览模块），如下图所示：
软件设计中一个重要原则就是：低内聚高耦合。
大家可能都做过业务逻辑上的模块化开发，但是今天这里说的是页面上的模块化开发。
2.如何实现页面的模块化开发
有这种想法的初衷是因为，针对一个实时编辑/预览的可视化项目，尤其是三维可视化项目，对于编辑模块和预览模块来说，这两个模块所需的技术栈很有很大的差别的，所以，往往会由两组人来开发。
所以，这两个页面的模块化问题就亟待解决。
那么我的方案是iframe + postMessage。
postMessage是一种跨源通信的解决方案，可以实现两个iframe之间的通信。
针对此类项目，编辑的是json数据，渲染的话也是根据json数据进行场景元素的添加/移除，所以postMessage进行传输的话也是json数据的传输，并且两个页面模块之间完美解耦。
3.拓展性
因为是用iframe实现页面模块的解耦，并且可以跨源通讯，所以针对后续的功能/页面模块添加也很方便，真正实现了即插即用的插件化思想，大大增强了项目/软件的可拓展性 。
4.增加额外线程来提高web项目的性能
我们都知道js是单线程的，所以对于三维可视化项目来说，逐帧渲染的特性使得js的单线程弊端越加凸显出来。用户的一些页面交互往往会使得场景瞬间卡顿。
就像我之前做的一个机械臂切割模具的仿真三维程序，由于BSP操作太吃cpu，就算最后用八叉树来减少BSP的计算量，但是如果切割精度要求很高的话，BSP的量还是会很大。
所以，我们可以将这部分BSP操作独立出来进行，这就是Web Worker！
主线程只用于场景的渲染，而大量的数据计算作业全部交由Web Worker 开辟的子进程来做，计算完毕直接将结果传给主线程，主线程利用该数据进行接下来的渲染操作。
标签：预览,模块化,BSP,可视化,模块,页面 来源： https://www.cnblogs.com/eco-just/p/13543673.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。