解耦过于复杂的javascript模块

pan*_*fil 5 javascript architecture scalability module decoupling

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

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

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

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

很简单的例子

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

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

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

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

更新:

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

但我真正寻找的是在单个模块中分离问题逻辑方式(来自NKZ演示的"模块").

Spe*_*cer 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,该框架将允许您轻松切换基础库,并且不会破坏太多代码。

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