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!