Clausura (clousure) y/o Encapsulación

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?

Panino5001 · #2 (**permalink**) 03/04/2011, 10:26

Está bien así, aunque lo mejor sería crear una función addEvent y usar forEach (https://developer.mozilla.org/en/Jav.../array/foreach)

abimaelrc · #3 (**permalink**) 03/04/2011, 10:33

Gracias Panino

Bueno, más bien lo traje, por el tutorial que estoy preparando de GMaps y de esta forma de encapsular fue que pude lograrlo, ya que ellos preparon lo de los eventos y quería más bien saber otra forma de lograrlo, si es que hay una forma de hacerlo así de anonima como la que estoy mencionando.

Aunque me diste una idea a ver si me sale

Panino5001 · #4 (**permalink**) 03/04/2011, 11:15

Algo así te decía:

Código PHP:

  <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">
if (!Array.prototype.forEach)
{
  Array.prototype.forEach = function(fun /*, thisp */)
  {
    "use strict";

    if (this === void 0 || this === null)
      throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in t)
        fun.call(thisp, t[i], i, t);
    }
  };
}
function addEvent(obj,fun,type){ 
    if(obj.addEventListener){ 
        obj.addEventListener(type,fun,false); 
    }else if(obj.attachEvent){ 
        var f=function(){ 
            fun.call(obj,window.event); 
        } 
        obj.attachEvent('on'+type,f); 
        obj[fun.toString()+type]=f; 
    }else{ 
        obj['on'+type]=fun; 
    } 
}  
var divs = ['foo', 'bar', 'baz', 'candy', 'fruits', 'vegetable'];

divs.forEach(function(div,i,o){addEvent(document.getElementById(div),function(e){alert(this.id);},'click');});
</script>
</body>
</html>

abimaelrc · #5 (**permalink**) 03/04/2011, 11:53

Gracias, lo voy a tener en cuenta

zerokilled · #6 (**permalink**) 03/04/2011, 12:10

buenas gentes!

antes quise contestar este tema y me faltaba poco pero por deberes que tenia que cumplir no me fue posible publicar el mensaje.

de todos modos, lo que queria compartir era que en teoria el codigo esta bien. en javascript, para crear un closure se necesita de un scope. dichos scopes solamente se pueden crear con funciones. de modo que la forma en que lo has hecho es correcta.

ahora bien, viendo el codigo de panino, me parece el mas adecuado. porque desde el evento, la informacion la obtiene desde el elemento.

abimaelrc · #7 (**permalink**) 03/04/2011, 12:24

Gracias zero.

Gmaps no lo trabaja de esa forma, sino que tienes que declararlo. Para que me entiendas mejor, te posteo un ejemplo sencillo de Gmaps

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script type="text/javascript">
    window.onload = function(){
        var options = {
            zoom: 9
            , center: new google.maps.LatLng(18.2, -66.4)
            , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        var map = new google.maps.Map(document.getElementById('map'), options);
 
        var place = new Array();
        place['San Juan'] = new google.maps.LatLng(18.465, -66.105);
        place['Mayagüez'] = new google.maps.LatLng(18.215, -67.14);
        place['Ponce'] = new google.maps.LatLng(18.025, -66.615);
        place['Fajardo'] = new google.maps.LatLng(18.336, -65.65);
        place['Culebras'] = new google.maps.LatLng(18.315, -65.3);
        place['Vieques'] = new google.maps.LatLng(18.125, -65.44);
 
        for(var i in place){
            var marker = new google.maps.Marker({
                position: place[i]
                , map: map
                , title: i
            });
 
            google.maps.event.addListener(marker, 'click', function(){
                var popup = new google.maps.InfoWindow();
                popup.setContent('Lugar: ' + i);
                popup.open(map, marker);
            })
        }
    };
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

De esta forma tiene un problema es que se muestra siempre el último seleccionado. Como todavía no me he puesto a observar con detenimiento el código de Panino, no sé como implementarlo, pero la forma más sencilla que vi como lograr que eso funcione correctamente es así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script type="text/javascript">
    window.onload = function(){
        var options = {
            zoom: 9
            , center: new google.maps.LatLng(18.2, -66.4)
            , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        var map = new google.maps.Map(document.getElementById('map'), options);
 
        var place = new Array();
        place['San Juan'] = new google.maps.LatLng(18.465, -66.105);
        place['Mayagüez'] = new google.maps.LatLng(18.215, -67.14);
        place['Ponce'] = new google.maps.LatLng(18.025, -66.615);
        place['Fajardo'] = new google.maps.LatLng(18.336, -65.65);
        place['Culebras'] = new google.maps.LatLng(18.315, -65.3);
        place['Vieques'] = new google.maps.LatLng(18.125, -65.44);
 
        for(var i in place){
            var marker = new google.maps.Marker({
                position: place[i]
                , map: map
                , title: i
            });
 
            (function(i, marker){
                google.maps.event.addListener(marker, 'click', function(){
                    var popup = new google.maps.InfoWindow();
                    popup.setContent('Lugar: ' + i);
                    popup.open(map, marker);
                })
            })(i, marker);
        }
    };
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

zerokilled · #8 (**permalink**) 03/04/2011, 13:43

¿se puede saber donde me dejastes Humacao?

comprendo la situacion... como toda libreria, el API tiene tendencias a cambiar la forma en que escribimos. de todos modos, sin usar closure, esto fue lo que hice y me funciono perfectamente. en referencia al primer codigo, por supuesto.

Código javascirpt:

Ver originalpopup.setContent('Lugar: ' + this.title);
popup.open(map, this);

la explicacion es bien sencilla. fijate que this en el evento hace referencia al objeto marker pasado como argumento en la invocacion de addListener, ya que es al objeto a quien se le esta aplicando el evento.

pd: lo de Humacao son bromas.

abimaelrc · #9 (**permalink**) 03/04/2011, 14:11

Mal rayo parte es verdad se me olvida que existe this, bueno en ciertas ocaciones se me olvida

Lo digo porque en otros lados lo menciono y se me olvidó que lo puedo aplicar al objeto que se está creando en ese momento

Aquí está todo y con HUMACAO

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script type="text/javascript">
    window.onload = function(){
        var options = {
            zoom: 9
            , center: new google.maps.LatLng(18.2, -66.4)
            , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        var map = new google.maps.Map(document.getElementById('map'), options);
 
        var place = new Array();
        place['San Juan'] = new google.maps.LatLng(18.465, -66.105);
        place['Mayagüez'] = new google.maps.LatLng(18.215, -67.14);
        place['Ponce'] = new google.maps.LatLng(18.025, -66.615);
        place['Fajardo'] = new google.maps.LatLng(18.336, -65.65);
        place['Culebras'] = new google.maps.LatLng(18.315, -65.3);
        place['Vieques'] = new google.maps.LatLng(18.125, -65.44);
        place['Humacao'] = new google.maps.LatLng(18.14, -65.88);
 
        for(var i in place){
            var marker = new google.maps.Marker({
                position: place[i]
                , map: map
                , title: i
            });
 
            google.maps.event.addListener(marker, 'click', function(){
                var popup = new google.maps.InfoWindow();
                popup.setContent('Lugar: ' + this.title);
                popup.open(map, this);
            })
        }
    };
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>