Question

我正在尝试减少应用程序使用的全局变量的数量，但我一直试图弄清楚如何构建我的文件。

这是当前应用程序的结构，包含一些示例变量和函数：

var x = 0;
var y = 1;
var z = 2;
foo = function(n) { return n + 1; }
bar = function(n) { return foo(n) * 2; }

这是我要转向的结构：

var app = new function() {
    var x = 0;
    var y = 1;
    var z = 2;
    foo = function(n) { return n + 1; }
    bar = function(n) { return foo(n) * 2; }
}

有没有办法在其他文件中（或在同一文件中但在函数外部）定义这些变量和函数，并将它们添加到应用程序命名空间？我有很多要定义的变量和函数，我只想将所有变量和函数可以继续相互访问的方式从全局命名空间移动到应用程序命名空间。我还需要将它们放入多个文件中，因为我不希望有一个长达数千行的应用程序文件。

通过使变量和函数属性（使用'app.functionName'）向应用程序添加变量和函数意味着我需要更改函数相互引用的方式，而这似乎不是正确的方法。例如，我不能这样做：

app.foo = function(n) { return n + 1; }
app.bar = function(n) { return foo(n) * 2; }

我必须这样做：

app.foo = function(n) { return n + 1; }
app.bar = function(n) { return app.foo(n) * 2; }

我可以对变量做同样的事情（使用'app.variableName'），但同样的问题在于我不能仅仅在不添加'app'的情况下引用变量。来自变量。

也许我的应用程序的结构很糟糕，这不是Javascript中要做的事情的方式，但我似乎无法弄清楚如何在不使用大量全局变量的情况下实现我的应用程序只需将所有内容放在一个文件中的一个函数中即可。

Answer 1

更现代的方法是使用块语句和../../old/t2将其局部范围限定为：

const

使用IIFE的旧js可以实现同样的目的：

var app = app || {};

{
  const foo = app.foo = n => n + 1;
  const bar = app.bar = n => foo(n) * 2;
}

现在，您可以将具有该结构的多个js文件放入一个页面，然后通过var app = app || {}; (function() { var foo = app.foo = function(n) { return n + 1; }; var bar = app.bar = function(n) { return foo(n) * 2; }; })();相互通信。

这仍然不是很干净，你有很多样板代码。因此发明了像Webpack这样的工具，所以你可以写：

app.sth()

webpack会为你生成一个小的（不可读的）js文件。

在JavaScript文件中声明变量和函数

1 个答案: