许多局部变量声明与一个全局变量声明？

Question

i'm just new javascript biginner, If i need to reuse many times (lets say 20 times) the same variable, from a performance point of view, should i declare it one time as global , or declare it many times in each function context in local scope ( as i heard about ) ?

whats case bellow is better ?

caseA :

var myvar = document.getElementById('case'); //global

function one(){
myvar.innerHTML = 'newb';
...
}
function two(){
myvar.value = '3';
...
}

caseB :

function one(){
var myvar = document.getElementById('case'); //local
myvar.innerHTML = 'newb';
...
}
function two(){
var myvar = document.getElementById('case'); //lobal 
myvar.value = '3';
...
}

caseC :

var myvar = document.getElementById('case'); //global

function one(){
var myvar = document.getElementById('case'); //local
myvar.innerHTML = 'newb';
...
}
function two(){
var myvar = document.getElementById('case'); //lobal 
myvar.value = '3';
...
}

thx for advises,
gui

Answer 1

Wrap case A inside a closure

(function() {
  var myvar = document.getElementById('case');

  function one(){
    myvar.innerHTML = 'newb';
    ...
  }

  function two(){
    myvar.value = '3';
    ...
  }
})()

now nothing is in the global scope but you only access the DOM once.

Answer 2

The case A must be the best, or if you like object oriented programming you can do :

function MyClass() {
    this.element = document.getElementById('case');

    this.one = function() {
        this.element.innerHTML = 'newb';
    }
    this.two = function() {
        this.element.value = '3';
    }

    return this;
}

var myCls = new MyClass();
myCls.one();
myCls.two();