解耦过于复杂的 javascript 模块答案

【问题标题】：Decoupling too complex javascript modules解耦过于复杂的 javascript 模块
【发布时间】：2013-08-10 10:07:54
【问题描述】：

现在我正在开发非常庞大和复杂的 webapp，并且必须处理大量的客户端 js 代码，为了让我的生活更轻松，我正在尝试尽可能多地解耦这些代码。

Nicholas Zakas (http://www.youtube.com/watch?v=vXjVFPosQHw) 和 Addy Osmani (http://addyosmani.com/largescalejavascript) 谈到可扩展的 js 架构时深受启发，并试图将他们的一些想法应用到我的工作中。

我已将我的所有代码分离到多个独立模块中，并与某种中介处理所有的相互通信。这种方法在大多数情况下效果很好。但在某些情况下，我认为还不够。

我正在研究的一个模块代表了一个非常复杂的类似列表的结构。这里有一些简化的例子：

除了一些渲染逻辑，负责这块页面的模块应该处理：

我已经执行了所有我可以执行的无关逻辑（例如编辑和删除逻辑通过事件执行到另一个模块），但是模块大小仍然很大（超过 1K 行代码），我不知道如何减少它。此外，我为我的模块使用模块模式，因此在多个文件之间分离逻辑更加困难。

所以我来这里问有没有办法将复杂的逻辑解耦在单个模块中？

更新：

我想澄清一些事情。我非常清楚如何在我的代码中的多个文件中分离模块（“模块”来自模块模式）。

但我真正寻找的是新的逻辑在单个模块中分离关注点的方法（NKZ 演示中的“模块”）。

【问题讨论】：

你的问题有点含糊，但总的来说，你可以把一个模块当成一个程序，在模块的围墙内你可以创建子模块、类、类型和纯函数来帮助减少混乱。由于内部程序循环减少，独立模块通常相对昂贵；例如：与 jQuery 插件相比，独立的列表排序器。模块总比乱七八糟的好，所以你走在正确的轨道上。可能需要掌握依赖注入和控制反转的概念才能将您的脚本提升到一个新的水平。
对这个主题感兴趣的人可能想查看t3，这是 Nicolas Zakas 本人和他在 Box 的团队最近发布的一个 JS 框架，它直接源于链接中的演示文稿中概述的概念题。 Here's Zakas 的一篇博文介绍它。
嗨，这有点晚了，但可能会有所帮助。 pogsdotnet.blogspot.sg/2017/07/…

【解决方案1】：

要将单个模块解耦为多个文件，我建议使用此页面上的增强模式http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

此外，这里还有一些关于创建可扩展 JS 应用程序的资源：

这是 Nicholas Zakas 就“创建可扩展的 JavaScript 应用程序架构”所做的演示视频。 http://www.youtube.com/watch?v=7BGvy-S-Iag

了解这些概念后，您就可以构建一个能够无缝地放入和取出模块的应用程序。您将能够更改模块而不会影响任何其他模块，因为您的程序将是松散耦合的。此外，如果您选择将基础库（例如 KnockoutJS）切换到 Angular，此框架将允许您轻松交换基础库，而不会破坏您的大部分代码。

此外，使用模块和中介或沙箱将使您的代码更易于测试。测试在任何重要的应用程序中都很重要。我希望这会有所帮助！

【讨论】：

谢谢@Spencer。起初，我知道增强模式，但我更愿意远离它，因为使用它我无法利用模块模式的某些特性。例如，对于某些 var 和函数，我不能拥有真正的私有范围。但是，实际上，我想不出更好的解决方案来将模块（从模块模式）拆分到多个文件中。其次，我已经提到了 Nicholas Zakas 和 Addy Osmani 构建可扩展 js 应用程序的方法，并且我已经在使用它。
最后一个。 Knockout 或 Angular 当然会让我的生活更轻松。一点点。但是另一个很酷的框架并不能解决大量逻辑集中在一个地方的问题。
糟糕！我错过了你说你已经阅读了我提供的两个来源的部分！不幸的是，除了使用扩充模式之外，我不知道将模块分解为单独文件的更好方法。