window.onload không có biến toàn cầu

Tôi đang cố gắng sử dụng windows.load mà không có biến toàn cầu.window.onload không có biến toàn cầu

Mã 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>

Các mã JavaScript biến toàn cầu:

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

Và cuối cùng là KHÔNG LÀM VIỆC không có mã biến toàn cầu:

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

Lý do mà tôi muốn ngừng sử dụng biến toàn cục là tôi sợ nó sẽ mâu thuẫn với mã tương lai.

Cảm ơn trước

Adrian

Nguồn

2015-04-18 Adrian Gherasim

BTW, bạn có thể sử dụng 'này .myButton = 'như là một thay thế cho' myNS.myButton = '. Có lẽ là vấn đề sở thích cá nhân trong trường hợp này ... –

bạn có thể sử dụng mẫu [IIFE] (http://benalman.com/news/2010/11/immediately-invoked-function-expression/) và bọc eveyrthing trong một chức năng tự thực hiện, thiết lập phạm vi bên trong và sẽ không để cho các biến bị rò rỉ đến phạm vi toàn cầu – yoavmatchulsky

hoặc bạn có thể định nghĩa 'alertMM()' bên trong hàm onload của bạn và sử dụng cùng một đối tượng 'myButton' – yoavmatchulsky

Trong:

window.onload = myNS.setUp();

khi bạn xác định window.onload gọi lại, bạn nên gán cho nó chức năng riêng của mình (chỉ myNS.setUp) để nó có thể được gọi sau. Những gì mã của bạn làm thay vào đó là gọi hàm ngay lập tức và gán kết quả.

Nguồn

2015-04-18 13:15:10 Touffy

Hy vọng nó rõ ràng hơn theo cách đó, @Matt Browne. Bạn được chào đón để chỉnh sửa nếu không :) – Touffy

Cảm ơn, đó là vấn đề, tôi thả() và tất cả là tốt bây giờ. –

Phạm vi biến trong JavaScript chủ yếu là phạm vi chức năng được định hướng. Như trong, các hàm bao gồm các biến bên trong của chúng. Vì vậy, bạn có thể tránh gây ô nhiễm phạm vi toàn cầu chỉ đơn giản bằng cách tuyên bố các biến của bạn (và gán DOM el) trong chức năng mà bạn đang gán cho 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>

Nguồn

2015-04-18 15:19:26 cssimsek

window.onload không có biến toàn cầu

Trả lời

Các vấn đề liên quan