window.onload bez zmiennej globalnej

Próbuję użyć windows.load bez zmiennej globalnej.window.onload bez zmiennej globalnej

Kod 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>

Kod JavaScript globalny kod zmienny:

/*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); 
 
}

I wreszcie NIE DZIAŁA bez globalnej kodem zmiennym:

/*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); 
 
}

Dlatego, że chcę przestać używać zmiennej globalnej jest to, że obawiam się, będzie to kolidować z przyszłymi kodu.

góry dzięki

Adrian

Źródło

2015-04-18 Adrian Gherasim

BTW, można użyć tego ' .myButton = 'jako alternatywa dla' myNS.myButton = '. Prawdopodobnie jest to sprawa osobistych preferencji w tym przypadku ... –

możesz użyć wzoru [IIFE] (http://benalman.com/news/2010/11/immediately-invoked-function-expression/) i zawijać wszystko w funkcja self executing, która ustawia wewnętrzny zasięg i nie pozwala, by zmienne wyciekały do globalnego zakresu – yoavmatchulsky

lub można zdefiniować 'alertMM()' wewnątrz funkcji onload i użyć tego samego obiektu 'myButton' – yoavmatchulsky

window.onload = myNS.setUp();

podczas definiowania window.onload zwrotnego, należy go przypisać samą funkcję (tylko myNS.setUp) tak to można nazwać później. Zamiast tego twój kod wywołuje funkcję i przypisuje wynik.

Źródło

2015-04-18 13:15:10 Touffy

Mam nadzieję, że w ten sposób jaśniej, @Matt Browne. Możesz edytować inaczej :) – Touffy

Dzięki, to był problem, upuszczam() i wszystko jest teraz dobre. –

Zakres zmiennej w JavaScript jest głównie zorientowany na zakres funkcji. Tak jak w przypadku, funkcje zamykają swoje wewnętrzne zmienne. Więc można uniknąć zanieczyszczenia zasięg globalny prostu deklarowania zmiennych (i przypisywanie DOM EL) wewnątrz funkcji, że jesteś przypisując 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>

Źródło

2015-04-18 15:19:26 cssimsek

window.onload bez zmiennej globalnej

Odpowiedz

Powiązane problemy