在两个（或n个）脚本之间进行通信-事件

问题描述 投票：1回答：1

我正在使用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>

想法

  • 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

因此，每个子包都有1个webpack配置：1个用于核心，一个用于接口。就像我在评论中告诉我们的那样，我们可以创建可以与核心一起使用的多个接口。

javascript events module pixi.js
1个回答
0
投票

通常，当您要具有“独立”组件时，要检查的第一件事是：依赖项。您需要确保这些组件彼此不依赖：没有“紧密耦合”（一个组件从其他组件调用某些“内部”方法，或从其他组件访问变量，或访问全局变量/函数等）。 >

然后，您需要在这些组件之间定义某种“合同”-因此需要某种API和/或事件。您需要考虑：

  • 哪种公共方法应该由一个组件公开，以便可以由第二个组件调用，反之亦然：也许第二个组件有时需要从第一个组件调用某些公开的方法。
  • 哪种公共事件应由一个组件调度，以便可以由第二部分处理。示例：假设我们的游戏有一个得分计数器，该得分计数器显示在UI（您描述中的“界面”）中-但得分本身保留在“核心”组件中（因此“核心”是“真相的来源”）有关“得分”的信息）。我们可以定义事件“ GAME_SCORE_CHANGED”，其中包含有关新乐谱的信息。此类事件将由一个组件“核心”调度，并由第二个组件“接口”处理。在这种情况下，“界面”将更新显示的分数。

    • 为了确保此合同，您可以实施各种自动测试（顺便说一句：不仅为此，您还应该对所有内容使用自动测试；）从长远来看，它会有所回报）-例如：

  • 模拟另一个组件时测试一个组件的行为
  • 集成测试
  • end2end测试（使用Selenium，PhantomJS，无头Chrome等）。

    • 当然，上面提到的所有这些都不容易：)这就是为什么通常对于小型应用程序人们不采用这种方法-因为它需要一定量的开销，计划和纪律。

现在，从您显示的项目结构中，我看到了一些问题：index.html文件位于interface组件内部。这意味着interface组件将需要初始化core组件-因为您需要在html文档中的某个位置启动应用程序。这已经是某种耦合：)可以通过引入另一个组件来解决：一个小的组件将“协调”这两个组件。

而且，尤其是在项目开发的早期阶段，我建议将这些组件保存在一个存储库中。稍后，当您熟悉此体系结构，并且它们会变得庞大而成熟时，您可以考虑将其拆分为单独的存储库。

请阅读以下链接中有关我所说内容的更多详细信息：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.