两个(或n)脚本之间的通信-事件
我正在开发一个小游戏，用PIXI.JS制作画布渲染，用ReactJS制作all界面。游戏是半界面半游戏，所以它是相当大的，这就是为什么我使用了一个框架。
问题
我把我的游戏分解成两个脚本:游戏管理的“核心”，有点像控制器，我有第二个接口存储库。
我想在界面和核心之间进行沟通，但是我被困住了，因为我不知道该怎么做。你知不知道
表示我的想法的小模式：https://i.stack.imgur.com/CAHRi.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="app"></div>
<script src="./core.min.js"></script>
<script src="./ui.min.js"></script>
</body>
</html>Ideas
- 全局变量的core.min.js，以便我可以访问主类.
- 事件系统(但仍然停留在如何在两者上具有相同的)
谢谢。
-增加：
文件夹结构：
├─ .gitignore
├─ lerna-debug.log
├─ lerna.json
├─ package-lock.json
├─ package.json
└─ packages
├─ core
│ ├─ package-lock.json
│ ├─ package.json
| |─ source
│ | └─ index.js
│ ├─ README.md
│ └─ webpack.config.babel.js
├─ interface
│ ├─ package-lock.json
│ ├─ package.json
│ ├─ README.md
│ |─ webpack.config.babel.js
| └─ source
| ├─ index.html
| ├─ index.js
| └─ index.scss因此，每个子包都有一个webpack配置:一个用于核心，一个用于接口。正如我在评论中所说的，我们可以创建多个接口，可以与核心一起工作。
回答 1
Stack Overflow用户
发布于 2019-12-30 16:23:37
所以，一般来说，当您想要有“独立”组件时，首先要检查的是:耦合。您需要确保这些组件不相互依赖:没有“紧密耦合”(一个组件从其他组件调用一些“内部”方法，或者从其他组件访问变量，或者全局变量/函数等等)。
然后，您需要在这些组件之间定义某种“契约”--比如某种API和/或事件。你需要考虑：
- 哪种公共方法应该由一个组件公开，这样第二个组件就可以调用它们--反之亦然:也许第二个组件有时需要从第一个组件调用一些公开的方法。
- 哪种公共事件应该由一个组件分派，以便它们可以由第二个组件来处理。例如:让我们说，我们的游戏有一个分数计数器显示在用户界面(从你的描述“界面”)-但分数本身被保存在“核心”组件(所以“核心”是一个“真相的来源”的信息“得分”)。我们可以定义事件"GAME_SCORE_CHANGED“，其中包含有关新分数的信息。此类活动将由一个组件“核心”发送，并由第二个组件“接口”处理。在这种情况下，“接口”将更新显示的分数.
这种合同一旦确定，就必须得到这两个组成部分的尊重。如果您预期将来可能需要更改该契约(在API、事件等方面)，那么您还需要计划一个版本控制系统。然后允许一个组件独立于其他组件升级到较新的版本。过了一段时间，其他组件可能会修改这种更新的版本。然而，也有一个缺点:与旧版本的向后兼容性-换句话说:如果您知道其他组件仍在使用它们，则需要支持所有以前的版本。
为了确保该合同仍然得到遵守，您可以实现各种自动测试(顺便说一句-您应该尽可能地使用自动测试;)从长远来看，它将得到回报--例如：
当另一个组件是mocked
- integration tests
- end2end测试(使用硒、PhantomJS、无头铬等)时，一个组件的
- 测试行为。
以上提到的所有这些事情当然都不容易:)这就是为什么通常对于小型应用程序来说，人们不这样做的原因--因为它需要一定的开销、计划和纪律。
现在，从您展示的项目结构中，我看到了一些问题：index.html文件在interface组件中。这意味着interface组件需要初始化core组件，因为您需要在html文档中的某个地方启动应用程序。这已经是某种形式的耦合:)它可能通过引入另一个组件来解决:一个将“编排”这两个组件的小组件。
另外，特别是在项目开发的早期阶段，我建议将这些组件保存在一个存储库中。稍后，当您熟悉这个体系结构，组件将变得更大、更成熟时，您可以考虑将它们拆分为单独的repos。
请阅读更多关于我在以下链接中所说的内容的详细信息：
https://stackoverflow.com/questions/59513587
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号