Question

现在我的应用程序中有以下静态类：

function Tools() { }
Tools.someFunction = function(arg1, arg2) {
   // do something
};

但是我将我的js文件的架构更改为包含所有类的一个对象文字，所以我需要这样的东西：

var app = {
   someController: function() {

   };
   tools: function() ...
};

我实际上有两个问题： - 这是一个很好的javascript架构，可以将所有代码包装在一个大对象中吗？ - 如何将静态类附加到此文字？

Answer 1

首先，忽略单词 class 并使用 prototype 。 ECMA-Script 6及更高版本正在引入基于类的面向对象编程，但您的代码似乎正在使用基于原型的继承系统。嗯，实际上，您只是使用构造函数创建对象。

使用正确的术语是与社区沟通的良好开端。

其次，在JavaScript中没有静态类。函数在JavaScript中是必不可少的，它们仍然是对象。与对象一样，函数是可扩展的，除非您对它们调用Object.preventExtensions，否则可以添加属性。

只是你的构造函数还有一个包含函数的属性。

如果要将该构造函数作为app对象的一部分，请将其添加为常规属性：

var app = {
    Tools: function() {}
};

app.Tools.someFunction = function() {

};

这是一个很好的javascript架构，可以将所有代码包装成一个大的对象

不确定。但是使用模块模式。网上有关于这个主题的文章很多。您可能需要查看此其他问答：why module pattern?。

Answer 2

这是一个很好的架构，可以将所有代码包装在一个大对象中吗？

在这个时代并不是真的。当然，这种方法可以将您在全局命名空间上的占用空间减少到一个名称，例如app。但使用ES6模块可以更轻松地完成相同的工作。转换非常容易。你可以继续写

function Tools() { }
Tools.someFunction = function(arg1, arg2) {
   // do something
};

和以前一样，但添加

export default Tools;

然后，你想要使用这个

import Tools from 'tools';
Tools.somefunction();

如何将静态类附加到此文字？

使用ES6模块您不需要，但这里有很多问题描述了很多模式。一些例子：

IIFE：

var app = {
   someController: function() {
     var f = function() { };
     f.someProp = 42;
     return 42;
   }(),

初始化器：

var app = {
   someController: function() { },
   init: function() {
     this.someController.someProp = 42;
     return this;
   }
}.init();

明确作业：

var app = {
   someController: function() { }
};
app.someController.someProp = 42;

阅读或写作都不是很有趣。他们有一种2012年代的感觉。使用ES6模块来避免这种情况，并返回编写常规旧代码。