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

现在您已经附上了该模块，您需要决定将公开的内容与外界联系起来。您要公开的任何内容，都可以导出。此外，您需要确定要附加到的 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 2

你不能以某种方式将它放在全局命名空间中。

我建议像这样构造代码：

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();

Answer 3

您可以将您的功能设置为window.onload回调。

＆＃13;

(function(window) {
  var globalConfiguration = null;

  window.onload = onLoadPage;

  function loadFile(filePath) {}

  function onLoadPage() {
    alert('hello world');

  }

  function getConfiguration() {}

  function process() {}
}(window));

＆＃13;

Answer 4

这称为函数/方法的链接，通常是为了更好的代码可读性，并避免使用临时变量来保存每个函数的返回值。

检查post on chaining methods这有助于我更好地理解链接。

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

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

假设:(因为我不知道你为什么写这些方法，我做了一些假设）。

loadFile（filepath） - 返回文件对象
onPageLoad（） - 加载页面后，返回输入文件的对象或id
getConfiguration（） - 获取文件路径
process（） - 处理文件

的onPageLoad（）的loadFile（getConfiguration（））处理（）;

重要的是，在链接中正确设置了对象的范围。为此，每个方法都必须返回对适当对象的引用。

希望这有帮助。

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

4 个答案: