对象文字中的静态类

Static classes in object literal

本文关键字：静态类 文字 对象      更新时间：2023-09-26

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

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

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

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

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

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

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

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

这只是你的构造函数也有一个保存函数的属性。

如果你想把构造函数作为app对象的一部分，把它作为一个常规属性添加:

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

是javascript中的一个很好的架构，将所有的代码封装在一个大的对象?

确定。但是要使用模块模式。网上有很多关于这个话题的文章。

这是一个好的架构包装所有的代码在一个大的对象?

在这个时代不太可能。当然，这种方法将全局名称空间的占用减少到一个名称，如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模块来避免这种情况，并返回编写常规的旧代码。

相关文章：