जावास्क्रिप्ट में ES मॉड्यूल का डायनामिक इम्पोर्ट

ES मॉड्यूल को डायनामिक रूप से इम्पोर्ट किया जा सकता है। यह क्षमता कभी-कभी उपयोगी होती है। आइए देखें कि यह कैसे किया जाता है। मान लीजिए कि हमारे पास निम्नलिखित मॉड्यूल है:

src/test.jsexport function func1() {
  return '1'
}
export function func2() {
  return '2'
}
export default function() {
  return 'text';
};

मान लीजिए कि हम इस मॉड्यूल को तुरंत नहीं, बल्कि किसी घटना के आधार पर इम्पोर्ट करना चाहते हैं, उदाहरण के लिए, एक बटन पर क्लिक करने पर:

src/index.jsbtn.addEventListener('click', function() {
  
});

import कमांड का उपयोग करके मॉड्यूल इम्पोर्ट करें:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js');
});

import कमांड अपने परिणाम के रूप में एक प्रॉमिस लौटाती है:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    
  });
});

कॉलबैक वेरिएबल में निर्यात किए गए फ़ंक्शन वाली एक ऑब्जेक्ट प्राप्त होगी:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    let res1 = mod.func1();
    let res2 = mod.func2();
    
    console.log(res1, res2);
  });
});

डिफ़ॉल्ट रूप से निर्यात किया गया, default की में होगा:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    let dfn = mod.default;
    console.log(dfn);
  });
});

इम्पोर्ट करते समय डीस्ट्रक्चरिंग की जा सकती है:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(({func1, func2}) => {
    let res1 = func1();
    let res2 = func2();
    
    console.log(res1, res2);
  });
});