அத்தியாயம் 13

தொகுதிகள் (Modules)

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

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

• AMD - பழமையான தொகுதி அமைப்புகளில் ஒன்று, ஆரம்பத்தில் require.js ஆல் பயன்படுத்தப்பட்டது.
• CommonJS - Node.js சேவையகத்திற்காக (server) உருவாக்கப்பட்ட தொகுதி அமைப்பு.
• UMD - AMD மற்றும் CommonJS உடன் இணக்கமான (compatible) தொகுதி அமைப்பு.

தொகுதிகள் ஒன்றையொன்று ஏற்ற முடியும், மேலும் செயல்பாட்டைப் பரிமாறிக்கொள்ள import மற்றும் export என்ற சிறப்பு உத்தரவுகளைப் (directives) பயன்படுத்தலாம், மற்றும் ஒன்றோடொன்று செயல்பாடுகளை (functions) அழைக்கலாம்.

• export - தற்போதைய தொகுதிக்கு வெளியே இருந்து அணுகக்கூடிய செயல்பாடுகள் மற்றும் மாறிகளை (variables) லேபிளிடுகிறது
• import - வெளியிலுள்ள தொகுதியிலிருந்து செயல்பாட்டை இறக்குமதி செய்கிறது

தொகுதிகளில் உள்ள import மற்றும் export பொறிமுறையைப் பார்ப்போம். sayHi.js கோப்பிலிருந்து sayHi செயல்பாடு ஏற்றுமதி செய்யப்பட்டுள்ளது (exported).

// 📁 sayHi.js
export const sayHi = (user) => {
  alert(`வணக்கம், ${user}!`);
}

sayHi செயல்பாடு import உத்தரவின் உதவியுடன் main.js கோப்பில் பயன்படுத்தப்படுகிறது.

// 📁 main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // செயல்பாடு (function)...
sayHi('Kelvin'); // வணக்கம், Kelvin!

இங்கே, import உத்தரவு தொடர்புடைய பாதையை (relative path) இறக்குமதி செய்வதன் மூலம் தொகுதியை ஏற்றுகிறது மற்றும் sayHi மாறியை ஒதுக்குகிறது.

தொகுதிகளை இரண்டு வழிகளில் ஏற்றுமதி செய்யலாம்: Named (பெயரிடப்பட்டவை) மற்றும் Default (இயல்புநிலை). மேலும், Named ஏற்றுமதிகளை ஒரே வரியில் (inline) அல்லது தனித்தனியாக ஒதுக்கலாம்.

// 📁 person.js 

// உள்ளமை (inlined) பெயரிடப்பட்ட ஏற்றுமதிகள்
export const name = "Kelvin";
export const age = 30;

// ஒரேயடியாக (at once)
const name = "Kelvin";
const age = 30;
export {name, age};

// 📁 message.js 
const message = (name, age) => {
    return `${name} இன் வயது ${age}.`;
};
export default message;

ஏற்றுமதி வகையின் அடிப்படையில், நாம் அதை இரண்டு வழிகளில் இறக்குமதி செய்யலாம். பெயரிடப்பட்ட ஏற்றுமதி (named export) சுருள் அடைப்புக்குறிகளைப் (curly braces) பயன்படுத்தி கட்டமைக்கப்படுகிறது, அதேசமயம் இயல்புநிலை ஏற்றுமதிகள் (default exports) அவ்வாறு செய்யப்படுவதில்லை.

import { name, age } from "./person.js"; // பெயரிடப்பட்ட ஏற்றுமதி இறக்குமதி
import message from "./message.js"; // இயல்புநிலை ஏற்றுமதி இறக்குமதி

தொகுதிகளை ஒதுக்கும்போது, நாம் சுழற்சி சார்பைத் (circular dependency) தவிர்க்க வேண்டும். சுழற்சி சார்பு என்பது தொகுதி A ஆனது B ஐச் சார்ந்திருக்கும், மற்றும் B ஆனது நேரடியாகவோ அல்லது மறைமுகமாகவோ A ஐச் சார்ந்திருக்கும் ஒரு சூழ்நிலையாகும்.