ฉันจะประกาศตัวแปรส่วนกลางใน JavaScript ได้อย่างไร
ฉันจะประกาศตัวแปรส่วนกลางใน JavaScript ได้อย่างไร
คำตอบ:
หากคุณต้องสร้างตัวแปรส่วนกลางในรหัสการผลิต (ซึ่งควรหลีกเลี่ยง) ให้ประกาศอย่างชัดเจนเสมอ :
window.globalVar = "This is global!";
ขณะที่มันเป็นไปได้ที่จะกำหนดตัวแปรทั่วโลกโดยเพียงแค่ถนัดvar
(สมมติว่าไม่มีตัวแปรท้องถิ่นที่มีชื่อเดียวกัน) การทำเช่นนั้นจะสร้างนัยทั่วโลกซึ่งเป็นสิ่งที่ไม่ดีที่จะทำและจะสร้างข้อผิดพลาดในโหมดที่เข้มงวด
หากนี่เป็นแอปพลิเคชั่นเดียวที่คุณจะใช้ตัวแปรนี้แนวทางของเฟลิกซ์นั้นยอดเยี่ยม อย่างไรก็ตามหากคุณกำลังเขียนปลั๊กอิน jQuery ให้พิจารณา "namespacing" (รายละเอียดเกี่ยวกับเครื่องหมายคำพูดในภายหลัง ... ) ตัวแปรและฟังก์ชันที่จำเป็นภายใต้วัตถุ jQuery ตัวอย่างเช่นฉันกำลังทำงานกับเมนูป๊อปอัป jQuery ที่ฉันเรียกว่า miniMenu ดังนั้นฉันได้กำหนด "เนมสเปซ" miniMenu
ภายใต้ jQuery และฉันวางทุกอย่างไว้ที่นั่น
เหตุผลที่ฉันใช้เครื่องหมายคำพูดเมื่อฉันพูดถึงเนมสเปซ JavaScript ก็คือมันไม่ใช่เนมสเปซในความหมายปกติ แต่ฉันใช้ออบเจ็กต์ JavaScript และวางฟังก์ชันและตัวแปรทั้งหมดของฉันเป็นคุณสมบัติของอ็อบเจ็กต์นี้
นอกจากนี้เพื่อความสะดวกฉันมักจะเว้นวรรคเนมสเปซของปลั๊กอินด้วยi
เนมสเปซสำหรับสิ่งที่ควรใช้ภายในปลั๊กอินเท่านั้นเพื่อซ่อนจากผู้ใช้ปลั๊กอิน
นี่คือวิธีการทำงาน:
// An object to define utility functions and global variables on:
$.miniMenu = new Object();
// An object to define internal stuff for the plugin:
$.miniMenu.i = new Object();
ตอนนี้ฉันสามารถทำได้$.miniMenu.i.globalVar = 3
หรือ$.miniMenu.i.parseSomeStuff = function(...) {...}
เมื่อใดก็ตามที่ฉันต้องการบันทึกบางอย่างทั่วโลกและฉันก็ยังเก็บมันไว้ไม่ให้อยู่ในเนมสเปซส่วนกลาง
delete $.miniMenu
) ตกลงหรือเปล่า
delete $.miniMenu
ไป
หมายเหตุ: คำถามเกี่ยวกับ JavaScript และคำตอบนี้เกี่ยวกับ jQuery ซึ่งไม่ถูกต้อง นี่เป็นคำตอบเก่า ๆ จากช่วงเวลาที่ jQuery แพร่หลาย
แต่ขอแนะนำให้ทำความเข้าใจขอบเขตและการปิดใน JavaScript
ด้วย jQuery คุณสามารถทำได้ไม่ว่าการประกาศจะอยู่ที่ใด:
$my_global_var = 'my value';
และจะสามารถใช้ได้ทุกที่
ฉันใช้มันเพื่อสร้างแกลเลอรี่ภาพอย่างรวดเร็วเมื่อภาพกระจายไปในที่ต่างๆเช่น:
$gallery = $('img');
$current = 0;
$gallery.each(function(i,v){
// preload images
(new Image()).src = v;
});
$('div').eq(0).append('<a style="display:inline-block" class="prev">prev</a> <div id="gallery"></div> <a style="display:inline-block" class="next">next</a>');
$('.next').click(function(){
$current = ( $current == $gallery.length - 1 ) ? 0 : $current + 1;
$('#gallery').hide().html($gallery[$current]).fadeIn();
});
$('.prev').click(function(){
$current = ( $current == 0 ) ? $gallery.length - 1 : $current - 1;
$('#gallery').hide().html($gallery[$current]).fadeIn();
});
เคล็ดลับ : เรียกใช้โค้ดทั้งหมดนี้ในคอนโซลในหน้านี้ ;-)
$current = 0;
ที่จุดเริ่มต้นของฟังก์ชันฟังก์ชันในภายหลังจะไม่ทำงาน
นี่คือตัวอย่างพื้นฐานของตัวแปรส่วนกลางที่ฟังก์ชันอื่น ๆ ของคุณสามารถเข้าถึงได้ นี่คือตัวอย่างสดสำหรับคุณ: http://jsfiddle.net/fxCE9/
var myVariable = 'Hello';
alert('value: ' + myVariable);
myFunction1();
alert('value: ' + myVariable);
myFunction2();
alert('value: ' + myVariable);
function myFunction1() {
myVariable = 'Hello 1';
}
function myFunction2() {
myVariable = 'Hello 2';
}
หากคุณกำลังทำสิ่งนี้ภายในฟังก์ชัน jQuery ready () ให้ตรวจสอบว่าตัวแปรของคุณอยู่ในฟังก์ชัน ready () พร้อมกับฟังก์ชันอื่น ๆ ของคุณ
ประกาศตัวแปรนอกฟังก์ชัน
function dosomething(){
var i = 0; // Can only be used inside function
}
var i = '';
function dosomething(){
i = 0; // Can be used inside and outside the function
}
วิธีที่ดีที่สุดคือใช้closures
เนื่องจากwindow
วัตถุมีคุณสมบัติมากและเกะกะมาก
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="init.js"></script>
<script type="text/javascript">
MYLIBRARY.init(["firstValue", 2, "thirdValue"]);
</script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello !</h1>
</body>
</html>
init.js (ตามคำตอบนี้ )
var MYLIBRARY = MYLIBRARY || (function(){
var _args = {}; // Private
return {
init : function(Args) {
_args = Args;
// Some other initialising
},
helloWorld : function(i) {
return _args[i];
}
};
}());
script.js
// Here you can use the values defined in the HTML content as if it were a global variable
var a = "Hello World " + MYLIBRARY.helloWorld(2);
alert(a);
window
สามารถใช้ได้เฉพาะในเบราว์เซอร์ คุณช่วยแก้ไขคำตอบเพื่อให้ใช้งานได้ในทุกสภาพแวดล้อมหรือไม่ ดูวิธีรับวัตถุส่วนกลางใน JavaScript?