আমরা একটি জাভাস্ক্রিপ্ট লিখিত ফাংশন অন্য জেএস ফাইলে কল করতে পারি?


193

আমরা অন্য জেএস ফাইলে একটি জেএস ফাইলে লেখা ফাংশনটি কল করতে পারি? অন্য জেএস ফাইল থেকে ফাংশনটি কল করতে কীভাবে কেউ আমাকে সহায়তা করতে পারেন?

উত্তর:


213

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

অর্থাত

File1.js

function alertNumber(number) {
    alert(number);
}

File2.js

function alertOne() {
     alertNumber("one");
}

এইচটিএমএল

<head>
....
    <script src="File1.js" type="text/javascript"></script> 
    <script src="File2.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

অন্য উপায় কাজ করবে না। হিসাবে সঠিকভাবে স্টুয়ার্ট ওয়েকফিল্ড দ্বারা নির্দেশিত । অন্য উপায়ও কাজ করবে।

এইচটিএমএল

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

যা কাজ করবে না তা হ'ল:

এইচটিএমএল

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script type="text/javascript">
       alertOne();
    </script>
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
</body>

যদিও alertOneএটি কল করার সময় সংজ্ঞায়িত করা হয়েছে, অভ্যন্তরীণভাবে এটি এমন একটি ফাংশন ব্যবহার করে যা এখনও সংজ্ঞায়িত হয় না ( alertNumber)।


রেকর্ড পদ্ধতিতে জেএস স্ক্রিপ্ট পদ্ধতি রফতানি করে এমন অন্য জেএস ফাইল থেকে আমদানি করার জন্য আমরা জেএস আমদানি পদ্ধতিটি ব্যবহার করি এমন অন্য পদ্ধতির সাথে সূচিপত্রের HTML ফাইলটিতে জেএস ফাইল অন্তর্ভুক্ত করে আপনার উদাহরণের মধ্যে কী আলাদা।
ফিল

68

উপরের উত্তরের একটি ভুল ধারণা রয়েছে যে ফাইলগুলি অন্তর্ভুক্তির ক্রম বিবেচনা করে। যেমন সতর্কতা নম্বর ফাংশন না বলা হয় ততক্ষণ সতর্কতা নম্বর ফাংশন বলা হয় না। যতক্ষণ না উভয় ফাইল সময় সর্তকতার সাথে অন্তর্ভুক্ত থাকে ফাইলগুলির ক্রম হিসাবে এটি বলা হয়:

[এইচটিএমএল]

<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
    alertOne( );
</script>

[জাতীয়]

// File1.js
function alertNumber( n ) {
    alert( n );
};
// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// Inline
alertOne( ); // No errors

বা এটি নিম্নলিখিত মত আদেশ করা যেতে পারে:

[এইচটিএমএল]

<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript">
    alertOne( );
</script>

[জাতীয়]

// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// File1.js
function alertNumber( n ) {
    alert( n );
};
// Inline
alertOne( ); // No errors

তবে আপনি যদি এটি করেন:

[এইচটিএমএল]

<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
    alertOne( );
</script>
<script type="text/javascript" src="file1.js"></script>

[জাতীয়]

// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// Inline
alertOne( ); // Error: alertNumber is not defined
// File1.js
function alertNumber( n ) {
    alert( n );
};

এটি কেবল কার্যকর হওয়ার সময় ভেরিয়েবল এবং ফাংশন সম্পর্কিত বিষয়ে গুরুত্বপূর্ণ। যখন কোনও ফাংশন সংজ্ঞায়িত করা হয় তখন এটি কার্যকরভাবে কার্যকর করা হয় না বা ঘোষিত কোনও ভেরিয়েবলের সমাধান করে না যতক্ষণ না সেই ফাংশনটি পরবর্তী সময়ে বলা হয়।

মুলতুবি স্ক্রিপ্ট ব্যতীত ভিন্ন স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করা একই স্ক্রিপ্টের মধ্যে সেই ক্রমে থাকা স্ক্রিপ্ট থেকে আলাদা নয়:

<script type="text/javascript" src="myscript.js" defer="defer"></script>

তাহলে আপনার সাবধান হওয়া দরকার।


1
একইভাবে খুব সামান্য সহ
স্টুয়ার্ট ওয়েকফিল্ড

1
এটি নিটপিকিং শোনাতে পারে তবে অন্তর্ভুক্তি হ'ল স্ক্রিপ্টগুলির সাথে মিল নয়। স্ক্রিপ্ট 1: function myfunction() {এবং স্ক্রিপ্ট 2 বিবেচনা করুন : alert();}এটি কাজ করবে না। এটি আমাকে ঝামেলা করে কারণ আমি খুব দীর্ঘ একটি জেএস ফাইলটি মডিউলাইজ করার চেষ্টা করছিলাম। Stackoverflow.com/questions/20311604/…
বায়াং

এই ফাংশনটি thisকোনও শ্রেনীতে থাকলে ফাংশনটি ভাগ করে দেবে?
অক্স

thisবিন্দুতে আবদ্ধ হয় ফাংশনটি বলা হয় (যতক্ষণ না bindআগে বলা হয়)। দুটি পৃথক ফাইলে দুটি ফাংশন thisস্বয়ংক্রিয়ভাবে প্রসঙ্গটি ভাগ করে নেবে না, উপরের উদাহরণে কোনও thisপ্রসঙ্গ নেই, অর্থাত্ windowঅ-কঠোর বা undefinedকঠোর মোডে। আপনি অন্য স্ক্রিপ্টে ফাংশনটিকে একই thisমানটি বস্তুর সদস্য হিসাবে (যেমন কনস্ট্রাক্টরের মধ্যে this.method = myOtherFunc) অর্পণ করে বা বাইন্ড ব্যবহার করে ভাগ করতে পারেন। আপনার যদি আরও গভীরতার উত্তরের প্রয়োজন হয় তবে দয়া করে আরও বিশদ সহ একটি এসও প্রশ্ন পোস্ট করুন। চিয়ার্স, স্টুয়ার্ট
স্টুয়ার্ট ওয়েকফিল্ড

13

যতক্ষণ না উভয়ই ওয়েব পৃষ্ঠা দ্বারা রেফারেন্স করা হয়, হ্যাঁ।

আপনি কেবল ফাংশনগুলিকে কল করুন যেন তারা একই জেএস ফাইলে রয়েছে।


6

যদি সমস্ত ফাইল অন্তর্ভুক্ত থাকে তবে আপনি এক ফাইল থেকে অন্য একটি ফাইলের কাছে বৈশিষ্ট্য কল করতে পারেন (যেমন ফাংশন, ভেরিয়েবল, অবজেক্ট ইত্যাদি)

আপনি একটি .js ফাইলে যে js ফাংশন এবং ভেরিয়েবলগুলি লিখেন - বলুন a.js অন্যান্য জেএস ফাইলের জন্য উপলব্ধ থাকবে - যতক্ষণ না a.js এবং b.js উভয় ফাইলে অন্তর্ভুক্ত থাকে নীচের ব্যবহারের মাধ্যমে b.js বলুন মেকানিজম (এবং একই ক্রমে যদি বি.জেএসসে ফাংশনটিকে a.js তে কল করে)।

<script language="javascript" src="a.js"> and 
<script language="javascript" src="b.js">

4

ES6: html ব্যবহার করে অনেক জেএস ফাইল যুক্ত করার পরিবর্তে <script>আপনি কেবলমাত্র একটি প্রধান ফাইল অন্তর্ভুক্ত করতে পারেন যেমন script.jsঅ্যাট্রিবিউট type="module"( সমর্থন ) ব্যবহার করে এবং এর ভিতরে script.jsআপনি অন্যান্য ফাইল অন্তর্ভুক্ত করতে পারেন:

<script type="module" src="script.js"></script>

এবং script.jsফাইলের মধ্যে অন্য একটি ফাইল অন্তর্ভুক্ত:

import { hello } from './module.js';
...
// alert(hello());

'মডিউল.জেএস'-এ আপনাকে আমদানি করবে এমন ফাংশন / শ্রেণি রফতানি করতে হবে

export function hello() {
    return "Hello World";
}

এখানে কাজ উদাহরণ


3

হ্যা, তুমি পারো . আপনি উভয় পড়ুন প্রয়োজন JS fileথেকে .aspxপৃষ্ঠা

<script language="javascript" type="text/javascript" src="JScript1.js">
 </script>

    <script language="javascript" type="text/javascript" src="JScript2.js">
    </script>

JScript1.js

function ani1() {
    alert("1");
    ani2();
}
JScript2.js
function ani2() {
    alert("2");
}

0

আপনি যে ফাইলটিতে কাজ করছেন সেখান থেকে আপনি অন্য জেএস ফাইলটিতে তৈরি ফাংশনটি কল করতে পারেন So সুতরাং এর জন্য প্রথমে আপনাকে এইচটিএমএল নথিতে বাহ্যিক জেএস ফাইলটি যুক্ত করতে হবে-

<html>
<head>
    <script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........

বাহ্যিক জাভাস্ক্রিপ্ট ফাইলে সংজ্ঞায়িত ফাংশন -

$.fn.yourFunctionName = function(){
    alert('function called succesfully for - ' + $(this).html() );
}

আপনার বর্তমান ফাইলে এই ফাংশনটি কল করতে কেবল ফাংশনটিকে কল করুন -

......
<script type="text/javascript">
    $(function(){
        $('#element').yourFunctionName();
    });
</script>

আপনি যদি ফাংশনটিতে প্যারামিটারগুলি পাস করতে চান তবে ফাংশনটি হিসাবে সংজ্ঞায়িত করুন-

$.fn.functionWithParameters = function(parameter1, parameter2){
        alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}

এবং আপনার বর্তমান ফাইলে এই ফাংশনটিকে কল করুন -

$('#element').functionWithParameters('some parameter', 'another parameter');

1
দয়া করে সব জায়গায় jQuery অনুমান করবেন না। এছাড়াও, $.fnএকটি নথির প্রস্তুত ক্লজে অ্যাসাইনমেন্টটি মোড়ানো অর্থহীন
বার্গি

ঠিক আছে আমি পরের বার এটি মনে রাখব :), তবে আপনি ব্যাখ্যা করতে পারবেন কেন $ .fn নিয়োগটি অর্থহীন?
শীটাল

বরাদ্দ নয়, মোড়ক।
বেরগি

ঠিক আছে তাই এর অর্থ যখন ডকুমেন্টটি প্রস্তুত না হয় কেবল তখনই function .fn ফাংশন তৈরির জন্য ব্যবহার করা উচিত
শীটাল

কিন্তু কেন? ঘোষণাপত্রটি ডিওমের জন্য অপেক্ষা করার দরকার নেই। এমনকি কলটি (তবে প্রায়শই যথেষ্ট হয় না) doesn't
বার্গি

0

সংযুক্ত কোডপেন স্নিপেটের সাথে এখানে আরও বর্ণনামূলক উদাহরণ রয়েছে:

1.js

function fn1() {
  document.getElementById("result").innerHTML += "fn1 gets called";
}

2.js

function clickedTheButton() {
  fn1();
} 

index.html

<html>
  <head>
  </head>
  <body>
    <button onclick="clickedTheButton()">Click me</button>
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript" src="2.js"></script>
  </body>
 </html>

আউটপুট

আউটপুট।  বাটন + ফলাফল

এই কোডপেন স্নিপেট চেষ্টা করুন: লিঙ্ক



0

যারা নোড.জেজে এটি করতে চান (সার্ভার-সাইডে স্ক্রিপ্টগুলি চালাচ্ছেন) তাদের জন্য আরও একটি বিকল্প ব্যবহার করা উচিত requireএবংmodule.exports । মডিউলটি কীভাবে তৈরি করতে হবে এবং অন্য কোথাও ব্যবহারের জন্য এটি রফতানি করতে হবে তার একটি সংক্ষিপ্ত উদাহরণ এখানে:

file1.js

const print = (string) => {
    console.log(string);
};

exports.print = print;

file2.js

const file1 = require('./file1');

function printOne() {
    file1.print("one");
};
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.