कई फ़ाइलों में जावास्क्रिप्ट में वैश्विक चर

130

मेरे जावास्क्रिप्ट कोड का एक गुच्छा एक बाहरी फ़ाइल में है, जिसे हेल्पर्स.जेएस कहा जाता है। HTML के अंदर जो इस जावास्क्रिप्ट कोड को कॉल करता है, मुझे यह जानने की जरूरत है कि क्या helpers.js से एक निश्चित फ़ंक्शन को बुलाया गया है।

मैंने परिभाषित करके एक वैश्विक चर बनाने का प्रयास किया है:

var myFunctionTag = true;

वैश्विक दायरे में मेरे HTML कोड और हेल्पर्स.js दोनों में।

Heres मेरा html कोड कैसा दिखता है:

<html>
...
<script type='text/javascript' src='js/helpers.js'></script>    
...
<script>
  var myFunctionTag = false;
  ...
  //I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js
</script>

क्या मैं भी संभव करने के लिए कोशिश कर रहा हूँ?

— गोरो
स्रोत

1

ठीक है, आपने इसे दूसरे टैग ब्लॉक में गलत पर सेट किया है <script>। मैंने सिर्फ 2 अलग-अलग तरीकों की कोशिश की (हेल्पर्स.जेएस फ़ाइल से पहले संस्करण घोषित किए बिना) और वे दोनों काम करते थे। मैं एक उत्तर पोस्ट करूंगा, लेकिन ऐसा लगता है कि आपके प्रश्न में कुछ महत्वपूर्ण जानकारी गायब होनी चाहिए।

— स्टीफन पी

window.onload = function () {// अपना कोड शुरू करें} सबसे अच्छा समाधान होगा - और यह

— स्लोवाक

125

हेल्पर्स.जेएस फ़ाइल को शामिल करने से पहले आपको चर घोषित करने की आवश्यकता है। बस helpers.js के लिए शामिल से ऊपर एक स्क्रिप्ट टैग बनाएं और इसे वहां परिभाषित करें।

<script type='text/javascript' > 
  var myFunctionTag = false; 
</script>
<script type='text/javascript' src='js/helpers.js'></script>     
... 
<script type='text/javascript' > 
  // rest of your code, which may depend on helpers.js
</script>

— tvanfosson
स्रोत

9

मेरे लिए काम नहीं करता है क्योंकि जब दूसरे html में लोड किए गए दूसरे js से एक्सेस करने की कोशिश की जाती है, तो वह कहता है कि वैरिएबल घोषित नहीं है

— ACV

16

चर को .jsफ़ाइल में घोषित किया जा सकता है और बस HTML फ़ाइल में संदर्भित किया जा सकता है । मेरा संस्करण helpers.js:

var myFunctionWasCalled = false;

function doFoo()
{
    if (!myFunctionWasCalled) {
        alert("doFoo called for the very first time!");
        myFunctionWasCalled = true;
    }
    else {
        alert("doFoo called again");
    }
}

और इसे जांचने के लिए एक पृष्ठ:

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>

<body>


<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

<script type="text/javascript">doFoo();</script>

<p>Some stuff in between</p>

<script type="text/javascript">doFoo();</script>

<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

</body>
</html>

आप देखेंगे कि परीक्षण alert()दो अलग-अलग चीजों को प्रदर्शित करेगा, और पृष्ठ पर लिखा गया मूल्य दूसरी बार अलग होगा।

— स्टीफन पी
स्रोत

15

ठीक है, दोस्तों, यहाँ मेरी छोटी परीक्षा भी है। मुझे एक समान समस्या थी, इसलिए मैंने 3 स्थितियों का परीक्षण करने का निर्णय लिया:

एक HTML फ़ाइल, एक बाहरी जेएस फ़ाइल ... क्या यह बिल्कुल काम करती है - क्या कार्य एक वैश्विक संस्करण के माध्यम से संवाद कर सकते हैं?
दो HTML फाइलें, एक बाहरी JS फाइल, एक ब्राउज़र, दो टैब: क्या वे वैश्विक संस्करण के माध्यम से हस्तक्षेप करेंगे?
एक HTML फ़ाइल, 2 ब्राउज़रों द्वारा खुली, क्या यह काम करेगी और क्या वे हस्तक्षेप करेगी?

सभी परिणाम उम्मीद के मुताबिक थे।

यह काम करता हैं। कार्य f1 () और f2 () वैश्विक संस्करण के माध्यम से संचार करते हैं (var बाहरी JS फ़ाइल में है, HTML फ़ाइल में नहीं)।
वे हस्तक्षेप नहीं करते। प्रत्येक ब्राउज़र टैब, प्रत्येक HTML पेज के लिए JS फाइल की स्पष्ट रूप से अलग-अलग प्रतियां बनाई गई हैं।
सभी स्वतंत्र रूप से काम करते हैं, जैसा कि अपेक्षित था।

ब्राउज़िंग ट्यूटोरियल के बजाय, मुझे इसे आज़माने में आसानी हुई, इसलिए मैंने किया। मेरा निष्कर्ष: जब भी आप अपने HTML पेज में एक बाहरी JS फाइल को शामिल करते हैं, तो बाहरी JS की सामग्री पृष्ठ के प्रस्तुत होने से पहले आपके HTML पेज में "कॉपी / पेस्ट" हो जाती है। या यदि आप करेंगे तो अपने PHP पेज में। कृपया मुझे सही करें अगर मैं यहाँ गलत हूँ। Thanx।

मेरे उदाहरण फ़ाइलों का पालन करें:

बाहरी जेएस:

var global = 0;

function f1()
{
    alert('fired: f1');
    global = 1;
    alert('global changed to 1');
}

function f2()
{
    alert('fired f2');
    alert('value of global: '+global);
}

HTML 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

HTML 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

— मार्टिन
स्रोत

1

HTML 1 और HTML 2 समान हैं (पृष्ठ शीर्षक को छोड़कर) ... फिर भी, मैंने दो फाइलें बनाईं, बस उन्हें शारीरिक रूप से अलग करने के लिए।

— मार्टिन

1

मुझे लगता है कि आपको वैश्विक चरों के बजाय "स्थानीय भंडारण" का उपयोग करना चाहिए।

यदि आप चिंतित हैं कि "स्थानीय भंडारण" बहुत पुराने ब्राउज़रों में समर्थित नहीं हो सकता है, तो एक मौजूदा प्लग-इन का उपयोग करने पर विचार करें, जिसमें "स्थानीय भंडारण" की उपलब्धता की जांच की जाती है और उपलब्ध नहीं होने पर अन्य तरीकों का उपयोग करता है।

मैंने http://www.jstorage.info/ का उपयोग किया और मैं अब तक इससे खुश हूं।

— paulo62
स्रोत

1

आप एक json वस्तु बना सकते हैं जैसे:

globalVariable={example_attribute:"SomeValue"};

in fileA.js

और इसे fileB.js से एक्सेस करें जैसे: globalVariable.example_attribute

— partizanos
स्रोत

1

एक js फ़ाइल से दूसरे js फ़ाइल में मानों को पारित करने के लिए नमस्ते, हम स्थानीय भंडारण अवधारणा का उपयोग कर सकते हैं

<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

दो.जेएस फ़ाइल

function myFunction() {
var test =localStorage.name;

 alert(test);
}

तीन.जेएस फ़ाइल

localStorage.name = 1;

— Sajith
स्रोत

1

यदि आप नोड का उपयोग कर रहे हैं:

मान घोषित करने के लिए फ़ाइल बनाएं, यह कहें values.js:

export let someValues = {
  value1: 0
}

फिर इसे उसी फ़ाइल के शीर्ष पर आवश्यकतानुसार आयात करें, जिसका उपयोग इसमें किया गया है (जैसे, file.js):

import { someValues } from './values'

console.log(someValues);

— जारेड विल्बर
स्रोत

-1

// जावास्क्रिप्ट फ़ाइल 1

localStorage.setItem('Data',10);

// जावास्क्रिप्ट फ़ाइल 2

var number=localStorage.getItem('Data');

Html में अपनी JS फाइलों को लिंक करना न भूलें :)

— MRJ
स्रोत