Comment accéder à la variable globale dans une autre fonction

Question

Je vois qu'il y a un script dans le DOM.

Je veux accéder à la variable data dans une autre fonction plus tard, est-ce possible?

data = {"labels":["07/19 (Sun)","07/20 (Mon)","07/21 (Tue)","07/22 (Wed)","07/23 (Thu)","07/24 (Fri)","07/25 (Sat)","07/26 (Sun)","07/27 (Mon)","07/28 (Tue)","07/29 (Wed)" 
.... 

Parce qu'actuellement,

Je ne pouvais pas accéder à la initChart variable dans la console de débogage.

 //<![CDATA[ 
     (function() { 

     var initChart = function() { window.Chart && window.Chart["chart-0"] && window.Chart["chart-0"].destroy(); 

     var data = {"labels":["07/19 (Sun)","07/20 (Mon)","07/21 (Tue)","07/22 (Wed)","07/23 (Thu)","07/24 (Fri)","07/25 (Sat)","07/26 (Sun)","07/27 (Mon)","07/28 (Tue)","07/29 (Wed)","07/30 (Thu)","07/31 (Fri)","08/01 (Sat)","08/02 (Sun)","08/03 (Mon)","08/04 (Tue)","08/05 (Wed)","08/06 (Thu)","08/07 (Fri)","08/08 (Sat)","08/09 (Sun)","08/10 (Mon)","08/11 (Tue)","08/12 (Wed)","08/13 (Thu)","08/14 (Fri)","08/15 (Sat)","08/16 (Sun)","08/17 (Mon)","08/18 (Tue)","08/19 (Wed)"],"from":"TAIPEI","to":"TOKYO","start_date":"07/19 (Sun)","end_date":"08/19 (Wed)","datasets":[{"label":"Jetstar(12:45)","data":[4798.0,6698.0,5298.0,4798.0,4198.0,4198.0,4198.0,3798.0,3798.0,3798.0,3798.0,3398.0,3398.0,3398.0,2998.0,2998.0,2698.0,2998.0,3398.0,3398.0,3798.0,3798.0,3798.0,4198.0,4798.0,4198.0,5298.0,7598.0,9098.0,4798.0,4798.0,4798.0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(254,88,21, 0.3)","pointHighlightStroke":"rgba(254,88,21, 0.9)","strokeColor":"rgba(254,88,21, 0.4)","max":9098.0,"min":2698.0,"average":4344.875},{"label":"Peach(11:05)","data":[7300.0,0,5490.0,5490.0,5490.0,4900.0,4900.0,4900.0,0,4900.0,4410.0,4410.0,4410.0,4900.0,4900.0,0,3520.0,3520.0,4900.0,3970.0,4410.0,3520.0,0,4410.0,4410.0,4900.0,4900.0,6080.0,7700.0,0,5490.0,3970.0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":7700.0,"min":0,"average":4128.125},{"label":"Peach(18:30)","data":[4860.0,6520.0,4410.0,4410.0,4410.0,4410.0,3970.0,4900.0,4900.0,3970.0,3970.0,3520.0,3970.0,3080.0,3520.0,3520.0,2750.0,2750.0,2750.0,3520.0,3080.0,3520.0,4410.0,5490.0,4410.0,4900.0,6740.0,7700.0,6740.0,5490.0,4410.0,4410.0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":7700.0,"min":2750.0,"average":4419.0625},{"label":"Peach(10:55)","data":[0,7300.0,0,0,0,0,0,0,4900.0,0,0,0,0,0,0,3970.0,0,0,0,0,0,0,4410.0,0,0,0,0,0,0,5490.0,0,0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":7300.0,"min":0,"average":814.6875},{"label":"Peach(09:35)","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4410.0,3970.0,0,0,0,4900.0,0,6080.0,6080.0,0,0,0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":6080.0,"min":0,"average":795.0},{"label":"Peach(09:15)","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3970.0,0,4410.0,0,4900.0,0,0,5490.0,0,4410.0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":5490.0,"min":0,"average":724.375}]}; var opts = {"animation":false}; if (!("animation" in opts)) { opts["animation"] = (typeof Modernizr == "undefined") || Modernizr.canvas; } var canvas = document.getElementById("chart-0"); var ctx = canvas.getContext('2d'); var chart = new Chart(ctx).Line(data, opts); window.Chart["chart-0"] = chart; }; /* W3C standard */ if (window.addEventListener) { window.addEventListener("load", initChart, false); document.addEventListener("page:load", initChart, false); } /* IE */ else if (window.attachEvent) { window.attachEvent("onload", initChart); document.attachEvent("page:load", initChart); } })(); 
     //]]> 

Answer 1

Je vois que vous utilisez IIFE:

Votre structure js:

(function(){ //outer function 
    //variables declered here 
function samplefunc(){ 
    // variable accessible here 
} 
})(); 

// variable not accessible here 

Ainsi, votre varaible de données est scope à cette fonction extérieure. Vous pouvez l'utiliser dans une fonction à l'intérieur de cette fonction extérieure, mais pas en dehors de cette scope fonction (dans la console aussi)

Exemple:

(function() { 
 
    var data = "sample"; 
 
    $("#first").html(data); 
 
})(); 
 

 
(function() { 
 
    $("#second").html(data); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="first"></div> 
 
<div id="second"></div>

Answer 2

Parce que votre code est dans une auto exécution bloc , cette variable n'est pas globalement définie; ce qui est généralement une bonne chose. Si vous en avez vraiment besoin, vous devrez le définir comme une propriété de la fenêtre.

window.myVar = {...}; 

Pour votre exemple:

window.initChart = initChart; 

Mais je déteste même suggérer ce. Envisagez d'utiliser un événement pour transmettre cette valeur à un écouteur ailleurs ou envoyez-le directement à une classe que vous créez après l'initialisation de l'utilisation d'une variable globale.

http://www.w3.org/wiki/JavaScript_best_practices

Answer 3

Vous n'êtes pas créer une variable globale ici. Vous créez une variable qui est privée à votre fonction d'auto-appel (function(){}());. Toute variable définie à l'intérieur de celle-ci ne sera jamais visible à aucun autre code sauf à l'intérieur. Tout d'abord, la meilleure pratique consiste à essayer d'éviter les variables globales. Maximum, vous devez créer une seule variable globale (qui doit être un objet contenant toutes les propriétés qui doivent être accessibles à travers votre programme) et définir ce dont vous avez besoin à l'intérieur. Comme:

var MyApp = {}; 
MyApp.data="abc"; 
MyApp.otherData = "test"; 

Cela devrait être défini en dehors de tout champ (directement au fichier js, et non à l'intérieur de toute fonction). Le meilleur exemple est la variable window de BOM, à laquelle vous pouvez accéder où vous le souhaitez.

Ainsi, en quelques mots, votre programme devrait ressembler à ceci:

//example.js 
var MyApp = {}; 
MyApp.data="abc"; 

(function(){ 
var myData = MyApp.data; 
//use myData here as you want 

//delete MyApp.data if it's not needed anywhere by using: delete MyApp.data; 
})(); 

EDIT:

Sinon, s'il est nécessaire de définir variable à l'intérieur expression de la fonction d'auto-Allégation, vous pouvez utiliser la fermeture pour l'utiliser dans d'autres fonctions. Comme:

var myOtherFunc = (function(){ 
var globalInThisScope = ""; 
return function(arg) { 
// use arg if required 
// use and manipulate globalInThisScope if required 
// return if required 
}; 
}()); 


myOtherFunc(arg); //this can access globalInThisScope now. 

Alternative:

Utilisation this à l'intérieur de fermeture pour accéder aux variables de portée mondiale. Comme:

var globalVariable = "abc"; 
var myFunction = function(){ 
return function(){ 
    console.log(this.globalVariable); 
}; 
}; 

//call it like 

myFunction()();////output: abc