क्या हम एक जावास्क्रिप्ट में लिखे फ़ंक्शन को दूसरी जेएस फाइल में कह सकते हैं?

193

क्या हम एक JS फाइल को दूसरे JS फाइल में लिखे फंक्शन को कॉल कर सकते हैं? क्या कोई मेरी मदद कर सकता है कि दूसरे जेएस फ़ाइल से फ़ंक्शन कैसे कॉल करें?

javascript include

— हेमंत कुमार
स्रोत

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

— एडगर हर्नांडेज़
स्रोत

Index.html फ़ाइल में JS फ़ाइल को शामिल करने से आपके उदाहरण के बीच क्या अंतर है दूसरे दृष्टिकोण के लिए जहाँ हम JS आयात विधि का उपयोग दूसरी JS फ़ाइल से करते हैं जिसमें JS स्क्रिप्ट विधि निर्यात से निर्यात विधि है।

— फिल

68

ऊपर दिए गए उत्तर में एक गलत धारणा है कि फाइलों के समावेश का क्रम मायने रखता है। जैसा कि अलर्टनंबर फ़ंक्शन को तब तक नहीं कहा जाता है जब तक कि अलर्टऑन फ़ंक्शन को कॉल नहीं किया जाता है। जब तक दोनों फाइलों को समय-समय पर शामिल किया जाता है, तब तक कहा जाता है कि फाइलों का क्रम मायने नहीं रखता:

[HTML]

<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

या यह निम्नलिखित की तरह आदेश दिया जा सकता है:

[HTML]

<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

लेकिन अगर आप ऐसा करते हैं:

[HTML]

<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

यह नाइटपैकिंग लग सकता है लेकिन समावेशन स्क्रिप्टिंग के समान नहीं है। Script1: function myfunction() {और script2 पर विचार करें : alert();}यह काम नहीं करेगा। यह मुझे परेशान करता है क्योंकि मैं एक js फ़ाइल को संशोधित करने की कोशिश कर रहा था जो बहुत लंबी है। देखें stackoverflow.com/questions/20311604/…

— बोयांग

क्या यह फ़ंक्शन thisसंदर्भ साझा करेगा , यदि फ़ंक्शन एक वर्ग में है?

— अक्स

thisउस बिंदु पर बाध्य है जिसे फ़ंक्शन कहा जाता है (जब तक bindकि पहले से नहीं कहा जाता है)। दो अलग-अलग फ़ाइलों में दो फ़ंक्शन thisस्वचालित रूप से संदर्भ साझा नहीं करेंगे , उपरोक्त उदाहरण में न तो कोई thisसंदर्भ है, अर्थात windowगैर-सख्त या undefinedसख्त मोड में। आप thisफ़ंक्शन को ऑब्जेक्ट के सदस्य (यानी कंस्ट्रक्टर के भीतर this.method = myOtherFunc) के रूप में या बाइंड का उपयोग करके किसी अन्य स्क्रिप्ट में समान मान साझा कर सकते हैं। यदि आपको अधिक गहराई से उत्तर की आवश्यकता है, तो कृपया अधिक विवरण के साथ एसओ प्रश्न पोस्ट करें। चीयर्स, स्टुअर्ट

— स्टुअर्ट वेकफील्ड

13

जब तक दोनों को वेब पेज द्वारा संदर्भित किया जाता है, हां।

आप बस फ़ंक्शन को कॉल करते हैं जैसे कि वे उसी जेएस फ़ाइल में हैं।

— Jball
स्रोत

6

यदि सभी फाइलें शामिल हैं, तो आप एक फ़ाइल से दूसरी फ़ाइल (जैसे फ़ंक्शन, चर, ऑब्जेक्ट आदि) के गुणों को कॉल कर सकते हैं ।

Js फ़ंक्शंस और वैरिएबल्स जो आप एक .js फ़ाइल में लिखते हैं - कहते हैं कि a.js अन्य js फ़ाइलों के लिए उपलब्ध होंगे - b.js को तब तक कहें जब तक a.js और b.js दोनों को निम्न शामिल करते हुए फ़ाइल में शामिल किया जाता है तंत्र (और उसी क्रम में यदि b.js में फ़ंक्शन एक a.js में कॉल करता है)।

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

— प्रमेंद्र गुप्ता
स्रोत

4

ES6:<script> .html का उपयोग करके कई js फ़ाइलों को शामिल करने के बजाय आप केवल एक मुख्य फ़ाइल को शामिल कर सकते हैं जैसे 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");
}

— anishMarokey
स्रोत

0

आप जिस फ़ाइल में काम कर रहे हैं, उससे दूसरी js फ़ाइल में बनाए गए फ़ंक्शन को कॉल कर सकते हैं। तो इसके लिए सबसे पहले आपको बाहरी js फ़ाइल को html दस्तावेज़ में जोड़ना होगा जैसे-

<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 असाइनमेंट क्यों व्यर्थ है?

— शीतल

असाइनमेंट नहीं, रैपिंग।

— बरगी

ठीक है तो इसका मतलब है कि जब दस्तावेज़ तैयार नहीं है, तभी $ .fn का उपयोग फ़ंक्शन बनाने के लिए किया जाना चाहिए

— शीतल

पर क्यों? घोषणा समारोह को DOM के लिए प्रतीक्षा करने की आवश्यकता नहीं है। भले ही कॉल हो (लेकिन अक्सर यह पर्याप्त नहीं है)।

— बरगी

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

खैर, मैं एक और मिठाई समाधान के पार आया।

window['functioName'](params);

— दिग्विजय
स्रोत

0

जो लोग Node.js (सर्वर-साइड पर स्क्रिप्ट चला रहे हैं) में ऐसा करना चाहते हैं, उनके लिए एक और विकल्प उपयोग करना है 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");
};

— ronatory
स्रोत