How to cache/precalculate something(without global variable)?

What I want to do is to sending data between two handlers.

element.onmousedown = function() {
    data = precalculate();
}

element.onmouseup = function() {
    dosomething(data);
}

if the data is a global variable it works. People says global variable is evil. But I don't know how to do wit开发者_Python百科hout it.

or I misunderstood "global variable"?

Just scope the variable if you don't want/need it to be global:

(function() {
    var data;
    element.onmousedown = function() {
        data = precalculate();
    }

    element.onmouseup = function() {
        dosomething(data);
    }
})();

EDIT: To clarify, the only way to create a new variable scope in javascript is in a function.

Any variable declared with var inside a function is inaccessible to the outer scope.

In the code above, I created an IIFE (immediately invoked function expression), which is simply a function that is invoked as soon as it is created, and I placed your data variable (along with the handler assignments) inside of it.

Because the handlers were created in a scope that has access to the data variable, they retain their access to that variable.

To give another example:

var a = "a"; // global variable

(function() {

    var b = "b";  // new variable in this scope

    (function() {

        var c = "c";  // new variable in this scope

        // in this function, you have access to 'a', 'b' and 'c'

    })();

    // in this function you have access to 'a' and 'b' variables, but not 'c'

})();

// globally, you have access to the 'a' variable, but not 'b' or 'c'

In this case a global variable would make sense. Another possibility is to attach the value to the DOM element:

element.onmousedown = function() {
    // 'this' should point to the element being mouse downed
    this.data = precalculate(); 
};

element.onmouseup = function() {
    // 'this' should point to the element being mouse upped
    var data = this.data;
    dosomething(data);
};

You misunderstood "global variable is evil".

In fact, what really happened is that someone wanted to be "part of the crowd", and so told you a sweeping generalisation, when in fact they should have said "only use global variables where appropriate".

Well, they are appropriate here, my friend.

JQuery makes this possible by using the .data() function:

http://api.jquery.com/jQuery.data/

You can get away with using global variables as long as you keep them to a minimum, for example you can place stuff in a single global namespace:

App = {};

element.onmousedown = function() {
   App.data = "hello";
}

element.onmouseup = function() {
   console.log(App.data);
}

Another more general solution is to create functions that cache their results using a technique that is called memoization. There's plenty of stuff if you search. The following code does exactly that :

Function.prototype.memoize = function() {
    var fn = this;
    this.memory = {};
    return function() {
        var args = Array.prototype.slice.call(arguments);
        return fn.memory[args] ? fn.memory[args] : fn.memory[args] = fn.apply(this, arguments);
    };
};

e.g. You have an expensive function called exfunc..

newFunc = exfunc.memoize();

The above statement creates a new function called newFunc that caches the result of the original function so that the first time the actual code is being executed and all subsequent calls are retrieved from a local cache.

This mostly works with functions whose return value does not depend on global state.

More info : http://osteele.com/archives/2006/04/javascript-memoization