Cara mendeklarasikan variabel global di JavaScript

Question 1

Bagaimana cara mendeklarasikan variabel global di JavaScript?

Question 2

Jika Anda harus menghasilkan variabel global dalam kode produksi (yang harus dihindari), selalu nyatakan secara eksplisit :

window.globalVar = "This is global!";

Meskipun dimungkinkan untuk mendefinisikan variabel global dengan hanya menghilangkan var(dengan asumsi tidak ada variabel lokal dengan nama yang sama), hal itu menghasilkan global implisit , yang merupakan hal yang buruk untuk dilakukan dan akan menghasilkan kesalahan dalam mode ketat .

Question 3

Jika ini adalah satu-satunya aplikasi tempat Anda akan menggunakan variabel ini, pendekatan Felix sangat bagus. Namun, jika Anda menulis plugin jQuery, pertimbangkan variabel "namespacing" (detail tentang tanda kutip nanti ...) dan fungsi yang diperlukan di bawah objek jQuery. Misalnya, saya sedang mengerjakan menu popup jQuery yang saya sebut miniMenu. Jadi, saya telah mendefinisikan "namespace" di miniMenubawah jQuery, dan saya menempatkan semuanya di sana.

Alasan saya menggunakan tanda kutip ketika saya berbicara tentang ruang nama JavaScript adalah karena mereka sebenarnya bukan ruang nama dalam arti normal. Sebagai gantinya, saya hanya menggunakan objek JavaScript dan menempatkan semua fungsi dan variabel saya sebagai properti objek ini.

Selain itu, untuk kenyamanan, saya biasanya memberi sub-spasi pada namespace plugin dengan inamespace untuk hal-hal yang seharusnya hanya digunakan secara internal di dalam plugin, untuk menyembunyikannya dari pengguna plugin.

Begini Cara kerjanya:

// 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();

Sekarang saya bisa melakukannya $.miniMenu.i.globalVar = 3atau $.miniMenu.i.parseSomeStuff = function(...) {...}kapan pun saya perlu menyimpan sesuatu secara global, dan saya masih menyimpannya di luar namespace global.

Question 4

_{Catatan: Pertanyaannya adalah tentang JavaScript, dan jawaban ini tentang jQuery, itu salah. Ini adalah jawaban lama, sejak jQuery tersebar luas.}

Sebagai gantinya, saya merekomendasikan untuk memahami cakupan dan closure di JavaScript.

Jawaban lama dan buruk

Dengan jQuery Anda bisa melakukan ini, di mana pun deklarasinya:

$my_global_var = 'my value';

Dan akan tersedia di mana saja.

Saya menggunakannya untuk membuat galeri gambar cepat, saat gambar tersebar di berbagai tempat, seperti:

$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();
});

Tip : jalankan seluruh kode ini di konsol di halaman ini ;-)

Question 5

Berikut adalah contoh dasar variabel global yang dapat diakses oleh fungsi Anda lainnya. Berikut adalah contoh langsung untuk Anda: 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';
}

Jika Anda melakukan ini dalam fungsi jQuery ready (), pastikan variabel Anda berada di dalam fungsi ready () bersama dengan fungsi lainnya.

Question 6

Deklarasikan variabel di luar fungsi

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
}

Question 7

Cara terbaik adalah menggunakan closures, karena windowobjek menjadi sangat, sangat berantakan dengan properti.

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 (berdasarkan jawaban ini )

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);

Berikut plnkr tersebut . Semoga membantu!

Answer 1

135

Bagaimana cara mendeklarasikan variabel global di JavaScript?

javascript global-variables Penari
sumber

Answer 2

Jika Anda harus menghasilkan variabel global dalam kode produksi (yang harus dihindari), selalu nyatakan secara eksplisit :

window.globalVar = "This is global!";

Meskipun dimungkinkan untuk mendefinisikan variabel global dengan hanya menghilangkan var(dengan asumsi tidak ada variabel lokal dengan nama yang sama), hal itu menghasilkan global implisit , yang merupakan hal yang buruk untuk dilakukan dan akan menghasilkan kesalahan dalam mode ketat .

Answer 3

windowhanya tersedia di browser. Bisakah Anda mengedit jawaban Anda untuk membuatnya bekerja di semua lingkungan? Lihat Bagaimana cara mendapatkan objek global di JavaScript?

Michał Perłakowski

Answer 4

Jika ini adalah satu-satunya aplikasi tempat Anda akan menggunakan variabel ini, pendekatan Felix sangat bagus. Namun, jika Anda menulis plugin jQuery, pertimbangkan variabel "namespacing" (detail tentang tanda kutip nanti ...) dan fungsi yang diperlukan di bawah objek jQuery. Misalnya, saya sedang mengerjakan menu popup jQuery yang saya sebut miniMenu. Jadi, saya telah mendefinisikan "namespace" di miniMenubawah jQuery, dan saya menempatkan semuanya di sana.

Alasan saya menggunakan tanda kutip ketika saya berbicara tentang ruang nama JavaScript adalah karena mereka sebenarnya bukan ruang nama dalam arti normal. Sebagai gantinya, saya hanya menggunakan objek JavaScript dan menempatkan semua fungsi dan variabel saya sebagai properti objek ini.

Selain itu, untuk kenyamanan, saya biasanya memberi sub-spasi pada namespace plugin dengan inamespace untuk hal-hal yang seharusnya hanya digunakan secara internal di dalam plugin, untuk menyembunyikannya dari pengguna plugin.

Begini Cara kerjanya:

// 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();

Sekarang saya bisa melakukannya $.miniMenu.i.globalVar = 3atau $.miniMenu.i.parseSomeStuff = function(...) {...}kapan pun saya perlu menyimpan sesuatu secara global, dan saya masih menyimpannya di luar namespace global.

Answer 5

Terima kasih untuk itu Tomas, Di situs yang saya sebutkan di atas, pendekatan Felix berfungsi dengan baik, tetapi saya memiliki situs lain yang juga saya kerjakan yang menggunakan beberapa plugin dan pendekatan Anda akan ideal jika saya bisa membuatnya berfungsi. Bersulang untuk bantuanmu.

Penari

Answer 6

Ini bekerja dengan sangat baik! Pastikan seperti yang dikatakan @Tomas, Buat kelas / tempat Anda sendiri untuk fungsi atau variabel kustom Anda sendiri. +1

Pierre

Answer 7

Terima kasih Tomas! Jika tidak diperlukan lagi, hapus objek induk (misalnya:) delete $.miniMenu. Apakah ini oke?

Kunj

Answer 8

1

@KunJ: Tentu, seperti apa pun: jika Anda dapat menjamin bahwa itu tidak akan digunakan lagi, maka aman untuk menghapusnya. Namun, JavaScript akan mengumpulkan sampah untuk Anda, jadi Anda tidak perlu melakukannya delete $.miniMenu.

Tomas Aschan

Answer 9

_{Catatan: Pertanyaannya adalah tentang JavaScript, dan jawaban ini tentang jQuery, itu salah. Ini adalah jawaban lama, sejak jQuery tersebar luas.}

Sebagai gantinya, saya merekomendasikan untuk memahami cakupan dan closure di JavaScript.

Jawaban lama dan buruk

Dengan jQuery Anda bisa melakukan ini, di mana pun deklarasinya:

$my_global_var = 'my value';

Dan akan tersedia di mana saja.

Saya menggunakannya untuk membuat galeri gambar cepat, saat gambar tersebar di berbagai tempat, seperti:

$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();
});

Tip : jalankan seluruh kode ini di konsol di halaman ini ;-)

Answer 10

3

Bukankah $ gallery dan $ current hanyalah variabel global normal? Mereka berfungsi karena Anda mendefinisikannya sebagai variabel global dengan menghilangkan 'var', tetapi tanda dolar di depannya tidak menjadikannya 'variabel jQuery' ... Ini secara harfiah seperti meletakkan garis bawah atau tanda lain apa pun darinya ... Mereka akan menjadi variabel jQuery jika Anda menggunakan objek jQuery ($) dan menambahkan properti ke dalamnya: $ .myGlobalVariable = 'my value' ...

Andres Elizondo

Answer 11

Anda mungkin benar, tetapi yang perlu diperhatikan adalah bahwa menggunakan sintaks $ myVar Anda mendapatkan 2 peningkatan, 1) variabel bersifat global tanpa deklarasi khusus (selain $); dan 2) Anda dapat melacak variabel global Anda dengan sangat mudah di dalam kode. Namun terbuka untuk diskusi ...

aesede

Answer 12

Jawaban yang menyesatkan. Setuju dengan Andres, itu BUKAN variabel jQuery sama sekali. Jika Anda tidak menentukan $current = 0;di awal fungsi, fungsi selanjutnya tidak akan berfungsi.

harrrrrrry

Answer 13

15

Berikut adalah contoh dasar variabel global yang dapat diakses oleh fungsi Anda lainnya. Berikut adalah contoh langsung untuk Anda: 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';
}

Jika Anda melakukan ini dalam fungsi jQuery ready (), pastikan variabel Anda berada di dalam fungsi ready () bersama dengan fungsi lainnya.

Paul Dragoonis
sumber

Jawaban terbaik untuk bagaimana variabel global bekerja di jQuery.

Clinton Green

1

Saya tahu saya sedang menggali lebih dalam, tetapi ini bahkan bukan variabel global eksplisit. Ini lebih selaras dengan variabel publik bersama yang tidak termasuk dalam penutupan untuk skrip yang sangat kecil. Mereka adalah dua metode / penggunaan yang sangat berbeda dan yang satu ini akan membuat Anda mendapat masalah besar jika Anda mendeklarasikan global eksplisit dalam skrip yang berada di tengah-tengah beberapa skrip yang berbeda. Saya hanya bisa membayangkan ujung depan tim saya mendeklarasikan variabel global di bagian atas skrip yang ke-10 dipanggil ke DOM.

Brian Ellis

Answer 14

Jawaban terbaik untuk bagaimana variabel global bekerja di jQuery.

Clinton Green

Answer 15

1

Saya tahu saya sedang menggali lebih dalam, tetapi ini bahkan bukan variabel global eksplisit. Ini lebih selaras dengan variabel publik bersama yang tidak termasuk dalam penutupan untuk skrip yang sangat kecil. Mereka adalah dua metode / penggunaan yang sangat berbeda dan yang satu ini akan membuat Anda mendapat masalah besar jika Anda mendeklarasikan global eksplisit dalam skrip yang berada di tengah-tengah beberapa skrip yang berbeda. Saya hanya bisa membayangkan ujung depan tim saya mendeklarasikan variabel global di bagian atas skrip yang ke-10 dipanggil ke DOM.

Brian Ellis

Answer 16

Deklarasikan variabel di luar fungsi

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
}

Answer 17

Cara terbaik adalah menggunakan closures, karena windowobjek menjadi sangat, sangat berantakan dengan properti.

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 (berdasarkan jawaban ini )

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);

Berikut plnkr tersebut . Semoga membantu!

Cara mendeklarasikan variabel global di JavaScript

Jawaban:

Jawaban lama dan buruk