如何在复杂对象中组织JavaScript函数

3

我对你们如何布置包含许多函数的Javascript对象/类感兴趣,所有这些函数都需要保持在同一“级别”(即它们需要保持为对象的一级函数)。

因此,对于像这样的结构...

Namespace.class = {
    abc: 1,
    def: 2,
    ghi: 3,

    funcA: function(){
       // Some logic
    },

    funcB: function(){
       // Some logic
    },

    // Lots more functions

    funcN: function(){
       // Some logic
    }  
}

这些内容可能会变得非常难以处理。你该如何布置这些对象类型,使其易于阅读、易于维护,并且新开发人员能够快速上手呢?

我的方法是按字母顺序组织所有内容,这样如果你知道一个函数的名称,就大概知道该去哪里了。

但是,将执行相似操作和互相关联的函数分组是否更有意义呢?


2
答案是肯定的,它确实可以。 - raina77ow
3
当类/对象包含太多函数以至于你很难找到它们时,你应该将你的对象/类拆分成多个对象/类。 - Borre Mosch
@Borre,有时候是这样,但并不总是。有些类只是有很多函数而已。 - zzzzBov
1
我其实同意@Borre的观点。如果你发现你的类/对象变得过于庞大,可以将一些功能拆分出来。就像AngularJS建议将逻辑从控制器中取出并放入服务中一样。同样的逻辑也可以应用于原生JS。 - adimauro
@adimauro 这个逻辑适用于任何面向对象的设计,它是SOLID中的S:单一职责原则;一个对象只做一件事。 - Alexander R
3个回答

3

这里有很多方法,具体取决于您如何与代码进行交互。

需要记住以下几点:

1)如果代码笨重,那么重构可能已经过期了。

考虑将类分解为处理大类不同方面的较小类。如果使用静态函数而不是类,则将功能拆分成多个名称空间。

考虑将功能拆分成多个文件(例如,每个文件一个类),并具有合并和缩小输出的构建过程。

2)工具可以帮助。

如果您处理大型代码库,最好找到一个编辑器(或学习更好地使用其功能),以帮助您处理它。您的IDE可能会有一些功能,可以帮助您更好地浏览文件结构,如文件结构概述、代码区域或对象视图。

3)按照逻辑组织函数。

按字母顺序排列方法在某些情况下可能是合理的,但按功能分组可能更好。将导出的方法全部放在一个位置也可能是一个不错的主意:

Namespace = function() {
  var f1 = function() { };
  var f2 = function() { }; // this is internal

  // Exported methods
  return {
    f1 : f1
  }
}();

4) 文档化你的代码。

虽然阅读代码对于深入了解很有价值,但是代码文档对于第一眼理解是必不可少的。在开发过程中,这也可以对你有所帮助,因为你不必记住所有代码的怪癖。

5) 强制执行一个有益于你的编码风格。

你的编码风格可以帮助你更轻松地在代码中查找内容。如果你总是使用相同的间距、相同的大括号等等,那么查找函数定义就像 Ctrl-f: myFunc: 一样容易。


我认为需要重构一下,找到一些拆分的方法。尽管有时候一个类会有很多函数 - 你提到的IDE(以及zzzzBov)帮了很大的忙。谢谢。 - Fijjit

1

一种方法是将类模块化,并将其分成多个文件。通常,此方法用于为核心类提供插件。jQuery是一个很好的例子,它使用插件扩展了该类。

当您不想将同一类拆分为多个文件时,我发现按字母顺序排列函数顺序有帮助。

最终,函数的顺序不应该重要,只要你有足够好的IDE让你跳转到该函数的定义即可。


真是荒谬,我竟然不知道Visual Studio在右键菜单中有这种功能。+1 让我意识到我对我的IDE了解的比我想象的要少! - Fijjit

0

神对象是一种反模式,也是你的设计存在严重缺陷的很好指标。

如果你遵循单一职责原则并拥有一个支持智能感知和其他类似功能的智能IDE,那么尝试保持所有内容有序的投资不值得,也不必要,因为这将是IDE的工作,以在面板中显示所有函数定义以便快速访问和全局概览。

如果你真的想要对函数进行排序,可以使用自动化过程来保持你的对象文字结构化。

然而,这并不意味着你不应该有任何编码标准。我仍然会以有意义的方式组织我的代码,例如将私有/公共/特权成员放在一起。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接