วิธีการประกาศตัวแปรส่วนกลางใน JavaScript


คำตอบ:


215

หากคุณต้องสร้างตัวแปรส่วนกลางในรหัสการผลิต (ซึ่งควรหลีกเลี่ยง) ให้ประกาศอย่างชัดเจนเสมอ :

window.globalVar = "This is global!";

ขณะที่มันเป็นไปได้ที่จะกำหนดตัวแปรทั่วโลกโดยเพียงแค่ถนัดvar(สมมติว่าไม่มีตัวแปรท้องถิ่นที่มีชื่อเดียวกัน) การทำเช่นนั้นจะสร้างนัยทั่วโลกซึ่งเป็นสิ่งที่ไม่ดีที่จะทำและจะสร้างข้อผิดพลาดในโหมดที่เข้มงวด


windowสามารถใช้ได้เฉพาะในเบราว์เซอร์ คุณช่วยแก้ไขคำตอบเพื่อให้ใช้งานได้ในทุกสภาพแวดล้อมหรือไม่ ดูวิธีรับวัตถุส่วนกลางใน JavaScript?
MichałPerłakowski

52

หากนี่เป็นแอปพลิเคชั่นเดียวที่คุณจะใช้ตัวแปรนี้แนวทางของเฟลิกซ์นั้นยอดเยี่ยม อย่างไรก็ตามหากคุณกำลังเขียนปลั๊กอิน 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(...) {...}เมื่อใดก็ตามที่ฉันต้องการบันทึกบางอย่างทั่วโลกและฉันก็ยังเก็บมันไว้ไม่ให้อยู่ในเนมสเปซส่วนกลาง


ขอบคุณสำหรับ Tomas นั้นในไซต์ที่ฉันกล่าวถึงข้างต้นวิธีการของเฟลิกซ์ใช้งานได้ดี แต่ฉันมีไซต์อื่นที่ฉันกำลังดำเนินการอยู่ซึ่งใช้ปลั๊กอินหลายตัวและแนวทางของคุณจะเหมาะอย่างยิ่งหากฉันสามารถทำให้มันใช้งานได้ ไชโยสำหรับความช่วยเหลือของคุณ
นักเต้น

นี่ทำงานได้ดีอย่างสมบูรณ์แบบ! เพียงตรวจสอบให้แน่ใจว่า @Tomas กล่าวสร้างคลาส / ผู้ถือของคุณเองสำหรับฟังก์ชันหรือตัวแปรที่คุณกำหนดเอง +1
ปิแอร์

ขอบคุณ Tomas! ถ้าไม่จำเป็นต้องใช้มากขึ้นวัตถุแม่ลบ (เช่น delete $.miniMenu) ตกลงหรือเปล่า
Kunj

1
@KunJ: แน่นอนเช่นเดียวกับอะไร: ถ้าคุณสามารถรับประกันได้ว่าจะไม่ใช้อีกต่อไปก็ปลอดภัยที่จะลบ อย่างไรก็ตาม JavaScript ประสงค์ขยะเก็บมันสำหรับคุณเพื่อให้คุณไม่ต้องdelete $.miniMenuไป
Tomas Aschan

20

หมายเหตุ: คำถามเกี่ยวกับ 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();
});

เคล็ดลับ : เรียกใช้โค้ดทั้งหมดนี้ในคอนโซลในหน้านี้ ;-)


3
$ gallery และ $ current เป็นเพียงตัวแปรส่วนกลางธรรมดาไม่ใช่หรือ มันทำงานได้เพราะคุณกำหนดให้เป็นตัวแปรส่วนกลางโดยการละเว้น 'var' แต่เครื่องหมายดอลลาร์ที่อยู่ข้างหน้าไม่ได้ทำให้เป็น 'ตัวแปร jQuery' ... มันเหมือนกับการใส่เครื่องหมายขีดล่างหรือเครื่องหมายอื่น ๆ จากพวกเขา ... พวกเขาจะเป็นตัวแปร jQuery ถ้าคุณใช้วัตถุ jQuery ($) และเพิ่มคุณสมบัติเข้าไป: $ .myGlobalVariable = 'my value' ...
Andres Elizondo

คุณอาจจะพูดถูก แต่สิ่งที่ควรสังเกตคือการใช้ไวยากรณ์ $ myVar คุณจะได้รับ 2 การผจญภัย 1) ตัวแปรเป็นแบบสากลโดยไม่มีการประกาศพิเศษใด ๆ (นอกเหนือจาก $) และ 2) คุณสามารถติดตามตัวแปรส่วนกลางของคุณได้อย่างง่ายดายภายในโค้ด เปิดให้มีการอภิปราย ...
aesede

คำตอบที่ผิด เห็นด้วยกับ Andres นั่นไม่ใช่ตัวแปร jQuery เลย หากคุณไม่ได้กำหนดไว้$current = 0;ที่จุดเริ่มต้นของฟังก์ชันฟังก์ชันในภายหลังจะไม่ทำงาน
harrrrrrry

15

นี่คือตัวอย่างพื้นฐานของตัวแปรส่วนกลางที่ฟังก์ชันอื่น ๆ ของคุณสามารถเข้าถึงได้ นี่คือตัวอย่างสดสำหรับคุณ: 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 () พร้อมกับฟังก์ชันอื่น ๆ ของคุณ


คำตอบที่ดีที่สุดสำหรับการทำงานของตัวแปรส่วนกลางใน jQuery
Clinton Green

1
ฉันรู้ว่าฉันกำลังขุดหลุมฝังศพ แต่นี่ไม่ใช่ตัวแปรระดับโลกที่ชัดเจน นี่เป็นการปรับแต่งเพิ่มเติมกับตัวแปรสาธารณะที่ใช้ร่วมกันซึ่งไม่ได้กำหนดขอบเขตไว้ในการปิดสำหรับสคริปต์ที่มีขนาดเล็กมาก พวกเขาเป็นวิธีการ / การใช้งานที่แตกต่างกันสองวิธีและวิธีนี้จะทำให้คุณประสบปัญหาใหญ่หากคุณประกาศทั่วโลกอย่างชัดเจนในสคริปต์ที่อยู่ตรงกลางของสคริปต์ต่างๆ ฉันสามารถจินตนาการได้ว่าส่วนหน้าในทีมของฉันประกาศตัวแปรส่วนกลางที่ด้านบนของสคริปต์ซึ่งเป็นตัวแปรที่ 10 ที่ถูกเรียกเข้าสู่ DOM
Brian Ellis

4

ประกาศตัวแปรนอกฟังก์ชัน

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
}

3

วิธีที่ดีที่สุดคือใช้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);

นี่คือplnkr หวังว่ามันจะช่วยได้!

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.