जावास्क्रिप्ट के पुराने संस्करणों में कोई आयात, शामिल या आवश्यकता नहीं थी, इसलिए इस समस्या के कई अलग-अलग दृष्टिकोण विकसित किए गए हैं।
लेकिन 2015 (ES6) के बाद से, Node.js में मॉड्यूल आयात करने के लिए जावास्क्रिप्ट में ES6 मॉड्यूल मानक है, जो कि अधिकांश आधुनिक ब्राउज़रों द्वारा भी समर्थित है ।
पुराने ब्राउज़र, जैसे निर्माण उपकरणों के साथ संगतता के लिए Webpack और रोलअप और / या transpilation उपकरण की तरह कोलाहल इस्तेमाल किया जा सकता।
ES6 मॉड्यूल
ECMAScript (ES6) मॉड्यूल को v8.5 के बाद से ध्वज के साथ , और कम से कम Node.js v13.8.0 के बाद से Node.js में समर्थित किया गया है --experimental-modules। "ESM" (बनाम Node.js के पिछले कॉमनजेस-स्टाइल मॉड्यूल सिस्टम ["CJS"] को सक्षम करने के लिए या तो आप फ़ाइलों का उपयोग करते "type": "module"हैं package.jsonया एक्सटेंशन देते हैं .mjs। (इसी प्रकार, Node.js के पिछले CJS मॉड्यूल के साथ लिखे गए मॉड्यूल को नाम दिया जा सकता है .cjsयदि आपका डिफ़ॉल्ट ESM है।)
का उपयोग कर package.json:
{
"type": "module"
}
तब module.js:
export function hello() {
return "Hello";
}
तब main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
उपयोग करना .mjs, आपके पास होगा module.mjs:
export function hello() {
return "Hello";
}
तब main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
ब्राउज़रों में ECMAScript मॉड्यूल
सफारी 10.1, क्रोम 61, फ़ायरफ़ॉक्स 60 और एज 16 के बाद से ब्राउज़र को सीधे ECMAScript मॉड्यूल लोड करने के लिए समर्थन (वेबपैक जैसे कोई टूल की आवश्यकता नहीं) पड़ा है । कैनेयूज़ पर वर्तमान समर्थन की जाँच करें । Node.js के .mjsएक्सटेंशन का उपयोग करने की कोई आवश्यकता नहीं है ; ब्राउज़र मॉड्यूल / स्क्रिप्ट पर फ़ाइल एक्सटेंशन को पूरी तरह से अनदेखा करते हैं।
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
Https://jakearchibald.com/2017/es-modules-in-browsers/ पर अधिक पढ़ें
ब्राउज़रों में गतिशील आयात
डायनामिक आयात स्क्रिप्ट को आवश्यकतानुसार अन्य स्क्रिप्ट लोड करने देता है:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Https://developers.google.com/web/updates/2017/11/dynamic-import पर अधिक पढ़ें
Node.js की आवश्यकता है
पुराने CJS मॉड्यूल शैली, अभी भी व्यापक रूप से Node.js में उपयोग की जाती है, module.exports/require प्रणाली है।
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
जावास्क्रिप्ट के लिए ब्राउज़र में बाहरी जावास्क्रिप्ट सामग्री शामिल करने के अन्य तरीके हैं जिन्हें प्रीप्रोसेसिंग की आवश्यकता नहीं है।
AJAX लोड हो रहा है
आप AJAX कॉल के साथ एक अतिरिक्त स्क्रिप्ट लोड कर सकते हैं और फिर evalउसे चलाने के लिए उपयोग कर सकते हैं। यह सबसे सरल तरीका है, लेकिन यह जावास्क्रिप्ट सैंडबॉक्स सुरक्षा मॉडल के कारण आपके डोमेन तक सीमित है। उपयोग evalकरने से बग, हैक्स और सुरक्षा के मुद्दों के द्वार भी खुलते हैं।
लास्ट लोड हो रहा है
डायनामिक आयातों की तरह आप फ़िज़ा इंजेक्शनfetch का उपयोग करके स्क्रिप्ट निर्भरता के निष्पादन के आदेश को नियंत्रित करने के वादे का उपयोग करके कॉल के साथ एक या कई स्क्रिप्ट लोड कर सकते हैं :
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
jQuery लोड हो रहा है
JQuery पुस्तकालय लोड हो रहा है कार्यक्षमता प्रदान करता है एक लाइन में :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
डायनेमिक स्क्रिप्ट लोड हो रही है
आप HTML में स्क्रिप्ट URL के साथ एक स्क्रिप्ट टैग जोड़ सकते हैं। JQuery के ओवरहेड से बचने के लिए, यह एक आदर्श समाधान है।
स्क्रिप्ट एक अलग सर्वर पर भी निवास कर सकती है। इसके अलावा, ब्राउज़र कोड का मूल्यांकन करता है। <script>टैग या तो वेब पेज में इंजेक्ट किया जा सकता <head>है, या बस बंद करने से पहले डाला </body>टैग।
यहाँ एक उदाहरण है कि यह कैसे काम कर सकता है:
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
यह फ़ंक्शन <script>पृष्ठ के मुख्य भाग के अंत में एक नया टैग जोड़ेगा , जहां srcविशेषता URL पर सेट की गई है जो फ़ंक्शन को पहले पैरामीटर के रूप में दिया गया है।
इन दोनों समाधानों पर चर्चा की जाती है और जावास्क्रिप्ट पागलपन: गतिशील स्क्रिप्ट लोड हो रहा है ।
पता लगाया जा रहा है कि स्क्रिप्ट कब निष्पादित की गई है
अब, एक बड़ा मुद्दा है जिसके बारे में आपको पता होना चाहिए। ऐसा करने से तात्पर्य है कि आप दूर से कोड लोड करते हैं । आधुनिक वेब ब्राउज़र फ़ाइल को लोड करेंगे और आपकी वर्तमान स्क्रिप्ट को निष्पादित करते रहेंगे क्योंकि प्रदर्शन में सुधार के लिए वे सब कुछ अतुल्यकालिक रूप से लोड करते हैं। (यह jQuery विधि और मैनुअल डायनामिक स्क्रिप्ट लोडिंग विधि दोनों पर लागू होता है।)
इसका मतलब है कि यदि आप इन ट्रिक्स का सीधे उपयोग करते हैं, तो आप इसे लोड करने के लिए कहने के बाद अपने नए लोड किए गए कोड का उपयोग नहीं कर पाएंगे , क्योंकि यह अभी भी लोड हो रहा है।
उदाहरण के लिए: my_lovely_script.jsइसमें शामिल हैं MySuperObject:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
फिर आप पेज हिटिंग को पुनः लोड करें F5। और यह काम करता है! भ्रमित ...
तो इसके बारे में क्या करना है?
ठीक है, आप उस लेखक के हैक का उपयोग कर सकते हैं जो मैंने आपको दिए लिंक में दिया है। सारांश में, जल्दी में लोगों के लिए, वह स्क्रिप्ट लोड होने पर कॉलबैक फ़ंक्शन को चलाने के लिए एक घटना का उपयोग करता है। तो आप कॉलबैक फ़ंक्शन में रिमोट लाइब्रेरी का उपयोग करके सभी कोड डाल सकते हैं। उदाहरण के लिए:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
फिर आप उस कोड को लिखते हैं जिसे आप उपयोग करना चाहते हैं स्क्रिप्ट के लिए एक लंबो फ़ंक्शन में लोड किया गया है :
var myPrettyCode = function() {
// Here, do whatever you want
};
तब आप वह सब चलाते हैं:
loadScript("my_lovely_script.js", myPrettyCode);
ध्यान दें कि स्क्रिप्ट लोड होने के बाद या ब्राउजर के आधार पर और क्या आपने लाइन को शामिल किया है, उसके बाद स्क्रिप्ट निष्पादित हो सकती है script.async = false;। सामान्य रूप से जावास्क्रिप्ट लोड करने पर एक शानदार लेख है जो इस पर चर्चा करता है।
स्रोत कोड मर्ज / प्रीप्रोसेसिंग
जैसा कि इस उत्तर के शीर्ष पर उल्लेख किया गया है, कई डेवलपर्स अपनी परियोजनाओं में पार्सल, वेबपैक या बैबेल जैसे बिल्ड / ट्रांसप्लिकेशन टूल (एस) का उपयोग करते हैं, जिससे उन्हें आगामी जावास्क्रिप्ट सिंटैक्स का उपयोग करने की अनुमति मिलती है, पुराने ब्राउज़रों के लिए पिछड़े संगतता प्रदान करते हैं, फ़ाइलों को जोड़ते हैं, छोटा करते हैं। कोड विभाजन करना आदि।