ஜாவாஸ்கிரிப்டில் தொகுதி அமைப்புகளுக்கு ஒரு அறிமுகம்

தொகுதிகள் என்ற கருத்து மட்டு நிரலாக்க முன்னுதாரணத்திலிருந்து வருகிறது. நிரல் செயல்பாடுகளை தனித்தனியாக அல்லது பயன்பாட்டில் இணைக்கக்கூடிய தனித்தனி கோப்புகளாக உடைப்பதன் மூலம் மென்பொருளானது 'தொகுதிகள்' எனப்படும் தனித்தனி, பரிமாற்றக்கூடிய கூறுகளைக் கொண்டிருக்க வேண்டும் என்று இந்த முன்னுதாரணம் முன்மொழிகிறது.

அன்றைய வீடியோவை உருவாக்கவும்

ஒரு தொகுதி என்பது ஒரு தனியான கோப்பாகும், இது சில செயல்பாடுகளைச் செயல்படுத்தவும், மறுபயன்பாடு மற்றும் அமைப்பை மேம்படுத்தவும் குறியீட்டை இணைக்கிறது.

---

---

தொகுதி முறை, பெரும்பாலான 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"); 
}; 

மேலே உள்ள குறியீடு தொகுதியில், நீங்கள் பெயரிடப்பட்ட இரண்டு செயல்பாடுகளை ஏற்றுமதி செய்கிறீர்கள் ( myExport மற்றும் மற்றொரு ஏற்றுமதி ) அவற்றை இணைப்பதன் மூலம் ஏற்றுமதி செய்கிறது பொருள்.

இதேபோல், நீங்கள் செயல்பாடுகளை ஏற்றுமதி செய்யலாம்:

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 இல் மற்றொரு தொகுதிக்கு இறக்குமதி செய்யப்படலாம்:

• இலிருந்து தேவையான ஏற்றுமதிகளை மறுகட்டமைத்தல் ஏற்றுமதி செய்கிறது பொருள்.
• அனைத்து ஏற்றுமதிகளையும் ஒரு பொருளாக இறக்குமதி செய்து, புள்ளி குறியீடைப் பயன்படுத்தி தனித்தனியாக அணுகுதல்.

கட்டமைப்பை நீக்குவதற்கான ஒரு எடுத்துக்காட்டு இங்கே:

விண்டோஸ் 10 இல் 0xc000000e பிழைக் குறியீட்டை எவ்வாறு சரிசெய்வது

//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; 

தொகுதிகளின் முக்கியத்துவம்

உங்கள் குறியீட்டை தொகுதிகளாகப் பிரிப்பது அவற்றைப் படிப்பதை எளிதாக்குவது மட்டுமல்லாமல், அதை மீண்டும் பயன்படுத்தக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது. ஜாவாஸ்கிரிப்டில் உள்ள தொகுதிகள் உங்கள் குறியீட்டை பிழை-பாதிப்பைக் குறைக்கின்றன, ஏனெனில் அனைத்து தொகுதிக்கூறுகளும் முன்னிருப்பாக கடுமையான பயன்முறையில் செயல்படுத்தப்படும்.