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

I've the following javascript code

我有以下javascript代码

 var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

I want to use IIFE to encolose all my functions in a closure to avoid cluttering the global name space,so I wrote :

我想使用IIFE在闭包中包含所有函数以避免混乱全局名称空间,所以我写道:

 (function(window){
    var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }
    });

However, I do not understand this notion very well, now in my HTML page how would I call my function onLoadPage?

但是,我不太了解这个概念,现在在我的HTML页面中如何调用我的函数onLoadPage?

4 个解决方案

#1

You can't without putting it in the global namespace somehow.

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

My recommendation to structure code like this:

我建议像这样构造代码:

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

#2

Now that you have enclosed the module, you need to decide what you want to expose to the outside world. Anything you want to expose, you can export. Also, you need to decide what context (in this case, window) that you want to attach to. Then pass the context in right away (thus completing the IIFE).

现在您已经附上了模块,您需要决定要向外界展示什么。您要公开的任何内容,都可以导出。此外,您需要确定要附加到的上下文(在本例中为窗口)。然后立即传递上下文(从而完成IIFE)。

For example:

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

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

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

Attaching to the passed in window object is one way to export things out in a controlled fashion. So, you do need to pass the context (in this case window) to the IIFE. Perhaps, window will not always be the context for the call.

附加到传入的窗口对象是以受控方式导出内容的一种方法。因此,您需要将上下文(在本例中为窗口)传递给IIFE。也许,窗口并不总是呼叫的上下文。

After running this code, myModule will be available on the global scope.

运行此代码后,myModule将在全局范围内可用。

#3

You can set your function to window.onload callback.

您可以将函数设置为window.onload回调。

(function(window) {
  var globalConfiguration = null;

  window.onload = onLoadPage;

  function loadFile(filePath) {}

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

  }

  function getConfiguration() {}

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

#4

This is called chaining of functions/methods and is usually done for better readability of the code and to avoid the usage of temporary variables to hold the return value of each function.

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

Check this post on chaining methods which helped me to understand the chaining better.

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

I see you wanted to use closures to avoid cluttering the global object. However, do note that we write functions for reusability. Though you create a closure, ensure that your methods inside the outer function are abstracted such that they can be used by other parts of the code. For ex: from your code, you have a loadFile method which could be reused.

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

Now to see how you can use the methods you described in a chain.

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

Assumptions: (since i don't know why you wrote those methods, i am making some assumptions).

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

loadFile(filepath) - returns a file object

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

onPageLoad() - once the page is loaded, it returns the object or id of the input file

onPageLoad() - 加载页面后,它返回输入文件的对象或id

getConfiguration() - gets the file path

getConfiguration() - 获取文件路径

process() - process the file

process() - 处理文件

onPageLoad().loadFile(getConfiguration()).process();

The important part is that the scope of the object is set correctly in the chaining. In order to do this, each method must return the reference to appropriate object.

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

Hope this helps.

希望这可以帮助。

#1