Mootools détruit mes globals !!! Google Maps + Mootools

Question

Im utilisant Mootools pour quelques choses comme des bumpboxes et d'autres choses dans une application Google Maps. Tout fonctionnait à 100%, avant ajouté le script Mootools, il n'a pas d'importance si j'ajoute le script avant ou après que je déclare mes globals, Mootools les tue ... jetez un oeil à un extrait

<script language="javascript" type="text/javascript" src="mootools.js"></script> 
<script language="javascript" type="text/javascript" src="bumpbox.js"></script> 

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"> 
</script> 
<script type="text/javascript"> 

    var currentBounds; 
    var currentMarker = null; 
    var currentInfo = null; 
    var markersArrayProps = []; 
    var markersArrayAreas = []; 
</script> 

Il y a beaucoup plus ... mais cela montre juste ce qui se passe, tout fonctionne bien si je supprime la ligne appelant mootools.js. Fondamentalement markersArrayProps est peuplé comme celui-ci au cours d'une XMLHTTPRequest:

markersArrayAreas.push(marker); 

Ensuite, il y a un écouteur d'événement pour la carte étant idle qui fait quelques calculs pour voir si elle doit déposer les marqueurs de la région, et des marqueurs de propriété de charge en fonction des limites de la carte. Pas besoin d'entrer dans les détails, mais chaque fois que cette fonction idle est appelée, et la boucle I dans le tableau comme ceci:

function clearAreaOverlays() { 
    if (markersArrayAreas) { 
    for (i in markersArrayAreas) { 
     markersArrayAreas[i].setMap(null); 
    } 
    } 
} 

Il retourne markersArrayAreas[i].setMap() n'est pas une fonction. Seulement avec le script mootools inclus dans la page, si je supprime mootools, tout fonctionne. Des idées?

Answer 1

Ok , merci pour tout le monde d'entrée, et un grand merci à Jason pour remarquer sur le prototype de tableau Mootools .... en utilisant Mootools .each fonction

markersArrayAreas.each (function (item){ 
     item.setMap(null); 
    }); 

Answer 2

La meilleure façon de résoudre ce problème est de réécrire votre boucle en utilisant le modèle:

for(var i=0,l=markersArrayAreas.length, i<l, i++) { if(i in markersArrayAreas) { ... } } 

On dirait que vous utilisez markersArrayAreas comme un tableau indexé entier standard. Par conséquent, vous ne devez pas utiliser le modèle (for i in array) pour parcourir ce modèle. Tout d'abord, c'est beaucoup moins efficace que d'utiliser une boucle de comptage basée sur l'index. En outre, ce modèle parcourt tous les membres d'un objet. Dans votre cas, MooTools a étendu le prototype Array avec d'autres fonctions personnalisées. Ainsi, chaque fois que vous créez un tableau, il existe désormais des propriétés supplémentaires dans l'objet en plus des valeurs de tableau numérotées. Si vous imprimez la valeur de i, vous devriez voir que ce ne sont plus seulement des nombres.

Vous pouvez contourner ce problème en vérifiant si chaque nom de propriété fait référence à une propriété qui n'a pas été hérité du prototype en utilisant la fonction hasOwnProperty, mais encore une fois, ce serait beaucoup moins efficace que.

Pour une référence rapide qui montre la performance relative de ces différentes constructions de mise en boucle, voir ici: http://jsperf.com/for-in-test

Answer 3

Vous pouvez namespace ces variables globales. Il faudrait un peu de reprise, mais il est garanti de garder vos affaires en toute sécurité à partir d'autres scripts:

var my_globals_with_a_very_unique_name_mf = { 
    // redeclare all your variables in here 
} 

Ensuite, chaque fois que vous faites référence à ces variables, allez dans l'objet:

my_globals_with_a_very_unique_name_mf.markersArrayProps