Should I use window.variable or var?

前端 未结 7 1649
生来不讨喜
生来不讨喜 2020-12-02 12:25

We have a lot of setup JS code that defines panels, buttons, etc that will be used in many other JS files.

Typically, we do something like:

grid.js

相关标签:
7条回答
  • 2020-12-02 12:33

    I would suggest creating a namespace variable var App = {};

    App.myGrid = ...
    

    That way you can limit the pollution of the global namespace.

    EDIT: Regarding the number of variables issue - 2 possible solutions come to mind:

    1. You can further namespace them by type(Grids, Buttons, etc) or by relationship(ClientInfoSection, AddressSection, etc)
    2. You encapsulate your methods in objects that get instantiated with the components you have

    ex: you have

    function foo() {
        myCombo.someMethod();
        myGrid.someMethod();
    }
    

    becomes:

    var Foo = function(combo, grid) {
        var myCombo = combo;//will be a private property
        this.myGrid = grid;//will be a public property
        this.foo = function() {//public method
            myCombo.someMethod();
            myGrid.someMethod();
        }
    }
    App.myFoo = new Foo(someCombo, someGrid);
    App.myFoo.foo();
    

    this way you limit the amount of little objects and only expose what you need (namely the foo function)

    PS: if you need to expose the internal components then add them to this inside the constructor function

    0 讨论(0)
  • 2020-12-02 12:37

    One nice use of window.variable is that you can check it without having a javascript error. For example, if you have:

    if (myVar) {
        //do work
    }
    

    and myVar is not defined anywhere on the page, you will get a javascript error. However:

    if (window.myVar) {
        //do work
    }
    

    gives no error, and works as one would expect.

    var myVar = 'test' and window.myVar = 'test' are roughly equivalent.

    Aside from that, as other said, you should descend from one global object to avoid polluting the global namespace.

    0 讨论(0)
  • 2020-12-02 12:42

    The general answer to the question would be to use var.

    More specifically, always put your code in an Immediately Invoked Function Expression (IIFE):

    (function(){
      var foo,
          bar;
      ...code...
    })();
    

    This keeps variables like foo and bar from polluting the global namespace. Then, when you explicitly want a variable to be on the global object (typically window) you can write:

    window.foo = foo;
    

    JavaScript has functional scope, and it's really good to take full advantage of it. You wouldn't want your app to break just because some other programmer did something silly like overwrote your timer handle.

    0 讨论(0)
  • 2020-12-02 12:45

    In addition to other answers, worth noting is that if you don't use var inside a function while declaring a variable, it leaks into global scope automatically making it a property of window object (or global scope).

    0 讨论(0)
  • 2020-12-02 12:48

    In global scope the two are in fact equivalent functionality-wise. In function scope, var is certainly preferable when the behaviour of closures is desired.

    I would just use var all of the time: firstly, it's consistent with the usually preferred behaviour in closures (so it's easier to move your code into a closure if you decide to do so later), and secondly, it just feels more semantic to me to say that I'm creating a variable than attaching a property of the window. But it's mostly style at this point.

    0 讨论(0)
  • 2020-12-02 12:49

    To expand on what Liviu said, use:

    App = (function() {
        var exports = {};
        /* code goes here, attach to exports to create Public API */
        return exports; 
    })();
    

    By doing that you can hide some of your implementation specific code, which you may not want exposed by using var's inside. However, you can access anything attached to the exports object.

    0 讨论(0)
提交回复
热议问题