JS 中的局部变量和全局变量

Question

我有以下 JavaScript 代码

 var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

我想使用 IIFE 将所有函数封装在一个闭包中，以避免混乱全局名称空间，所以我写道：

 (function(window){
    var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }
    });

但是，我不太理解这个概念，现在在我的 HTML 页面中我将如何调用我的函数

onLoadPage

？

Answer 1

如果不以某种方式将其放入全局命名空间中就不能。

我对这样构建代码的建议：

function ExampleHelper() {
    (function(scope) {

        scope.globalConfiguration = null;

        scope.loadFile = function(filePath) {

        };

        scope.onLoadPage = function() {

        };

        scope.getConfiguration = function() {

        };

        scope.process = function() {

        };

    })(this);
}

var foo = new ExampleHelper(); // "foo" now contains all of your functions
foo.onLoadPage();

编辑 2024：现在使用类 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes 当这个答案最初发布时，这不可用/广泛支持

Answer 2

现在您已经封装了模块，您需要决定要向外界“暴露”什么内容。任何您想公开的内容，都可以导出。此外，您还需要决定要附加到什么context（在本例中为window）。然后立即传递上下文（从而完成 IIFE）。

例如：

(function(window){
    var exports = {};
    var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

    exports.getConfiguration = getConfiguration;
    window.myModule = exports;
})(window);

附加到传入的 

window

对象是以受控方式导出内容的一种方法。因此，您确实需要将上下文（在本例中为窗口）传递给 IIFE。也许，

window

不会

永远

成为通话的上下文。 运行此代码后，

myModule

将在全局范围内可用。

Answer 3

(function(window) {
  var globalConfiguration = null;

  window.onload = onLoadPage;

  function loadFile(filePath) {}

  function onLoadPage() {
    alert('hello world');

  }

  function getConfiguration() {}

  function process() {}
}(window));

Answer 4

查看这篇关于链接方法的文章

，它帮助我更好地理解链接。

我看到你想使用闭包来避免全局对象混乱。但是，请注意，我们编写函数是为了可重用性。尽管您创建了一个闭包，但请确保外部函数内的方法是抽象的，以便它们可以被代码的其他部分使用。 例如：从您的代码中，您有一个可以重用的 loadFile 方法。

现在看看如何使用您在链中描述的方法。

假设：（因为我不知道你为什么写这些方法，所以我做了一些假设）。

loadFile(filepath) - 返回一个文件对象

onPageLoad() - 页面加载后，它返回输入文件的对象或 id
getConfiguration() - 获取文件路径
process() - 处理文件
4. onPageLoad().loadFile(getConfiguration()).process();

重要的部分是在链接中正确设置对象的范围。为了做到这一点，每个方法必须返回对适当对象的引用。

希望这有帮助。