Est-il possible d'utiliser une variable dans un fichier appelé first.js
dans un autre fichier appelé second.js
?
first.js
contient une variable appelée colorcodes
.
Est-il possible d'utiliser une variable dans un fichier appelé first.js
dans un autre fichier appelé second.js
?
first.js
contient une variable appelée colorcodes
.
Réponses:
Comme l'a dit Fermin, une variable dans la portée globale devrait être accessible à tous les scripts chargés après sa déclaration. Vous pouvez également utiliser une propriété de window
ou (dans la portée globale) this
pour obtenir le même effet.
// first.js
var colorCodes = {
back : "#fff",
front : "#888",
side : "#369"
};
... dans un autre fichier ...
// second.js
alert (colorCodes.back); // alerts `#fff`
... dans votre fichier html ...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
window
est la portée globale - donc window.colorCodes et l'objet (global) colorCodes est le même objet.
<script>var variable1 = true;</script> <script src="first.js"></script>
est-ce que first.js verra cette variable? Je l'ai testé dans l'extension Google Chrome et cela n'a pas fonctionné
/* global colorCodes */
sur la ligne ci-dessus pour éviter le message d'erreur "... n'est pas défini"
Vous pouvez exporter la variable du premier fichier à l'aide de l' exportation .
//first.js
const colorCode = {
black: "#000",
white: "#fff"
};
export { colorCode };
Ensuite, importez la variable dans le deuxième fichier à l'aide de l' importation .
//second.js
import { colorCode } from './first.js'
J'ai aimé ce que la réponse ci-dessus a dit mais même si cela n'a pas fonctionné avec moi
parce que j'étais declaring
ces variables inside
JQuery$( document ).ready()
alors assurez-vous de déclarer vos variables dans la
<script>
balise pas ailleurs
Cela devrait fonctionner - définissez une variable globale dans firstfile et accédez-y à partir de secondfile:
<script src="/firstfile.js"></script>
<script src="/secondfile.js"></script>
firstfile.js:
var colors = {
text:'#000000',
background:'#aaaaaa',
something_else:'blue'
};
secondfile.js:
do_something_with(colors.background);
Notez que l'ordre dans lequel vous chargez les fichiers de script est important pour certains navigateurs (IE6 bien sûr, peut-être pour d'autres)
En utilisant Node.js, vous pouvez exporter la variable via le module.
//first.js
const colorCode = {
black: "#000",
white: "#fff"
};
module.exports = { colorCode };
Ensuite, importez le module / la variable dans le deuxième fichier à l'aide de require.
//second.js
const { colorCode } = require('./first.js')
Vous pouvez utiliser le import
et une export
approche depuis ES6 en utilisant Webpack / Babel, mais dans Node.js vous devez activer un indicateur et utiliser l'extension .mjs.
Je suis tombé sur amplify.js . C'est vraiment simple à utiliser. Pour stocker une valeur, appelons-la "myValue", vous faites:
amplify.store("myKey", "myValue")
Et pour y accéder, vous faites
amplify.store("myKey")
Je fais peut-être cela un peu différemment. Je ne sais pas pourquoi j'utilise cette syntaxe, je l'ai copiée à partir d'un livre il y a longtemps. Mais chacun de mes fichiers js définit une variable. Le premier fichier, sans aucune raison, s'appelle R:
var R =
{
somevar: 0,
othervar: -1,
init: function() {
...
} // end init function
somefunction: function(somearg) {
...
} // end somefunction
...
}; // end variable R definition
$( window ).load(function() {
R.init();
})
Et puis si j'ai un gros morceau de code que je veux séparer, je le mets dans un fichier séparé et un nom de variable différent, mais je peux toujours référencer les variables et les fonctions R. J'ai appelé le nouveau TD sans aucune raison valable:
var TD =
{
xvar: 0,
yvar: -1,
init: function() {
...
} // end init function
sepfunction: function() {
...
R.somefunction(xvar);
...
} // end somefunction
...
}; // end variable TD definition
$( window ).load(function() {
TD.init();
})
Vous pouvez voir que là où, dans la «sepfunction» TD, j'appelle la fonction R.somefunction. Je me rends compte que cela ne donne aucune efficacité d'exécution car les deux scripts doivent être chargés, mais cela m'aide à garder mon code organisé.
Une meilleure façon est d'utiliser window. ETAT INITIAL
<script src="/firstfile.js">
// first.js
window.__INITIAL_STATE__ = {
back : "#fff",
front : "#888",
side : "#369"
};
</script>
<script src="/secondfile.js">
//second.js
console.log(window.__INITIAL_STATE__)
alert (window.__INITIAL_STATE__);
</script>
<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>