window.onload senza variabile globale

Sto cercando di utilizzare windows.load senza variabile globale.window.onload senza variabile globale

Il codice HTML:

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>Test</title> 
 
    <link rel="stylesheet" href="main.css"> 
 
    <script type="text/javascript" src="script.js"></script> 
 
</head> 
 
<body> 
 

 
<form> 
 
    Name: <input type="text" id="txt1"><br><br> 
 
    <input type="button" value="Check Input" id="b1"> 
 
</form> 
 

 
</body> 
 
</html>

Il codice variabile globale JavaScript:

/*jslint browser: true*/ 
 

 
var myButton; 
 

 
window.onload = function() { 
 
    "use strict"; 
 
    myButton = document.getElementById("b1"); 
 
    myButton.addEventListener("click",alertMM); 
 
}; 
 

 
function alertMM() { 
 
    "use strict"; 
 
    window.console.log(myButton.value); 
 
}

Ed infine il non funziona senza codice variabile globale:

/*jslint browser: true*/ 
 

 
var myNS = { 
 
    myButton: undefined, 
 
    // 
 
    setUp: function() { 
 
     "use strict"; 
 
     myNS.myButton = document.getElementById("b1"); 
 
     myNS.myButton.addEventListener("click", alertMM); 
 
    } 
 
}; 
 

 
window.onload = myNS.setUp(); 
 

 
function alertMM() { 
 
    "use strict"; 
 
    window.console.log(myNS.myButton.value); 
 
}

La ragione per cui voglio smettere di usare variabile globale è che ho paura che sarà in conflitto con il codice di futuro.

Grazie in anticipo

Adrian

fonte

2015-04-18 Adrian Gherasim

BTW, si potrebbe usare questo ' .myButton = 'in alternativa a' myNS.myButton = '. Probabilmente una questione di preferenze personali in questo caso ... –

puoi usare il pattern [IIFE] (http://benalman.com/news/2010/11/immediately-invoked-function-expression/) e avvolgere tutto in un funzione di autoesecuzione, che imposta un ambito interno e non consente alle variabili di penetrare nello scope globale – yoavmatchulsky

oppure è possibile definire 'alertMM()' all'interno della funzione onload e utilizzare lo stesso oggetto 'myButton' – yoavmatchulsky

In:

window.onload = myNS.setUp();

quando si definisce il window.onload richiamata, è necessario assegnare è la funzione stessa (solo myNS.setUp) in modo che può essere chiamato in seguito. Quello che fa il tuo codice invece chiama la funzione immediatamente e assegna il risultato.

fonte

2015-04-18 13:15:10 Touffy

Spero che sia più chiaro in questo modo, @Matt Browne. Sei libero di modificare altrimenti :) – Touffy

Grazie, questo era il problema, mi manca() e tutto va bene ora. –

Lo scope variabile in JavaScript è principalmente orientato alla funzione. Come in, le funzioni racchiudono le loro variabili interne. Così si potrebbe evitare di inquinare l'ambito globale semplicemente dichiarando le variabili (e assegnando il DOM el) all'interno della funzione che si sta assegnando a window.onload:

window.onload = function() { 
 
    //variable assignments inside the function 
 
    var button1 = document.getElementById('b1'); 
 
    var button2 = document.getElementById('globalCheck'); 
 
    //anonymous functions attached instead of named functions 
 
    button1.addEventListener('click', function() { 
 
    alert(button1.value); 
 
    }); 
 
    button2.addEventListener('click', function() { 
 
    alert("var button1 in the global scope: " + window.button1 + "\n" + "var button2 in the global scope: " + window.button2); 
 
    }); 
 
};

.greyButton { 
 
    background-color: grey; 
 
    color: #f5f5f5; 
 
    width: 30%; 
 
} 
 
#txt1 { 
 
    width: 29%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>Test</title> 
 
    <link rel="stylesheet" href="main.css"> 
 
    <script type="text/javascript" src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <div> 
 
     <input type="text" id="txt1" placeholder="Name" value=""> 
 
     <br> 
 
     <input type="button" value="Check Input" id="b1" class="greyButton"> 
 
    </div> 
 
    <br> 
 
    <div> 
 
     <input type="button" value="Are the variables global?" id="globalCheck" class="greyButton"> 
 
    </div> 
 
    </form> 
 

 
</body> 
 

 
</html>

fonte

2015-04-18 15:19:26 cssimsek

window.onload senza variabile globale

risposta

Problemi correlati