జావాస్క్రిప్ట్‌లోని మాడ్యూల్ సిస్టమ్‌లకు ఒక పరిచయం

మాడ్యూల్స్ యొక్క భావన మాడ్యులర్ ప్రోగ్రామింగ్ నమూనా నుండి వచ్చింది. ప్రోగ్రామ్ ఫంక్షన్‌లను విడిగా లేదా అప్లికేషన్‌లో జతచేయగల స్టాండ్-అలోన్ ఫైల్‌లుగా విభజించడం ద్వారా సాఫ్ట్‌వేర్ 'మాడ్యూల్స్' అని పిలువబడే ప్రత్యేక, మార్చుకోగలిగిన భాగాలతో కూడి ఉండాలని ఈ ఉదాహరణ ప్రతిపాదించింది.

రోజు యొక్క వీడియోను తయారు చేయండి

మాడ్యూల్ అనేది స్టాండ్-ఒంటరి ఫైల్, ఇది నిర్దిష్ట కార్యాచరణను అమలు చేయడానికి మరియు పునర్వినియోగం మరియు సంస్థను ప్రోత్సహించడానికి కోడ్‌ను సంగ్రహిస్తుంది.

---

---

ఇక్కడ మీరు మాడ్యూల్ నమూనా, చాలా Node.js అప్లికేషన్‌లలో ఉపయోగించే CommonJS మాడ్యూల్ సిస్టమ్ మరియు ES6 మాడ్యూల్ సిస్టమ్‌తో సహా JavaScript అప్లికేషన్‌లలో ఉపయోగించే మాడ్యూల్ సిస్టమ్‌లను కవర్ చేస్తారు.

మాడ్యూల్ నమూనా

స్థానిక జావాస్క్రిప్ట్ మాడ్యూళ్లను ప్రవేశపెట్టడానికి ముందు, మాడ్యూల్ డిజైన్ నమూనాను ఒకే ఫైల్‌కు వేరియబుల్స్ మరియు ఫంక్షన్‌లను స్కోప్ చేయడానికి మాడ్యూల్ సిస్టమ్‌గా ఉపయోగించబడింది.

ఇది IIFEలుగా ప్రసిద్ధి చెందిన వెంటనే అమలు చేయబడిన ఫంక్షన్ వ్యక్తీకరణలను ఉపయోగించి అమలు చేయబడింది. IIFE అనేది పునర్వినియోగపరచలేని ఫంక్షన్, ఇది సృష్టించబడిన వెంటనే అమలు అవుతుంది.

IIFE యొక్క ప్రాథమిక నిర్మాణం ఇక్కడ ఉంది:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})(); 

పైన ఉన్న కోడ్ బ్లాక్ మూడు వేర్వేరు సందర్భాలలో ఉపయోగించే IIFEలను వివరిస్తుంది.

---

---

IIFEలు ఉపయోగించబడ్డాయి ఎందుకంటే ఫంక్షన్‌లో డిక్లేర్ చేయబడిన వేరియబుల్స్ ఫంక్షన్‌కు స్కోప్ చేయబడతాయి, వాటిని ఫంక్షన్‌లో మాత్రమే యాక్సెస్ చేయగలవు మరియు ఫంక్షన్‌లు డేటాను తిరిగి ఇవ్వడానికి మిమ్మల్ని అనుమతిస్తాయి (వాటిని పబ్లిక్‌గా యాక్సెస్ చేసేలా చేయడం).

ఉదాహరణకి:

---

---

నేను ఐట్యూన్స్ బహుమతి కార్డును దేని కోసం ఉపయోగించగలను

const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar"); 

స్థానిక జావాస్క్రిప్ట్ మాడ్యూళ్లను ప్రవేశపెట్టడానికి ముందు మాడ్యూల్స్ ఎలా సృష్టించబడ్డాయి అనేదానికి ఎగువ కోడ్ బ్లాక్ ఒక ఉదాహరణ.

ఎగువ కోడ్ బ్లాక్ IIFEని కలిగి ఉంది. IIFE ఒక ఫంక్షన్‌ను కలిగి ఉంది, దానిని తిరిగి ఇవ్వడం ద్వారా యాక్సెస్ చేయవచ్చు. IIFEలో ప్రకటించబడిన అన్ని వేరియబుల్స్ ప్రపంచ పరిధి నుండి రక్షించబడ్డాయి. అందువలన, పద్ధతి ( పేరు చెప్పండి ) పబ్లిక్ ఫంక్షన్ ద్వారా మాత్రమే అందుబాటులో ఉంటుంది, సేపేరుకు కాల్ చేయండి .

IIFE వేరియబుల్‌లో సేవ్ చేయబడిందని గమనించండి, foo . ఎందుకంటే, మెమరీలో దాని స్థానాన్ని సూచించే వేరియబుల్ లేకుండా, స్క్రిప్ట్ రన్ అయిన తర్వాత వేరియబుల్స్ యాక్సెస్ చేయబడవు. ఈ నమూనా కారణంగా సాధ్యమవుతుంది జావాస్క్రిప్ట్ మూసివేతలు .

CommonJS మాడ్యూల్ సిస్టమ్

CommonJS మాడ్యూల్ సిస్టమ్ అనేది ప్రతి మాడ్యూల్‌ను దాని నేమ్‌స్పేస్‌లో అమలు చేయడం ద్వారా జావాస్క్రిప్ట్ స్కోప్ సమస్యలను పరిష్కరించడానికి CommonJS సమూహంచే నిర్వచించబడిన మాడ్యూల్ ఫార్మాట్.

CommonJS మాడ్యూల్ సిస్టమ్ ఇతర మాడ్యూల్‌లకు బహిర్గతం చేయాలనుకుంటున్న వేరియబుల్‌లను స్పష్టంగా ఎగుమతి చేయడానికి మాడ్యూల్స్‌ను బలవంతం చేయడం ద్వారా పని చేస్తుంది.

ఈ మాడ్యూల్ సిస్టమ్ దీని కోసం సృష్టించబడింది సర్వర్ వైపు జావాస్క్రిప్ట్ (Node.js) మరియు, బ్రౌజర్‌లలో డిఫాల్ట్‌గా మద్దతు లేదు.

మీ ప్రాజెక్ట్‌లో CommonJS మాడ్యూల్‌లను అమలు చేయడానికి, మీరు ముందుగా మీ అప్లికేషన్‌లో NPMని అమలు చేయడం ద్వారా ప్రారంభించాలి:

npm init -y 

CommonJS మాడ్యూల్ సిస్టమ్‌ను అనుసరించి ఎగుమతి చేయబడిన వేరియబుల్స్ ఇలా దిగుమతి చేసుకోవచ్చు:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module"); 

మాడ్యూల్స్ ఉపయోగించి CommonJSలో దిగుమతి చేయబడతాయి అవసరం స్టేట్‌మెంట్, ఇది జావాస్క్రిప్ట్ ఫైల్‌ను రీడ్ చేస్తుంది, రీడ్ ఫైల్‌ను ఎగ్జిక్యూట్ చేస్తుంది మరియు రిటర్న్ చేస్తుంది ఎగుమతులు వస్తువు. ది ఎగుమతులు ఆబ్జెక్ట్ మాడ్యూల్‌లో అందుబాటులో ఉన్న అన్ని ఎగుమతులను కలిగి ఉంటుంది.

మీరు పేరు ఎగుమతులు లేదా డిఫాల్ట్ ఎగుమతులు ఉపయోగించి CommonJS మాడ్యూల్ సిస్టమ్‌ను అనుసరించి వేరియబుల్‌ని ఎగుమతి చేయవచ్చు.

ఎగుమతులు అని పేరు పెట్టారు

పేరు పెట్టబడిన ఎగుమతులు వారికి కేటాయించబడిన పేర్ల ద్వారా గుర్తించబడిన ఎగుమతులు. పేరు పెట్టబడిన ఎగుమతులు డిఫాల్ట్ ఎగుమతుల వలె కాకుండా మాడ్యూల్‌కు బహుళ ఎగుమతులను అనుమతిస్తాయి.

ఉదాహరణకి:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 

ఎగువ కోడ్ బ్లాక్‌లో, మీరు రెండు పేరున్న ఫంక్షన్‌లను ఎగుమతి చేస్తున్నారు ( నా ఎగుమతి మరియు మరొక ఎగుమతి ) వాటిని జోడించడం ద్వారా ఎగుమతులు వస్తువు.

అదేవిధంగా, మీరు ఫంక్షన్లను ఇలా ఎగుమతి చేయవచ్చు:

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
}; 

ఎగువ కోడ్ బ్లాక్‌లో, మీరు సెట్ చేయండి ఎగుమతులు పేరు పెట్టబడిన ఫంక్షన్లకు అభ్యంతరం. మీరు మాత్రమే కేటాయించగలరు ఎగుమతులు ద్వారా కొత్త వస్తువుకు వస్తువు మాడ్యూల్ వస్తువు.

మీరు దీన్ని ఈ విధంగా చేయడానికి ప్రయత్నిస్తే మీ కోడ్ లోపం ఏర్పడుతుంది:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
}; 

మీరు పేరు పెట్టబడిన ఎగుమతులను దిగుమతి చేసుకోవడానికి రెండు మార్గాలు ఉన్నాయి:

1. అన్ని ఎగుమతులను ఒకే వస్తువుగా దిగుమతి చేయండి మరియు వాటిని ఉపయోగించి విడిగా యాక్సెస్ చేయండి చుక్క సంజ్ఞామానం .

ఉదాహరణకి:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. నుండి ఎగుమతులను డీ-స్ట్రక్చర్ చేయండి ఎగుమతులు వస్తువు.

ఉదాహరణకి:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport(); 

దిగుమతి చేసుకునే అన్ని పద్ధతుల్లో ఒక విషయం సాధారణం, అవి ఎగుమతి చేసిన పేర్లతోనే దిగుమతి చేసుకోవాలి.

డిఫాల్ట్ ఎగుమతులు

డిఫాల్ట్ ఎగుమతి అనేది మీకు నచ్చిన ఏదైనా పేరుతో గుర్తించబడిన ఎగుమతి. మీరు ఒక్కో మాడ్యూల్‌కు ఒక డిఫాల్ట్ ఎగుమతిని మాత్రమే కలిగి ఉంటారు.

ల్యాప్‌టాప్ మానిటర్‌ను ఎలా ఆఫ్ చేయాలి

ఉదాహరణకి:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo; 

ఎగువ కోడ్ బ్లాక్‌లో, మీరు తరగతిని ఎగుమతి చేస్తున్నారు ( ఫూ ) తిరిగి కేటాయించడం ద్వారా ఎగుమతులు దానికి అభ్యంతరం.

డిఫాల్ట్ ఎగుమతులను దిగుమతి చేయడం అనేది పేరు పెట్టబడిన ఎగుమతులను దిగుమతి చేయడం లాంటిది, మీరు వాటిని దిగుమతి చేయడానికి మీకు నచ్చిన ఏదైనా పేరును ఉపయోగించవచ్చు తప్ప.

ఉదాహరణకి:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar(); 

ఎగువ కోడ్ బ్లాక్‌లో, డిఫాల్ట్ ఎగుమతి పేరు పెట్టబడింది బార్ , అయితే మీరు మీకు నచ్చిన ఏదైనా పేరును ఉపయోగించవచ్చు.

ES6 మాడ్యూల్ సిస్టమ్

ECMAScript హార్మొనీ మాడ్యూల్ సిస్టమ్, దీనిని ES6 మాడ్యూల్స్ అని పిలుస్తారు, ఇది అధికారిక జావాస్క్రిప్ట్ మాడ్యూల్ సిస్టమ్.

ES6 మాడ్యూల్‌లకు బ్రౌజర్‌లు మరియు సర్వర్‌లు మద్దతు ఇస్తాయి, అయినప్పటికీ వాటిని ఉపయోగించే ముందు మీకు కొంచెం కాన్ఫిగరేషన్ అవసరం.

బ్రౌజర్‌లలో, మీరు దానిని పేర్కొనాలి రకం వంటి మాడ్యూల్ స్క్రిప్ట్ దిగుమతి ట్యాగ్‌లో.

వంటి:

//index.html 
<script src="./app.js" type="module"></script> 

Node.jsలో, మీరు సెట్ చేయాలి రకం కు మాడ్యూల్ మీలో pack.json ఫైల్.

వంటి:

//package.json 
"type":"module" 

మీరు పేరు పెట్టబడిన ఎగుమతులు లేదా డిఫాల్ట్ ఎగుమతులు ఉపయోగించి ES6 మాడ్యూల్ సిస్టమ్‌ని ఉపయోగించి వేరియబుల్‌లను కూడా ఎగుమతి చేయవచ్చు.

ఎగుమతులు అని పేరు పెట్టారు

CommonJS మాడ్యూల్‌లలో పేరు పెట్టబడిన దిగుమతుల మాదిరిగానే, అవి కేటాయించబడిన పేర్లతో గుర్తించబడతాయి మరియు ఒక్కో మాడ్యూల్‌కు బహుళ ఎగుమతులను అనుమతిస్తాయి.

ఉదాహరణకి:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 

ES6 మాడ్యూల్ సిస్టమ్‌లో, పేరు పెట్టబడిన ఎగుమతులు వేరియబుల్‌తో ప్రిఫిక్స్ చేయడం ద్వారా ఎగుమతి చేయబడతాయి ఎగుమతి కీవర్డ్.

ఆపిల్ వైర్‌లెస్ కీబోర్డ్ కీలు పని చేయడం లేదు

పేరు పెట్టబడిన ఎగుమతులు CommonJS వలె ES6లోని మరొక మాడ్యూల్‌లోకి దిగుమతి చేయబడతాయి:

• నుండి అవసరమైన ఎగుమతులను డీ-స్ట్రక్చర్ చేయడం ఎగుమతులు వస్తువు.
• అన్ని ఎగుమతులను ఒకే వస్తువుగా దిగుమతి చేయడం మరియు డాట్ సంజ్ఞామానాన్ని ఉపయోగించి వాటిని విడిగా యాక్సెస్ చేయడం.

డి-స్ట్రక్చరింగ్ యొక్క ఉదాహరణ ఇక్కడ ఉంది:

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport() 

మొత్తం వస్తువును దిగుమతి చేసుకునే ఉదాహరణ ఇక్కడ ఉంది:

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport() 

ఎగువ కోడ్ బ్లాక్‌లో, నక్షత్రం ( * ) అంటే 'అన్నీ'. ది వంటి కీవర్డ్ కేటాయిస్తుంది ఎగుమతులు ఈ సందర్భంలో, దానిని అనుసరించే స్ట్రింగ్‌కు ఆబ్జెక్ట్ చేయండి, foo .

డిఫాల్ట్ ఎగుమతులు

CommonJSలో డిఫాల్ట్ ఎగుమతుల మాదిరిగానే, అవి మీకు నచ్చిన ఏదైనా పేరుతో గుర్తించబడతాయి మరియు మీరు ఒక్కో మాడ్యూల్‌కు ఒక డిఫాల్ట్ ఎగుమతి మాత్రమే చేయగలరు.

ఉదాహరణకి:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo; 

డిఫాల్ట్ ఎగుమతులు జోడించడం ద్వారా సృష్టించబడతాయి డిఫాల్ట్ కీవర్డ్ తర్వాత ఎగుమతి కీవర్డ్, తర్వాత ఎగుమతి పేరు.

డిఫాల్ట్ ఎగుమతులను దిగుమతి చేయడం అనేది పేరు పెట్టబడిన ఎగుమతులను దిగుమతి చేయడం లాంటిది, మీరు వాటిని దిగుమతి చేయడానికి మీకు నచ్చిన ఏదైనా పేరును ఉపయోగించవచ్చు తప్ప.

ఉదాహరణకి:

//otherModule.js 
import Bar from "./main.js"; 

మిశ్రమ ఎగుమతులు

ES6 మాడ్యూల్ ప్రమాణం CommonJS వలె కాకుండా ఒక మాడ్యూల్‌లో డిఫాల్ట్ ఎగుమతులు మరియు పేరున్న ఎగుమతులు రెండింటినీ కలిగి ఉండటానికి మిమ్మల్ని అనుమతిస్తుంది.

ఉదాహరణకి:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo; 

మాడ్యూల్స్ యొక్క ప్రాముఖ్యత

మీ కోడ్‌ను మాడ్యూల్స్‌గా విభజించడం వలన వాటిని చదవడం సులభతరం చేయడమే కాకుండా, ఇది మరింత పునర్వినియోగం మరియు నిర్వహించదగినదిగా చేస్తుంది. JavaScriptలోని మాడ్యూల్స్ కూడా మీ కోడ్‌ను తక్కువ ఎర్రర్-ప్రోన్‌గా చేస్తాయి, ఎందుకంటే అన్ని మాడ్యూల్‌లు డిఫాల్ట్‌గా కఠినమైన మోడ్‌లో అమలు చేయబడతాయి.