ஜாவாஸ்கிரிப்ட் மாட்யூல் கட்டமைப்பு: வடிவமைப்பு முறை செயல்படுத்தல்

நவீன வலை மேம்பாட்டின் ஒரு மூலக்கல்லான ஜாவாஸ்கிரிப்ட், ஆற்றல்மிக்க மற்றும் ஊடாடும் பயனர் அனுபவங்களை அனுமதிக்கிறது. இருப்பினும், ஜாவாஸ்கிரிப்ட் பயன்பாடுகளின் சிக்கலான தன்மை அதிகரிக்கும்போது, நன்கு கட்டமைக்கப்பட்ட குறியீட்டின் தேவை மிக முக்கியமானது. இங்குதான் மாட்யூல் கட்டமைப்பு மற்றும் வடிவமைப்பு முறைகள் வருகின்றன, அவை பராமரிக்கக்கூடிய, அளவிடக்கூடிய மற்றும் சோதிக்கக்கூடிய பயன்பாடுகளை உருவாக்குவதற்கான ஒரு வழிகாட்டியை வழங்குகின்றன. இந்த வழிகாட்டி பல்வேறு மாட்யூல் முறைகளின் முக்கிய கருத்துகள் மற்றும் நடைமுறைச் செயலாக்கங்களை ஆராய்கிறது, இது உங்களை தூய்மையான, மேலும் வலுவான ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுத அதிகாரம் அளிக்கிறது.

மாட்யூல் கட்டமைப்பு ஏன் முக்கியமானது

குறிப்பிட்ட முறைகளுக்குள் நுழைவதற்கு முன், மாட்யூல் கட்டமைப்பு ஏன் அவசியம் என்பதைப் புரிந்துகொள்வது முக்கியம். பின்வரும் நன்மைகளைக் கவனியுங்கள்:

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

ஜாவாஸ்கிரிப்ட் மாட்யூல் அமைப்புகள்: ஒரு கண்ணோட்டம்

ஜாவாஸ்கிரிப்ட்டில் மாடுலாரிட்டிக்கான தேவையை நிவர்த்தி செய்ய பல மாட்யூல் அமைப்புகள் உருவாகியுள்ளன. வடிவமைப்பு முறைகளை திறம்படப் பயன்படுத்த இந்த அமைப்புகளைப் புரிந்துகொள்வது அவசியம்.

காமன்ஜெஎஸ் (CommonJS)

Node.js சூழல்களில் பரவலாக இருக்கும் காமன்ஜெஎஸ், மாட்யூல்களை இறக்குமதி செய்ய require() மற்றும் அவற்றை ஏற்றுமதி செய்ய module.exports அல்லது exports ஐப் பயன்படுத்துகிறது. இது ஒரு ஒத்திசைவான மாட்யூல் ஏற்றும் அமைப்பாகும்.

            // myModule.js
module.exports = {
  myFunction: function() {
    console.log('Hello from myModule!');
  }
};

// app.js
const myModule = require('./myModule');
myModule.myFunction();

            

              
                Copy
              
            
          

பயன்பாட்டு வழக்குகள்: முதன்மையாக சேவையக பக்க ஜாவாஸ்கிரிப்ட் (Node.js) மற்றும் சில நேரங்களில் முகப்புத் திட்டங்களுக்கான உருவாக்க செயல்முறைகளில் பயன்படுத்தப்படுகிறது.

ஏஎம்டி (AMD - Asynchronous Module Definition)

ஏஎம்டி ஒத்திசைவற்ற மாட்யூல் ஏற்றுவதற்காக வடிவமைக்கப்பட்டுள்ளது, இது வலை உலாவிகளுக்கு ஏற்றதாக அமைகிறது. இது மாட்யூல்களை அறிவிக்க define() மற்றும் அவற்றை இறக்குமதி செய்ய require() ஐப் பயன்படுத்துகிறது. RequireJS போன்ற நூலகங்கள் ஏஎம்டி-ஐ செயல்படுத்துகின்றன.

            
// myModule.js (using RequireJS syntax)
define(function() {
  return {
    myFunction: function() {
      console.log('Hello from myModule (AMD)!');
    }
  };
});

// app.js (using RequireJS syntax)
require(['./myModule'], function(myModule) {
  myModule.myFunction();
});

            

              
                Copy
              
            
          

பயன்பாட்டு வழக்குகள்: வரலாற்று ரீதியாக உலாவி அடிப்படையிலான பயன்பாடுகளில் பயன்படுத்தப்பட்டது, குறிப்பாக டைனமிக் ஏற்றுதல் அல்லது பல சார்புகளுடன் கையாளும் பயன்பாடுகளில்.

இஎஸ் மாட்யூல்கள் (ESM)

ECMAScript தரத்தின் அதிகாரப்பூர்வ பகுதியான இஎஸ் மாட்யூல்கள், ஒரு நவீன மற்றும் தரப்படுத்தப்பட்ட அணுகுமுறையை வழங்குகின்றன. அவை மாட்யூல்களை இறக்குமதி செய்ய import மற்றும் அவற்றை ஏற்றுமதி செய்ய export (export default) ஐப் பயன்படுத்துகின்றன. இஎஸ் மாட்யூல்கள் இப்போது நவீன உலாவிகள் மற்றும் Node.js ஆல் பரவலாக ஆதரிக்கப்படுகின்றன.

            
// myModule.js
export function myFunction() {
  console.log('Hello from myModule (ESM)!');
}

// app.js
import { myFunction } from './myModule.js';
myFunction();

            

              
                Copy
              
            
          

பயன்பாட்டு வழக்குகள்: நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்கான விருப்பமான மாட்யூல் அமைப்பு, உலாவி மற்றும் சேவையக பக்க சூழல்களை ஆதரிக்கிறது, மேலும் ட்ரீ-ஷேக்கிங் மேம்படுத்தலை செயல்படுத்துகிறது.

ஜாவாஸ்கிரிப்ட் மாட்யூல்களுக்கான வடிவமைப்பு முறைகள்

சிங்கிள்டன்களை உருவாக்குதல், நிகழ்வுகளைக் கையாளுதல் அல்லது மாறுபட்ட உள்ளமைவுகளுடன் பொருட்களை உருவாக்குதல் போன்ற குறிப்பிட்ட இலக்குகளை அடைய ஜாவாஸ்கிரிப்ட் மாட்யூல்களுக்கு பல வடிவமைப்பு முறைகளைப் பயன்படுத்தலாம். நடைமுறை எடுத்துக்காட்டுகளுடன் பொதுவாகப் பயன்படுத்தப்படும் சில முறைகளை நாங்கள் ஆராய்வோம்.

1. சிங்கிள்டன் முறை (The Singleton Pattern)

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

            
// Using an immediately invoked function expression (IIFE) to create the singleton
const singleton = (function() {
  let instance;

  function createInstance() {
    const object = new Object({ name: 'Singleton Instance' });
    return object;
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

// Usage
const instance1 = singleton.getInstance();
const instance2 = singleton.getInstance();

console.log(instance1 === instance2); // Output: true
console.log(instance1.name); // Output: Singleton Instance

            

              
                Copy
              
            
          

விளக்கம்:

• ஒரு IIFE (உடனடியாக அழைக்கப்படும் செயல்பாட்டு வெளிப்பாடு) ஒரு தனிப்பட்ட நோக்கத்தை உருவாக்குகிறது, இது `instance`-ஐ தற்செயலாக மாற்றுவதைத் தடுக்கிறது.
• `getInstance()` முறை ஒரே ஒரு நிகழ்வு மட்டுமே உருவாக்கப்படுவதை உறுதி செய்கிறது. இது முதல் முறை அழைக்கப்படும்போது, அது நிகழ்வை உருவாக்குகிறது. அடுத்தடுத்த அழைப்புகள் ஏற்கனவே உள்ள நிகழ்வை வழங்கும்.

பயன்பாட்டு வழக்குகள்: உலகளாவிய உள்ளமைவு அமைப்புகள், பதிவு சேவைகள், தரவுத்தள இணைப்புகள் மற்றும் பயன்பாட்டு நிலையை நிர்வகித்தல்.

2. ஃபேக்டரி முறை (The Factory Pattern)

ஃபேக்டரி முறை, பொருட்களின் உறுதியான வகுப்புகளைக் குறிப்பிடாமல் அவற்றை உருவாக்குவதற்கான ஒரு இடைமுகத்தை வழங்குகிறது. இது குறிப்பிட்ட அளவுகோல்கள் அல்லது உள்ளமைவுகளின் அடிப்படையில் பொருட்களை உருவாக்க உங்களை அனுமதிக்கிறது, இது நெகிழ்வுத்தன்மை மற்றும் குறியீடு மறுபயன்பாட்டை ஊக்குவிக்கிறது.

            
// Factory function
function createCar(type, options) {
  switch (type) {
    case 'sedan':
      return new Sedan(options);
    case 'suv':
      return new SUV(options);
    default:
      return null;
  }
}

// Car classes (implementation)
class Sedan {
  constructor(options) {
    this.type = 'Sedan';
    this.color = options.color || 'white';
    this.model = options.model || 'Unknown';
  }
  getDescription() {
    return `This is a ${this.color} ${this.model} Sedan.`
  }
}

class SUV {
  constructor(options) {
    this.type = 'SUV';
    this.color = options.color || 'black';
    this.model = options.model || 'Unknown';
  }
  getDescription() {
    return `This is a ${this.color} ${this.model} SUV.`
  }
}

// Usage
const mySedan = createCar('sedan', { color: 'blue', model: 'Camry' });
const mySUV = createCar('suv', { model: 'Explorer' });

console.log(mySedan.getDescription()); // Output: This is a blue Camry Sedan.
console.log(mySUV.getDescription()); // Output: This is a black Explorer SUV.

            

              
                Copy
              
            
          

விளக்கம்:

• `createCar()` செயல்பாடு தொழிற்சாலையாக செயல்படுகிறது.
• இது `type` மற்றும் `options`-ஐ உள்ளீடாக எடுத்துக்கொள்கிறது.
• `type`-ன் அடிப்படையில், அது தொடர்புடைய கார் வகுப்பின் ஒரு நிகழ்வை உருவாக்கி வழங்குகிறது.

பயன்பாட்டு வழக்குகள்: மாறுபட்ட உள்ளமைவுகளுடன் சிக்கலான பொருட்களை உருவாக்குதல், உருவாக்கும் செயல்முறையை சுருக்கமாகக் கூறுதல் மற்றும் ஏற்கனவே உள்ள குறியீட்டை மாற்றாமல் புதிய பொருள் வகைகளை எளிதாகச் சேர்க்க அனுமதித்தல்.

3. அப்சர்வர் முறை (The Observer Pattern)

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

            
class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received: ${data}`);
  }
}

// Usage
const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify('Hello, observers!'); // Observer 1 received: Hello, observers!  Observer 2 received: Hello, observers!

subject.unsubscribe(observer1);
subject.notify('Another update!'); // Observer 2 received: Another update!

            

              
                Copy
              
            
          

விளக்கம்:

• `Subject` வகுப்பு அப்சர்வர்களை (சந்தாதாரர்களை) நிர்வகிக்கிறது.
• `subscribe()` மற்றும் `unsubscribe()` முறைகள் அப்சர்வர்களை பதிவு செய்யவும் மற்றும் பதிவு நீக்கவும் அனுமதிக்கின்றன.
• `notify()` ஒவ்வொரு பதிவுசெய்யப்பட்ட அப்சர்வரின் `update()` முறையை அழைக்கிறது.
• `Observer` வகுப்பு மாற்றங்களுக்கு எதிர்வினையாற்றும் `update()` முறையை வரையறுக்கிறது.

பயன்பாட்டு வழக்குகள்: பயனர் இடைமுகங்களில் நிகழ்வுகளைக் கையாளுதல், நிகழ்நேர தரவு புதுப்பிப்புகள் மற்றும் ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகித்தல். எடுத்துக்காட்டாக, தரவு மாறும்போது UI கூறுகளைப் புதுப்பித்தல் (உதாரணமாக, ஒரு பிணைய கோரிக்கையிலிருந்து), கூறுகளுக்கு இடையேயான தகவல்தொடர்புக்கான ஒரு pub/sub அமைப்பைச் செயல்படுத்துதல் அல்லது பயன்பாட்டின் ஒரு பகுதியில் ஏற்படும் மாற்றங்கள் மற்ற இடங்களில் புதுப்பிப்புகளைத் தூண்டும் ஒரு எதிர்வினை அமைப்பைக் உருவாக்குதல்.

4. மாட்யூல் முறை (The Module Pattern)

மாட்யூல் முறை, தன்னிறைவான, மீண்டும் பயன்படுத்தக்கூடிய குறியீட்டுத் தொகுதிகளை உருவாக்குவதற்கான ஒரு அடிப்படை நுட்பமாகும். இது பொது மற்றும் தனிப்பட்ட உறுப்பினர்களை இணைத்து, பெயரிடல் மோதல்களைத் தடுத்து, தகவல் மறைப்பை ஊக்குவிக்கிறது. இது பெரும்பாலும் ஒரு தனிப்பட்ட நோக்கத்தை உருவாக்க ஒரு IIFE (உடனடியாக அழைக்கப்படும் செயல்பாட்டு வெளிப்பாடு) ஐப் பயன்படுத்துகிறது.

            
const myModule = (function() {
  // Private variables and functions
  let privateVariable = 'Hello';

  function privateFunction() {
    console.log('This is a private function.');
  }

  // Public interface
  return {
    publicMethod: function() {
      console.log(privateVariable);
      privateFunction();
    },
    publicVariable: 'World'
  };
})();

// Usage
myModule.publicMethod(); // Output: Hello  This is a private function.
console.log(myModule.publicVariable); // Output: World
// console.log(myModule.privateVariable); // Error: privateVariable is not defined (accessing private variables is not allowed)

            

              
                Copy
              
            
          

விளக்கம்:

• ஒரு IIFE ஒரு மூடுதலை (closure) உருவாக்குகிறது, இது மாட்யூலின் உள் நிலையை இணைக்கிறது.
• IIFE க்குள் அறிவிக்கப்பட்ட மாறிகள் மற்றும் செயல்பாடுகள் தனிப்பட்டவை.
• `return` அறிக்கை பொது இடைமுகத்தை வெளிப்படுத்துகிறது, இதில் மாட்யூலுக்கு வெளியே இருந்து அணுகக்கூடிய முறைகள் மற்றும் மாறிகள் அடங்கும்.

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

5. வெளிப்படுத்தும் மாட்யூல் முறை (Revealing Module Pattern)

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

            
const revealingModule = (function() {
  let privateVariable = 'Secret Message';

  function privateFunction() {
    console.log('Inside privateFunction');
  }

  function publicGet() {
    return privateVariable;
  }

  function publicSet(value) {
    privateVariable = value;
  }

  // Reveal public members
  return {
    get: publicGet,
    set: publicSet,
    // You can also reveal privateFunction (but usually it is hidden)
    // show: privateFunction
  };
})();

// Usage
console.log(revealingModule.get()); // Output: Secret Message
revealingModule.set('New Secret');
console.log(revealingModule.get()); // Output: New Secret
// revealingModule.privateFunction(); // Error: revealingModule.privateFunction is not a function

            

              
                Copy
              
            
          

விளக்கம்:

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

பயன்பாட்டு வழக்குகள்: மாட்யூல்களின் இணைப்பை மேம்படுத்துதல், ஒரு சுத்தமான மற்றும் கவனம் செலுத்திய பொது API-ஐ வழங்குதல் மற்றும் மாட்யூலின் பயன்பாட்டை எளிதாக்குதல். நூலக வடிவமைப்பில் தேவையான செயல்பாடுகளை மட்டும் வெளிப்படுத்த அடிக்கடி பயன்படுத்தப்படுகிறது.

6. டெக்கரேட்டர் முறை (The Decorator Pattern)

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

            
// Component interface (base object)
class Pizza {
  constructor() {
    this.description = 'Plain Pizza';
  }

  getDescription() {
    return this.description;
  }

  getCost() {
    return 10;
  }
}

// Decorator abstract class
class PizzaDecorator extends Pizza {
  constructor(pizza) {
    super();
    this.pizza = pizza;
  }

  getDescription() {
    return this.pizza.getDescription();
  }

  getCost() {
    return this.pizza.getCost();
  }
}

// Concrete Decorators
class CheeseDecorator extends PizzaDecorator {
  constructor(pizza) {
    super(pizza);    this.description = 'Cheese Pizza';
  }

  getDescription() {
    return `${this.pizza.getDescription()}, Cheese`;
  }

  getCost() {
    return this.pizza.getCost() + 2;
  }
}

class PepperoniDecorator extends PizzaDecorator {
  constructor(pizza) {
    super(pizza);
    this.description = 'Pepperoni Pizza';
  }

  getDescription() {
    return `${this.pizza.getDescription()}, Pepperoni`;
  }

  getCost() {
    return this.pizza.getCost() + 3;
  }
}

// Usage
let pizza = new Pizza();
pizza = new CheeseDecorator(pizza);
pizza = new PepperoniDecorator(pizza);

console.log(pizza.getDescription()); // Output: Plain Pizza, Cheese, Pepperoni
console.log(pizza.getCost()); // Output: 15

            

              
                Copy
              
            
          

விளக்கம்:

• `Pizza` வகுப்பு அடிப்படைப் பொருளாகும்.
• `PizzaDecorator` என்பது சுருக்கமான டெக்கரேட்டர் வகுப்பாகும். இது `Pizza` வகுப்பை விரிவுபடுத்துகிறது மற்றும் ஒரு `pizza` பண்பைக் கொண்டுள்ளது (சுற்றப்பட்ட பொருள்).
• உறுதியான டெக்கரேட்டர்கள் (உதாரணமாக, `CheeseDecorator`, `PepperoniDecorator`) `PizzaDecorator`-ஐ விரிவுபடுத்தி குறிப்பிட்ட செயல்பாட்டைச் சேர்க்கின்றன. அவை தங்கள் சொந்த அம்சங்களைச் சேர்க்க `getDescription()` மற்றும் `getCost()` முறைகளை மேலெழுதுகின்றன.
• கிளையன்ட் அதன் கட்டமைப்பை மாற்றாமல் அடிப்படைப் பொருளுக்கு ஆற்றல்மிக்க முறையில் டெக்கரேட்டர்களைச் சேர்க்கலாம்.

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

வெவ்வேறு சூழல்களில் மாட்யூல்களைச் செயல்படுத்துதல்

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

1. உலாவி அடிப்படையிலான மேம்பாடு

உலாவியில், நீங்கள் பொதுவாக இஎஸ் மாட்யூல்கள் அல்லது ஏஎம்டி-ஐப் பயன்படுத்துகிறீர்கள்.

• இஎஸ் மாட்யூல்கள்: நவீன உலாவிகள் இப்போது இஎஸ் மாட்யூல்களை இயல்பாக ஆதரிக்கின்றன. உங்கள் ஜாவாஸ்கிரிப்ட் கோப்புகளில் `import` மற்றும் `export` தொடரியலைப் பயன்படுத்தலாம், மேலும் இந்த கோப்புகளை உங்கள் HTML-ல் `