解耦过于复杂的javascript模块

时间:2013-08-08 15:42:55

标签: javascript architecture module scalability decoupling

现在我正在开发相当庞大而复杂的webapp并且必须处理大量的客户端js代码,并且为了让我的生活更轻松,我正试图尽可能地解耦这些代码。

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

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

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

very simplified example

除了一些渲染逻辑外,负责此页面的模块应该处理:

  • 分页
  • 切换群组
  • 用dnd移动元素和群组
  • 剪切/复制/粘贴元素和群组
  • 刷新证书群组/ elems
  • elems内的一些逻辑
  • 在不久的将来可能会有更多的东西

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

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

更新

我想澄清一些事情。我非常清楚如何在我的代码中的多个文件之间分离模块(“模块”与模块模式)。

但我真正想要的是新的逻辑方式来分离单个模块中的问题(来自NKZ演示文稿的“模块”)。

1 个答案:

答案 0 :(得分:1)

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

此外,这里有一些关于创建可伸缩JS应用程序的更多资源:

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

另一个好资源http://addyosmani.com/largescalejavascript/

了解这些概念将允许您构建一个能够无缝地删除和退出模块的应用程序。您将能够在不影响任何其他模块的情况下更改模块,因为您的程序将松散耦合。此外,如果您选择将基本库(例如KnockoutJS)切换到Angular,此框架将允许您轻松交换基本库,而不会破坏大量代码。

此外,使用模块和中介或沙箱将使您的代码更容易测试。在任何非平凡的应用程序中,测试都很重要。我希望这有帮助!