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

现在，您已经封闭了模块，您需要确定要向外界公开的内容。 您想公开的任何内容都可以导出 。 另外，您需要确定要附加到的上下文 （在本例中为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回调。

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

Answer 4

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

查看有关链接方法的这篇文章，这有助于我更好地了解链接。

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

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

假设：（由于我不知道您为什么编写这些方法，因此我做出了一些假设）。

1. loadFile（filepath）-返回文件对象
2. onPageLoad（）-加载页面后，它将返回输入文件的对象或ID
3. getConfiguration（）-获取文件路径
4. process（）-处理文件

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

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

希望这可以帮助。