找到你要的答案

Q:local and global variables in JS

Q:在JS中的局部变量和全局变量

I've the following javascript code

 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 :

 (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?

我下面的JavaScript代码

 var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

我想用一生来encolose我所有的功能在一个关闭以避免弄乱的全局名字空间,所以我写了:

 (function(window){
    var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }
    });

然而,我还不能很好的理解这个概念,现在在我的HTML页面,我怎么会打电话给我onloadpage功能?

answer1: 回答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();

你不能不把它放在全局命名空间中。

我对结构代码的建议:

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();
answer2: 回答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).

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.

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

既然你已经包围了这个模块,你需要决定你要向外界透露什么。任何你想暴露,你可以出口。此外,您需要决定哪些上下文(在本例中,窗口),您要附加到。然后通过上下文在马上(从而完成生活)。

例如:

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

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

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

附加到传递窗口对象是一种以受控方式导出的方法。所以,你需要通过上下文(在这种情况下,窗口)的生活。也许,窗口并不总是上下文的调用。

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

answer3: 回答3:

You can set your function to window.onload callback.

(function(window) {
  var globalConfiguration = null;

  window.onload = onLoadPage;

  function loadFile(filePath) {}

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

  }

  function getConfiguration() {}

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

你可以设置你的函数在window.onload回调。

(function(window) {
  var globalConfiguration = null;

  window.onload = onLoadPage;

  function loadFile(filePath) {}

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

  }

  function getConfiguration() {}

  function process() {}
}(window));
answer4: 回答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.

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).

  1. loadFile(filepath) - returns a file object
  2. onPageLoad() - once the page is loaded, it returns the object or id of the input file
  3. getConfiguration() - gets the file path
  4. process() - process the file

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.

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

检查链接的方法帮助我理解这篇文章链接更好。

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.

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

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

  1. loadFile(filepath) - returns a file object
  2. onPageLoad() - once the page is loaded, it returns the object or id of the input file
  3. getConfiguration() - gets the file path
  4. process() - process the file

onpageload()。LoadFile(getconfiguration() process());

重要的是,该对象的范围是正确的链接。为了做到这一点,每个方法必须返回对适当对象的引用。

希望这有助于。

javascript  variables