non possono accedere alle variabili in un altro file javascript

Question

quindi devo collegamento tutti i file necessari nel file index.html:

<script src="jquery.js"></script> 
    <script src="notify.js"></script> 
    <script src="script.js"></script> 

creo un oggetto in 'notify.js':

var notify = { 
    newNotification : function(text) { 
    } 
} 

script.js:

alert(notify.newNotification); 

Quando provo ad accedere all'oggetto 'comunicare' in 'script.js', funziona solo fine.But voglio usare jquer y così aggiungo $ (document) .ready() per entrambi i file in questo modo:

notify.js

$(document).ready (
    function() { 
var notify = { 
    newNotification : function(text) { 
    } 
} 
} 
) 

script.js:

$(document).ready (
    function() { 
alert(notify.newNotification); 
    } 
) 

E dopo aggiungo che , si tratta di notifica non definita. Cosa c'è che non va? Qualcuno può spiegare perché non funziona?

Answer 1

Come è stato definito var notify in notify.js all'interno di $(document).ready( che è una funzione anonima e lo scope var notify è limitato a questa funzione.

quindi non è accessibile all'esterno della funzione $(document).ready(

Per rendere accessibile al di fuori non avvolgerlo in $(document).ready( funzione

in questo modo: -

var notify; 
$(document).ready(function() { 
    notify = { 
     newNotification: function (text) { } 
    } 
}); 

Answer 2

In questo caso non c'è è necessario avvolgere l'oggetto di notifica in dom ready ... perché dal suo aspetto non si sta creando alcun riferimento all'elemento dom durante la creazione dell'oggetto ... l'unica cosa che conta è qualsiasi invocazione di metodo che si occupa di dom elem deve essere fatto su dom ready.

var notify = { 
    newNotification: function (text) {} 
} 

$(document).ready(function() { 
    notify.newNotification() 
}) 

se si dichiara la variabile all'interno di un gestore dom pronto allora diventa una variabile locale alla dom gestore pronto ... quindi non sarà accessibile al di fuori della dom gestore pronto ...

altro soluzione è quella di aggiungere la variabile alla portata globale entro il manico pronto dom come

var notify; 
$(document).ready(function() { 
    notify = { 
     newNotification: function (text) {} 
    } 
}) 

o

$(document).ready(function() { 
    window.notify = { 
     newNotification: function (text) {} 
    } 
}) 

Answer 3

Hai solo bisogno di un documento.ready E questo solo dichiarare le variabili che si muoveranno liberamente nei loro script.

vedere l'esempio:

script.js:

$(document).ready(function(){ 
    // declare the variables as global 
    $.varA, $.varB, $.varC; 
}); 

notificare.js:

function doNotify(){ 
    // your code here 
    $.varA = /*your code here */ 
} 

function otherFunc(txt){ 
    // your code here 
    $.varB = txt; 
} 

Answer 4

Prova questo.

var notify = { 
    newNotification : function(text) { 
    } 

Answer 5

Tutti i file JavaScript verranno caricati prima che il documento sia pronto.

creare una funzione separata nel script.js che fa riferimento l'oggetto notify, quindi chiamare quella funzione da $(document).ready

Answer 6

Come tutti gli altri qui già fatto notare: utilizzare solo $().ready quando sei la manipolazione DOM-Elements e la variabile non è accessibile perché hai utilizzato la parola chiave var (come dovresti). La parola chiave var limita le variabili definite all'ambito corrente, che è l'ambito della funzione anonima che si utilizza come DOM-Ready-Handler.

Quindi, la rimozione del numero di telefono non necessario $().read risolverà temporaneamente il problema.

MA (!) È necessario avvolgere il codice in una chiusura per evitare di compromettere l'ambito globale ed evitare possibili conflitti di denominazione con codice di terze parti.

Come quella:

notify.js

;(function ($, window, undefined) { 
    var notify = { 
    newNotification : function(text) { 
     return text; 
    } 
    }; 
})(jQuery, this); 

script.js

;(function ($, window, undefined) { 
    alert(notify.newNotification()); 
})(jQuery, this); 

Così, ora avranno lo stesso problema di prima, non si ha accesso al tuo oggetto.

Certo, potreste semplicemente aggiungere il vostro oggetto notify all'ambito globale come suggerito da Arun P Johny nella sua risposta, ma sono abbastanza sicuro che nel tempo ci saranno più oggetti di cui avrete bisogno per renderli accessibili a livello globale. Se si inseriscono ognuno di essi nell'ambito globale, si inizia di nuovo a modificare l'ambito globale, quindi la mia raccomandazione sarebbe UNO oggetto globale che includerà tutti gli altri oggetti/variabili di cui si ha bisogno a livello globale. (O ancora meglio usare qualcosa di simile requirejs

somethink come questo:

main.js

;var MyApp = {}; # Only variable in global scope 

# Maybe some more initalization code here, dunno 

notify.js

;(function ($, window, undefined) { 
    MyApp.notify = { 
    newNotification : function(text) { 
     return text; 
    } 
    }; 
})(jQuery, this); 

script.js

;(function ($, window, undefined) { 
    alert(MyApp.notify.newNotification()); 
})(jQuery, this); 

alcune interessanti Q/A di circa portata e chiusure qui su StackOverflow:

• What is the scope of variables in JavaScript?
• How do JavaScript closures work?
• JavaScript closures vs. anonymous functions

una buona risposta circa fare in giro con la ambito globale:

• What is meant by “leaking” into global scope?