আমি কি অন্য ফাইল থেকে ভেরিয়েবল অ্যাক্সেস করতে পারি?


178

কল করা first.jsঅন্য একটি ফাইলের অভ্যন্তরে যে কোনও ফাইলের মধ্যে ভেরিয়েবল ব্যবহার করা সম্ভব second.js?

first.jsনামে পরিচিত একটি ভেরিয়েবল রয়েছে colorcodes


@ রোকি: উদাহরণস্বরূপ, আপনি অন্য ওয়েবসাইট থেকে ডেটা লোড করতে পারেন, যখন এগুলি প্রক্রিয়া করার স্ক্রিপ্টটি আপনার সাইটে রয়েছে:<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>
পিসকভোর

ডেটাসোর্স সাইটে কলব্যাক নেই? আমার অর্থ: ডাউনলোড সেকেন্ড.জেএস এর মধ্যে রয়েছে: ... ফাংশন সেকেন্ডস্ক্রিপ্টএফএন (ও) {// কিছু করুন / ডাব্লু ডেটা করুন; } ... ডাউনলোড datasource.example.net/first.js?callback=secondscriptFn তারপর প্রথম উপস্থিত: secondscriptFn ({ফিরে: "# fff", সামনের: "# 888", পাশাপাশি: "# 369"}); গ্লোবাল স্কোপ সংস্করণগুলির চেয়ে আরও নিয়ন্ত্রণযোগ্য এবং শক্তিশালী, কারণ আপনি প্রথম.জেএস স্কোপ নিয়ন্ত্রণ করতে পারেন ...
রকি

4
আপনি যদি jQuery ব্যবহার করছেন এবং আপনি এটি করার চেষ্টা করছেন ঠিক তেমন একটি নোট as আপনাকে নিশ্চিত করতে হবে যে আপনি 'document (ডকুমেন্ট) .ডিডি ()' ফাংশনে প্রথম ফাইলটি অ্যাক্সেস করার চেষ্টা করছেন এমন ভেরিয়েবলটি আপনি রাখেন নি; অন্যথায় এটি সঠিকভাবে লোড হবে না, অন্তত আমার অভিজ্ঞতা থেকে।
কলিন ম্যাকগুইয়ার

উত্তর:


195

যেমন ফারমিন বলেছেন, বৈশ্বিক স্কোপের একটি পরিবর্তনশীল ঘোষণার পরে লোড হওয়া সমস্ত স্ক্রিপ্টগুলিতে অ্যাক্সেসযোগ্য হওয়া উচিত। একই প্রভাব পেতে windowআপনি একটি সম্পত্তি বা (বৈশ্বিক স্কোপ) ব্যবহার thisকরতে পারেন।

// first.js
var colorCodes = {

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

};

... অন্য একটি ফাইলে ...

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

... আপনার এইচটিএমএল ফাইলে ...

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

5
একটি ব্রাউজারে window কি বিশ্বব্যাপী সুযোগ রয়েছে - তাই উইন্ডো কোডার কোডস এবং (গ্লোবাল) অবজেক্ট কালার কোড একই জিনিস object
পিসকভোর

সত্য ... কারণ আমি এটি উল্লেখ করার কারণটি হ'ল এমন ক্ষেত্রে যেখানে আপনাকে অ-বিশ্বব্যাপী সুযোগ থেকে বৈশ্বিক পরিবর্তনশীল সেট করতে হবে।
ডাগ ন্যাবিত

2
এইচটিএমএল সম্পর্কে কি? এইচটিএমএলে আমার কাছে আছে: <script>var variable1 = true;</script> <script src="first.js"></script>ফার্স্ট.জেএস কি সেই পরিবর্তনশীল দেখতে পাবে? আমি এটি গুগল ক্রোম এক্সটেনশনে পরীক্ষা করেছি এবং এটি কার্যকর হয়নি
ব্যবহারকারী 25

@ ইউজার 25, আমারও একই সমস্যা, আপনি কি সমাধান খুঁজে পেয়েছেন?
বুধ

2
আপনি যদি এসলিন্ট ব্যবহার করে থাকেন তবে /* global colorCodes */"... সংজ্ঞায়িত করা হয়নি" ত্রুটি বার্তাটি রোধ করতে আপনি উপরের লাইনে যুক্ত করতে পারেন
জোসেফ কে।

41

ব্যবহার করে আপনি প্রথম ফাইল থেকে পরিবর্তনশীল রপ্তানি করতে পারেন রপ্তানি

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

তারপরে, আমদানি ব্যবহার করে দ্বিতীয় ফাইলটিতে ভেরিয়েবলটি আমদানি করুন

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

এক্সপোর্ট - MDN


14

উপরের উত্তরটি যা বলেছিল তা আমি পছন্দ করেছি তবে যদিও এটি আমার সাথে কাজ করে নি

কারণ আমি declaringএই ভেরিয়েবলগুলি insideজিকুয়েরি ছিল$( document ).ready()

সুতরাং নিশ্চিত হয়ে নিন যে আপনি <script>ট্যাগের মধ্যে আপনার ভেরিয়েবলগুলি অন্য কোথাও নয় declare


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

মনে রাখবেন যে স্ক্রিপ্ট ফাইলগুলি আপনি লোড করেছেন সেই ক্রমটি কয়েকটি ব্রাউজারের জন্য গুরুত্বপূর্ণ (অবশ্যই আই 6 for সম্ভবত অন্যরা)


1
আপনার সেই পরিবর্তনশীলটিকে অবজেক্টের মতো সংযুক্ত করার প্রয়োজন হতে পারে: এটির রঙগুলি = রঙ। যদি এটি এনামের পরিবর্তে কোনও বস্তু হয় তবে আপনি মানটি ফিরিয়ে দিতে একটি ফাংশন তৈরি করতে পারেন। this.getTextColor = ফাংশন () {রঙিন.টেক্সট; };
আগ্রাসন

1
আপনি কীভাবে বোঝা পৃষ্ঠা থেকে একটি পরিবর্তনশীল আপডেট করবেন? <স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> রং.ব্যাকগ্রাউন্ড = "নতুন কোল"; </script> কাজ করছে বলে মনে হচ্ছে না।
v3nt

6

নোড.জেএস ব্যবহার করে আপনি মডিউলটির মাধ্যমে পরিবর্তনশীল রফতানি করতে পারেন।

//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 জুড়ে এসেছি । এটি ব্যবহার করা সত্যই সহজ। একটি মান সঞ্চয় করতে, আসুন একে "মাইভ্যালু" বলুন, আপনি যা করেন:

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

এবং এটি অ্যাক্সেস করতে, আপনি কি

amplify.store("myKey")

2

আপনি যদি কোনও রঙিন কোডগুলি বিশ্বব্যাপী ভেরিয়েবলে সঞ্চয় করেন তবে জাভাস্ক্রিপ্ট ফাইল থেকে এটি অ্যাক্সেস করতে পারবেন।


2

আমি এটি একটু ভিন্নভাবে করছিলাম। আমি নিশ্চিত নই যে কেন আমি এই সিনট্যাক্সটি ব্যবহার করেছি, এটি বেশ কিছুদিন আগে কোনও বই থেকে অনুলিপি করা হয়েছিল। তবে আমার প্রতিটি জেএস ফাইল একটি চলক সংজ্ঞায়িত করে। প্রথম ফাইলটি বিনা কারণেই একে আর বলা হয়:

    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>

অন্যান্য উত্তরগুলির চেয়ে এই পদ্ধতির সুবিধা কী?
বোরিক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.