क्या मैं किसी अन्य फ़ाइल से चर का उपयोग कर सकता हूं?


178

क्या किसी फ़ाइल में एक चर का उपयोग करना संभव है जिसे first.jsदूसरी फ़ाइल के अंदर बुलाया जाता हैsecond.js ?

first.jsनामक एक चर होता है colorcodes


@ रोकी: उदाहरण के लिए, आप किसी अन्य वेबसाइट से डेटा लोड कर सकते हैं, जबकि उन्हें संसाधित करने के लिए स्क्रिप्ट आपकी साइट पर है:<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>
पिस्कॉर ने इमारत को छोड़ दिया

डेटा स्रोत साइट में कॉलबैक नहीं है? मेरा क्या मतलब है: डाउनलोड second.js में शामिल हैं: ... फ़ंक्शन सेकंडस्क्रिप्ट (ओ) {// कुछ करें / डब्ल्यू डेटा; } ... डाउनलोड datasource.example.net/first.js?callback=secondscriptFn फिर पहले में शामिल हैं: secondscriptFn ({back: "# fff", front: "# 888", पक्ष: "369"}); वैश्विक स्कोप संस्करणों की तुलना में अधिक नियंत्रणीय और मजबूत, क्योंकि आप फर्स्ट.जेएस स्कोप को नियंत्रित कर सकते हैं ...
रोकी

4
बस एक नोट के रूप में यदि आप jQuery का उपयोग कर रहे हैं और आप ऐसा करने की कोशिश कर रहे हैं। आपको यह सुनिश्चित करने की आवश्यकता है कि आप उस चर को नहीं डालेंगे जिसे आप '$ (डॉक्यूमेंट।। डर्।)' फ़ंक्शन में पहली फ़ाइल से एक्सेस करने का प्रयास कर रहे हैं; अन्यथा यह ठीक से लोड नहीं होगा, कम से कम मेरे अनुभव से।
Collin McGuire

जवाबों:


196

जैसा कि फर्मिन ने कहा, वैश्विक दायरे में एक चर घोषित होने के बाद भरी हुई सभी लिपियों के लिए सुलभ होना चाहिए। आप एक ही प्रभाव प्राप्त करने के लिए window(या वैश्विक दायरे में) की संपत्ति का उपयोग कर सकते हैं this

// first.js
var colorCodes = {

  back  : "#fff",
  front : "#888",
  side  : "#369"

};

... दूसरी फाइल में ...

// second.js
alert (colorCodes.back); // alerts `#fff`

... अपने HTML फ़ाइल में ...

<script type="text/javascript" src="first.js"></script> 
<script type="text/javascript" src="second.js"></script> 

5
एक ब्राउज़र में, window है वैश्विक क्षेत्र - तो window.colorCodes और (वैश्विक) वस्तु colorCodes एक ही वस्तु है।
पिस्कोर ने बिल्डिंग

यह सच है ... मैं इसका उल्लेख करता हूं कि यह उन मामलों के लिए है जहां आपको गैर-वैश्विक दायरे से एक वैश्विक चर सेट करने की आवश्यकता है।
डग नबबिट

2
html के बारे में क्या? HTML में मेरे पास: <script>var variable1 = true;</script> <script src="first.js"></script>first.js उस चर को देखेंगे? मैंने इसे Google Chrome एक्सटेंशन में परीक्षण किया और यह काम नहीं किया
user25

@ user25, मुझे एक ही समस्या है, क्या आपको कोई समाधान मिला?
बुध

2
यदि आप एस्लिंट का उपयोग कर रहे हैं, तो आप /* global colorCodes */रोकने के लिए ऊपर की लाइन पर जोड़ सकते हैं "... परिभाषित नहीं है" त्रुटि संदेश
जोसेफ के।

41

आप का उपयोग कर पहली फ़ाइल से चर निर्यात कर सकते हैं निर्यात

//first.js
const colorCode = {
    black: "#000",
    white: "#fff"
};
export { colorCode };

फिर, आयात का उपयोग करके दूसरी फ़ाइल में चर आयात करें

//second.js
import { colorCode } from './first.js'

निर्यात - एमडीएन


14

मुझे क्या पसंद आया इसका जवाब ऊपर दिया गया है कहा गया, लेकिन हालांकि, इसने मेरे साथ काम नहीं किया

क्योंकि मैं declaringये चर insideJQuery था$( document ).ready()

इसलिए सुनिश्चित करें कि आप <script>टैग के अंदर अपने चरों को कहीं और नहीं घोषित करते हैं


13

यह काम करना चाहिए - फर्स्टफाइल में एक वैश्विक वैरिएबल को परिभाषित करें और इसे सेकंडफाइल से एक्सेस करें:

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

ध्यान दें कि जिस क्रम में आप स्क्रिप्ट फ़ाइलों को लोड करते हैं, वह कुछ ब्राउज़रों के लिए महत्वपूर्ण है (IE6 निश्चित रूप से, शायद दूसरों के लिए)


1
आपको उस चर को ऑब्जेक्ट की तरह संलग्न करना पड़ सकता है: this.colors = colours। यदि किसी वस्तु के बजाय एक एनुम है, तो आप मान को वापस करने के लिए एक फ़ंक्शन बना सकते हैं। this.getTextColor = function () {return colours.text; };
एगटन

1
आप एक लोड किए गए पृष्ठ से एक चर को कैसे अपडेट करेंगे? <script type = "text / javascript"> colours.background = "new col"; </ script> काम नहीं करता है।
v3nt

6

Node.js का उपयोग करके आप मॉड्यूल के माध्यम से चर को निर्यात कर सकते हैं।

//first.js
const colorCode = {
    black: "#000",
    white: "#fff"
};
module.exports = { colorCode };

फिर, आवश्यकता का उपयोग करके दूसरी फ़ाइल में मॉड्यूल / चर आयात करें।

//second.js
const { colorCode } = require('./first.js')

आप उपयोग कर सकते हैं importऔर exportES6 से aproach Webpack / कोलाहल का उपयोग कर, लेकिन Node.js में आप की जरूरत है एक झंडा सक्षम करें, और .mjs एक्सटेंशन का उपयोग करता।


3

मैं amplify.js भर में आया था । यह वास्तव में उपयोग करने के लिए सरल है। मान संग्रहीत करने के लिए, इसे "myValue" कहते हैं, जो आप करते हैं:

amplify.store("myKey", "myValue")

और इसे एक्सेस करने के लिए, आप करते हैं

amplify.store("myKey")

2

यदि आप अपने कलरकोड को एक वैश्विक चर में संग्रहीत करते हैं, तो आपको इसे जावास्क्रिप्ट फ़ाइल से एक्सेस करने में सक्षम होना चाहिए।


2

मैं इसे थोड़ा अलग तरीके से कर सकता हूं। मुझे यकीन नहीं है कि मैं इस वाक्यविन्यास का उपयोग क्यों करता हूं, इसे बहुत पहले किसी किताब से कॉपी किया था। लेकिन मेरी प्रत्येक js फाइलें एक चर को परिभाषित करती हैं। पहली फ़ाइल, बिना किसी कारण के, आर कहा जाता है:

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

और फिर अगर मेरे पास एक बड़ा कोड है जिसे मैं अलग करना चाहता हूं, तो मैंने इसे एक अलग फ़ाइल और एक अलग चर नाम में डाल दिया, लेकिन मैं अभी भी आर चर और फ़ंक्शन का संदर्भ दे सकता हूं। मैंने बिना किसी अच्छे कारण के नए को एक टीडी कहा है:

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

आप देख सकते हैं कि टीडी 'सीफंक्शन' में मैं आर.सोमफंक्शन को कहां कहता हूं। मुझे लगता है कि यह कोई रनटाइम क्षमता नहीं देता है क्योंकि दोनों लिपियों को लोड करने की आवश्यकता होती है, लेकिन इससे मुझे अपना कोड व्यवस्थित रखने में मदद मिलती है।


0

एक सबसे अच्छा तरीका खिड़की का उपयोग करके है। प्रारम्भिक अवस्था

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

अन्य उत्तरों पर इस दृष्टिकोण का क्या फायदा है?
बोरिक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.