时间戳

首页 > 解决方案 > 跨 JavaScript 文件声明变量和函数

javascript - 跨 JavaScript 文件声明变量和函数

问题描述

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

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

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 完成的方式，但我似乎无法弄清楚如何在不使用大量全局变量或不放置所有内容的情况下实现我的应用程序一个文件中的一个函数。

标签： javascript

解决方案

一种更现代的方法是使用块语句并将const其范围限定为：

var app = app || {};

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

在带有 IIFE 的旧 js 中也可以实现同样的效果：

var app = app || {};

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

现在您可以将具有该结构的多个 js 文件放在一个页面中，然后通过app.sth().

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

// Foo.js
export default function foo(n) { return n + 1 }

// Bar.js
import foo from "./foo";

 export default function bar(n) { return foo(n) * 2; }

webpack 会从中生成一个很小的（不可读的）js 文件。

推荐阅读