একাধিক ফাইল জুড়ে জাভাস্ক্রিপ্টে গ্লোবাল ভেরিয়েবল

130

আমার জাভাস্ক্রিপ্ট কোডের একটি গোছা হেল্পার.জেএস নামে একটি বাহ্যিক ফাইলে রয়েছে। এই জাভাস্ক্রিপ্ট কোডটি কল করার জন্য এইচটিএমএলটির ভিতরে আমি নিজেকে হেল্পার.জেস থেকে কোনও নির্দিষ্ট ফাংশন কল করা হয়েছে কিনা তা জানার প্রয়োজন বোধ করি।

আমি সংজ্ঞায়িত করে একটি বৈশ্বিক পরিবর্তনশীল তৈরি করার চেষ্টা করেছি:

var myFunctionTag = true;

আমার এইচটিএমএল কোড এবং সহায়ক.জেএস উভয় ক্ষেত্রে বিশ্বব্যাপী সুযোগ।

আমার এইচটিএমএল কোডটি দেখতে কেমন লাগে তা এখানে:

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

আমি যা চেষ্টা করছি তা কি সম্ভবপর!

— Goro
সূত্র

1

ঠিক আছে, আপনি সবেমাত্র দ্বিতীয় ট্যাগ ব্লকে এটি মিথ্যাতে সেট করেছেন <script>। আমি মাত্র 2 টি ভিন্ন পদ্ধতির চেষ্টা করেছি (সহায়কগুলি.জেএস ফাইলের আগে ভ্যারটি ঘোষণা না করে) এবং তারা উভয়েই কাজ করেছে। আমি একটি উত্তর পোস্ট করব, তবে মনে হচ্ছে আপনার প্রশ্নে কিছু মূল টুকরো থাকা উচিত।

— স্টিফেন পি

উইন্ডো.অনলোড = ফাংশন () {// আপনার কোড শুরু করুন} সর্বোত্তম সমাধান হতে পারে - এবং এটি স্লোপোক বক্তৃতা :)

— শোডন

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

আমার পক্ষে কাজ করে না কারণ যখন অন্য এইচটিএমএলতে লোড হওয়া অন্য জেএস থেকে অ্যাক্সেস করার চেষ্টা করা হচ্ছে, তখন এটি বলছে যে ভেরিয়েবলটি ঘোষিত হয়নি

— ACV

16

ভেরিয়েবলটি .jsফাইলটিতে ঘোষণা করা যায় এবং এইচটিএমএল ফাইলটিতে কেবল উল্লেখ করা যেতে পারে । আমার সংস্করণ 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

ঠিক আছে, বন্ধুরা, আমার পরীক্ষাটিও এখানে's আমারও একই সমস্যা ছিল, তাই আমি 3 টি পরিস্থিতি পরীক্ষা করার সিদ্ধান্ত নিয়েছি:

একটি এইচটিএমএল ফাইল, একটি বাহ্যিক জেএস ফাইল ... এটি কি আদৌ কাজ করে - ফাংশনগুলি কোনও বৈশ্বিক ভারের মাধ্যমে যোগাযোগ করতে পারে?
দুটি এইচটিএমএল ফাইল, একটি বহিরাগত জেএস ফাইল, একটি ব্রাউজার, দুটি ট্যাব: তারা কি বিশ্বব্যাপী বিভিন্ন মাধ্যমে হস্তক্ষেপ করবে?
একটি ব্রাউজার 2 দ্বারা খোলা একটি এইচটিএমএল ফাইল, এটি কি কাজ করবে এবং তারা হস্তক্ষেপ করবে?

সমস্ত ফলাফল আশানুরূপ ছিল।

এটা কাজ করে। ফাংশন এফ 1 () এবং এফ 2 () গ্লোবাল ভারের মাধ্যমে যোগাযোগ করে (ভেরি বহিরাগত জেএস ফাইলে থাকে, এইচটিএমএল ফাইলে নয়)।
তারা হস্তক্ষেপ না। প্রতিটি ব্রাউজার ট্যাব, প্রতিটি HTML পৃষ্ঠার জন্য স্পষ্টতই জেএস ফাইলের স্বতন্ত্র অনুলিপি তৈরি করা হয়েছে।
সমস্ত প্রত্যাশিতভাবে স্বাধীনভাবে কাজ করে।

টিউটোরিয়ালগুলি ব্রাউজ করার পরিবর্তে, এটি চেষ্টা করে দেখতে সহজ পেয়েছি, তাই করেছি। আমার উপসংহার: আপনি যখনই আপনার এইচটিএমএল পৃষ্ঠায় একটি বাহ্যিক জেএস ফাইল অন্তর্ভুক্ত করবেন তখন পৃষ্ঠাটি রেন্ডার হওয়ার আগে বাহ্যিক জেএসের সামগ্রীগুলি আপনার HTML পৃষ্ঠায় "অনুলিপি / আটকানো" হয়ে যায় " বা আপনার পিএইচপি পৃষ্ঠাতে যদি আপনি চান। আমি এখানে ভুল থাকলে দয়া করে আমাকে সংশোধন করুন। ধন্যবাদ।

আমার উদাহরণ ফাইলগুলি অনুসরণ করে:

বাহ্যিক জেএস:

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

এইচটিএমএল 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>

এইচটিএমএল 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

এইচটিএমএল 1 এবং এইচটিএমএল 2 অভিন্ন (পৃষ্ঠার শিরোনাম ব্যতীত) ... এখনও, আমি কেবল দুটি শারীরিকভাবে পৃথক করতে দুটি ফাইল তৈরি করেছি।

— মার্টিন

1

আমি মনে করি আপনার বৈশ্বিক ভেরিয়েবলের পরিবর্তে "স্থানীয় সঞ্চয়স্থান" ব্যবহার করা উচিত।

যদি আপনি উদ্বিগ্ন হন যে "স্থানীয় স্টোরেজ" খুব পুরানো ব্রাউজারগুলিতে সমর্থিত না হতে পারে তবে একটি বিদ্যমান প্লাগ-ইন ব্যবহার করে বিবেচনা করুন যা "স্থানীয় স্টোরেজ" এর উপলব্ধতা পরীক্ষা করে এবং যদি উপলভ্য না হয় তবে অন্যান্য পদ্ধতিগুলি ব্যবহার করে।

আমি http://www.jstorage.info/ ব্যবহার করেছি এবং আমি এ পর্যন্ত খুশি।

— paulo62
সূত্র

1

আপনি একটি জাসন অবজেক্ট এর মতো করতে পারেন:

globalVariable={example_attribute:"SomeValue"};

fileA.js এ

এবং fileB.js এর মতো এটিকে অ্যাক্সেস করুন: globalVariable.example_attribute

— partizanos
সূত্র

1

হাই একটি জেএস ফাইল থেকে অন্য জেএস ফাইলগুলিতে মানগুলি স্থানান্তর করতে আমরা স্থানীয় সঞ্চয় স্থানটি ব্যবহার করতে পারি

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

Two.js ফাইল

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

আপনার জেএস ফাইলগুলিকে এইচটিএমএলে লিঙ্ক করতে ভুলবেন না :)

— MrJ
সূত্র