Foros del Web - Ver Mensaje Individual

abimaelrc · #1 (**permalink**) 03/04/2011, 09:40

Saludos corillo,

Estoy preparando un material (tutorial) y en ese material requiero encapsular ciertos valores. Para los que no conocen el termino de closure o encapsulating, pueden leer estos materiales

http://en.wikipedia.org/wiki/Closure_(computer_science)
http://reprog.wordpress.com/2010/02/...lly-explained/
http://www.bennadel.com/blog/1482-A-...ry-Context.htm (recomendado por su forma gráfica de mostrar como funciona)

Ahora me surge una duda de la forma como ustedes encapsularían. Si hago esto

Código HTML:

Ver original<html>
<head>
<style>
*{ cursor: default; }
div{
    background-color: #eee;
    margin-top: 2px;
    text-align: center;
    font-size: 20px;
}
div:hover{ background-color: #ccc; }
</style>
</head>
<body>
</style>
<div id="foo">foo</div>
<div id="bar">bar</div>
<div id="baz">baz</div>
<div id="candy">candy</div>
<div id="fruits">fruits</div>
<div id="vegetable">vegetable</div>
 
<script type="text/javascript">
var divs = ['foo', 'bar', 'baz', 'candy', 'fruits', 'vegetable'];
for(var i in divs){
    var elem = document.getElementById(divs[i])
    if (elem.addEventListener){
        elem.addEventListener('click', function(e){
            alert(divs[i])
        }, false);
    }else if (elem.attachEvent){
        elem.attachEvent("onclick", function(e){
            alert(divs[i])
        });
    }
}
</script>
</body>
</html>

Siempre me traerá el último valor, ya que de por sí estoy haciendo referencia a la variable directamente y no al valor, por eso me trae siempre el último valor. Pero si lo hiciera así

Código HTML:

Ver original<html>
<head>
<style>
*{ cursor: default; }
div{
    background-color: #eee;
    margin-top: 2px;
    text-align: center;
    font-size: 20px;
}
div:hover{ background-color: #ccc; }
</style>
</head>
<body>
</style>
<div id="foo">foo</div>
<div id="bar">bar</div>
<div id="baz">baz</div>
<div id="candy">candy</div>
<div id="fruits">fruits</div>
<div id="vegetable">vegetable</div>
 
<script type="text/javascript">
var divs = ['foo', 'bar', 'baz', 'candy', 'fruits', 'vegetable'];
for(var i in divs){
    (function(eDiv){
        var elem = document.getElementById(eDiv)
        if (elem.addEventListener){
            elem.addEventListener('click', function(e){
                alert(eDiv)
            }, false);
        }else if (elem.attachEvent){
            elem.attachEvent("onclick", function(e){
                alert(eDiv)
            });
        }
    })(divs[i])
}
</script>
</body>
</html>

Se resuelve el problema porque estoy haciendo referencia al valor no a la variable persé. Mi pregunta es ¿qué forma ustedes recomendarían usar?