வலைக் கூறுகள்: தனிப்பயன் உறுப்புகளில் ஒரு ஆழமான பார்வை

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

வலைக் கூறுகள் என்றால் என்ன?

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

தனிப்பயன் உறுப்புகள் (Custom Elements): புதிய HTML குறிச்சொற்களையும் அவற்றின் தொடர்புடைய நடத்தையையும் வரையறுக்கவும்.
நிழல் DOM (Shadow DOM): ஒரு கூறுக்கு ஒரு தனி DOM மரத்தை உருவாக்குவதன் மூலம் உள்ளடக்கத்தை வழங்குகிறது, அதன் ஸ்டைல்கள் மற்றும் ஸ்கிரிப்ட்களை உலகளாவிய நோக்கத்தில் இருந்து பாதுகாக்கிறது.
HTML டெம்ப்ளேட்டுகள் (HTML Templates): மீண்டும் பயன்படுத்தக்கூடிய HTML கட்டமைப்புகளை வரையறுக்கவும், அவை ஜாவாஸ்கிரிப்ட் மூலம் உருவாக்கப்பட்டு கையாளப்படலாம்.

தனிப்பயன் உறுப்புகளைப் புரிந்துகொள்ளுதல்

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

தனிப்பயன் உறுப்புகளை வரையறுத்தல்

ஒரு தனிப்பயன் உறுப்பை வரையறுக்க, நீங்கள் customElements.define() முறையைப் பயன்படுத்த வேண்டும். இந்த முறை இரண்டு வாதங்களை எடுக்கும்:

உறுப்பு பெயர்: தனிப்பயன் உறுப்பின் பெயரைக் குறிக்கும் ஒரு சரம். நிலையான HTML உறுப்புகளுடன் முரண்பாடுகளைத் தவிர்க்க பெயரில் ஒரு சிறுகோடு (-) இருக்க வேண்டும். உதாரணமாக, my-element என்பது ஒரு சரியான பெயர், ஆனால் myelement என்பது இல்லை.
உறுப்பு வகுப்பு: HTMLElement ஐ நீட்டிக்கும் மற்றும் தனிப்பயன் உறுப்பின் நடத்தையை வரையறுக்கும் ஒரு ஜாவாஸ்கிரிப்ட் வகுப்பு.

இதோ ஒரு அடிப்படை உதாரணம்:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'வணக்கம், உலகமே!';
  }
}

customElements.define('my-element', MyElement);

இந்த எடுத்துக்காட்டில், my-element என்ற பெயரில் ஒரு தனிப்பயன் உறுப்பை வரையறுக்கிறோம். MyElement வகுப்பு HTMLElement ஐ நீட்டிக்கிறது மற்றும் கன்ஸ்ட்ரக்டரில் உறுப்பின் உள் HTML-ஐ "வணக்கம், உலகமே!" என்று அமைக்கிறது.

தனிப்பயன் உறுப்பு வாழ்க்கைச் சுழற்சி கால்பேக்குகள்

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

connectedCallback(): உறுப்பு DOM-ல் செருகப்படும்போது அழைக்கப்படுகிறது. தரவைப் பெறுவது அல்லது நிகழ்வு கேட்பவர்களைச் சேர்ப்பது போன்ற தொடக்கப் பணிகளைச் செய்வதற்கு இது ஒரு நல்ல இடம்.
disconnectedCallback(): உறுப்பு DOM-ல் இருந்து அகற்றப்படும்போது அழைக்கப்படுகிறது. நிகழ்வு கேட்பவர்களை அகற்றுவது அல்லது நினைவகத்தை விடுவிப்பது போன்ற வளங்களைச் சுத்தம் செய்வதற்கு இது ஒரு நல்ல இடம்.
attributeChangedCallback(name, oldValue, newValue): உறுப்பின் ஒரு பண்புக்கூறு மாற்றப்படும்போது அழைக்கப்படுகிறது. இந்த கால்பேக் பண்புக்கூறு மாற்றங்களுக்குப் பதிலளிக்கவும், அதற்கேற்ப உறுப்பின் ரெண்டரிங்கை புதுப்பிக்கவும் உங்களை அனுமதிக்கிறது. observedAttributes கெட்டரைப் பயன்படுத்தி எந்தப் பண்புக்கூறுகளைக் கவனிக்க வேண்டும் என்பதைக் குறிப்பிட வேண்டும்.
adoptedCallback(): உறுப்பு ஒரு புதிய ஆவணத்திற்கு நகர்த்தப்படும்போது அழைக்கப்படுகிறது.

வாழ்க்கைச் சுழற்சி கால்பேக்குகளின் பயன்பாட்டைக் காட்டும் ஒரு எடுத்துக்காட்டு இதோ:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `DOM-உடன் இணைக்கப்பட்டது!`;
    console.log('உறுப்பு இணைக்கப்பட்டது');
  }

  disconnectedCallback() {
    console.log('உறுப்பு துண்டிக்கப்பட்டது');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `${newValue}`;
    }
  }
}

customElements.define('my-element', MyElement);

இந்த எடுத்துக்காட்டில், connectedCallback() ஒரு செய்தியை கன்சோலில் பதிவுசெய்து, DOM-உடன் இணைக்கப்படும்போது உறுப்பின் உள் HTML-ஐ அமைக்கிறது. உறுப்பு துண்டிக்கப்படும்போது disconnectedCallback() ஒரு செய்தியைப் பதிவுசெய்கிறது. data-message பண்புக்கூறு மாறும்போது attributeChangedCallback() அழைக்கப்படுகிறது, அதற்கேற்ப உறுப்பின் உள்ளடக்கத்தைப் புதுப்பிக்கிறது. observedAttributes கெட்டர் data-message பண்புக்கூறில் ஏற்படும் மாற்றங்களைக் கவனிக்க விரும்புகிறோம் என்பதைக் குறிப்பிடுகிறது.

உள்ளடக்கத்திற்கான நிழல் DOM-ஐப் பயன்படுத்துதல்

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

நிழல் DOM-ஐப் பயன்படுத்த, நீங்கள் உறுப்பில் attachShadow() முறையை அழைக்கலாம். இந்த முறை நிழல் DOM-ன் பயன்முறையைக் குறிப்பிடும் ஒரு விருப்பங்கள் பொருளை எடுக்கும். mode 'open' அல்லது 'closed' ஆக இருக்கலாம். பயன்முறை 'open' ஆக இருந்தால், உறுப்பின் shadowRoot பண்பைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட்டிலிருந்து நிழல் DOM-ஐ அணுகலாம். பயன்முறை 'closed' ஆக இருந்தால், ஜாவாஸ்கிரிப்ட்டிலிருந்து நிழல் DOM-ஐ அணுக முடியாது.

நிழல் DOM-ன் பயன்பாட்டைக் காட்டும் ஒரு எடுத்துக்காட்டு இதோ:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      இது நிழல் DOM-க்குள் உள்ளது.
    `;
  }
}

customElements.define('my-element', MyElement);

இந்த எடுத்துக்காட்டில், mode: 'open' உடன் உறுப்புக்கு ஒரு நிழல் DOM-ஐ இணைக்கிறோம். பின்னர் நிழல் DOM-ன் உள் HTML-ஐ ஒரு ஸ்டைலை உள்ளடக்குமாறு அமைக்கிறோம், இது பத்திகளின் நிறத்தை நீலமாகவும், சில உரையுடன் ஒரு பத்தி உறுப்பையும் அமைக்கிறது. நிழல் DOM-க்குள் வரையறுக்கப்பட்ட ஸ்டைல் நிழல் DOM-க்குள் உள்ள உறுப்புகளுக்கு மட்டுமே பொருந்தும், மேலும் நிழல் DOM-க்கு வெளியே உள்ள பத்திகளைப் பாதிக்காது.

தனிப்பயன் உறுப்புகளைப் பயன்படுத்துவதன் நன்மைகள்

தனிப்பயன் உறுப்புகள் வலை மேம்பாட்டிற்கு பல நன்மைகளை வழங்குகின்றன:

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

தனிப்பயன் உறுப்புகளின் நடைமுறை எடுத்துக்காட்டுகள்

பொதுவான UI கூறுகளை உருவாக்க தனிப்பயன் உறுப்புகளை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

ஒரு எளிய கவுண்டர் கூறு

இந்த எடுத்துக்காட்டு தனிப்பயன் உறுப்புகளைப் பயன்படுத்தி ஒரு எளிய கவுண்டர் கூறை எவ்வாறு உருவாக்குவது என்பதைக் காட்டுகிறது.

class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      
        
        ${this._count}
        
      
    `;
  }
}

customElements.define('my-counter', Counter);

இந்தக் குறியீடு HTMLElement ஐ நீட்டிக்கும் Counter வகுப்பை வரையறுக்கிறது. கன்ஸ்ட்ரக்டர் கூறைத் துவக்குகிறது, ஒரு நிழல் DOM-ஐ இணைக்கிறது, மற்றும் ஆரம்ப எண்ணிக்கையை 0 ஆக அமைக்கிறது. connectedCallback() முறை அதிகரிப்பு மற்றும் குறைப்பு பொத்தான்களுக்கு நிகழ்வு கேட்பவர்களைச் சேர்க்கிறது. increment() மற்றும் decrement() முறைகள் எண்ணிக்கையைப் புதுப்பித்து, கூறின் ரெண்டரிங்கைப் புதுப்பிக்க render() முறையை அழைக்கின்றன. render() முறை நிழல் DOM-ன் உள் HTML-ஐ கவுண்டர் காட்சி மற்றும் பொத்தான்களை உள்ளடக்குமாறு அமைக்கிறது.

ஒரு பட கரோசல் கூறு

இந்த எடுத்துக்காட்டு தனிப்பயன் உறுப்புகளைப் பயன்படுத்தி ஒரு பட கரோசல் கூறை எவ்வாறு உருவாக்குவது என்பதைக் காட்டுகிறது. சுருக்கத்திற்காக, பட மூலங்கள் ஒதுக்கிடங்களாக உள்ளன, மேலும் ஒரு API, ஒரு CMS அல்லது உள்ளூர் சேமிப்பகத்திலிருந்து மாறும் வகையில் ஏற்றப்படலாம். ஸ்டைலிங்கும் குறைக்கப்பட்டுள்ளது.

class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  
  
  
  
  
  
  
  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

இந்தக் குறியீடு HTMLElement ஐ நீட்டிக்கும் ஒரு ImageCarousel வகுப்பை வரையறுக்கிறது. கன்ஸ்ட்ரக்டர் கூறைத் துவக்குகிறது, ஒரு நிழல் DOM-ஐ இணைக்கிறது, மற்றும் ஆரம்ப படங்கள் வரிசை மற்றும் தற்போதைய குறியீட்டை அமைக்கிறது. connectedCallback() முறை முந்தைய மற்றும் அடுத்த பொத்தான்களுக்கு நிகழ்வு கேட்பவர்களைச் சேர்க்கிறது. nextImage() மற்றும் prevImage() முறைகள் தற்போதைய குறியீட்டைப் புதுப்பித்து, கூறின் ரெண்டரிங்கைப் புதுப்பிக்க render() முறையை அழைக்கின்றன. render() முறை நிழல் DOM-ன் உள் HTML-ஐ தற்போதைய படம் மற்றும் பொத்தான்களை உள்ளடக்குமாறு அமைக்கிறது.

தனிப்பயன் உறுப்புகளுடன் பணிபுரிய சிறந்த நடைமுறைகள்

தனிப்பயன் உறுப்புகளுடன் பணிபுரியும்போது பின்பற்ற வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

விளக்கமான உறுப்புப் பெயர்களைப் பயன்படுத்தவும்: கூறின் நோக்கத்தைத் தெளிவாகக் குறிக்கும் உறுப்புப் பெயர்களைத் தேர்ந்தெடுக்கவும்.
உள்ளடக்கத்திற்காக நிழல் DOM-ஐப் பயன்படுத்தவும்: நிழல் DOM ஸ்டைல் மற்றும் ஸ்கிரிப்ட் முரண்பாடுகளைத் தடுக்க உதவுகிறது மற்றும் கூறுகள் கணிக்கக்கூடிய வகையில் செயல்படுவதை உறுதி செய்கிறது.
வாழ்க்கைச் சுழற்சி கால்பேக்குகளைப் பொருத்தமாகப் பயன்படுத்தவும்: உறுப்பைத் துவக்க, பண்புக்கூறு மாற்றங்களுக்குப் பதிலளிக்க, மற்றும் உறுப்பு DOM-ல் இருந்து அகற்றப்படும்போது வளங்களைச் சுத்தம் செய்ய வாழ்க்கைச் சுழற்சி கால்பேக்குகளைப் பயன்படுத்தவும்.
உள்ளமைப்பிற்குப் பண்புக்கூறுகளைப் பயன்படுத்தவும்: கூறின் நடத்தை மற்றும் தோற்றத்தை உள்ளமைக்க பண்புக்கூறுகளைப் பயன்படுத்தவும்.
தொடர்புக்காக நிகழ்வுகளைப் பயன்படுத்தவும்: கூறுகளுக்கு இடையில் தொடர்பு கொள்ள தனிப்பயன் நிகழ்வுகளைப் பயன்படுத்தவும்.
ஒரு பின்வாங்கல் அனுபவத்தை வழங்கவும்: வலைக் கூறுகளை ஆதரிக்காத உலாவிகளுக்கு ஒரு பின்வாங்கல் அனுபவத்தை வழங்குவதைக் கருத்தில் கொள்ளவும். இது முற்போக்கான மேம்பாட்டைப் பயன்படுத்தி செய்யப்படலாம்.
சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) பற்றி சிந்தியுங்கள்: வலைக் கூறுகளை உருவாக்கும்போது, அவை வெவ்வேறு மொழிகள் மற்றும் பிராந்தியங்களில் எவ்வாறு பயன்படுத்தப்படும் என்பதைக் கருத்தில் கொள்ளவும். உங்கள் கூறுகளை எளிதில் மொழிபெயர்க்கவும் உள்ளூர்மயமாக்கவும் வடிவமைக்கவும். உதாரணமாக, அனைத்து உரைச் சரங்களையும் வெளிப்புறப்படுத்தி, மொழிபெயர்ப்புகளை மாறும் வகையில் ஏற்றுவதற்கான வழிமுறைகளை வழங்கவும். உங்கள் தேதி மற்றும் நேர வடிவங்கள், நாணய சின்னங்கள் மற்றும் பிற பிராந்திய அமைப்புகள் சரியாகக் கையாளப்படுவதை உறுதிப்படுத்தவும்.
அணுகல்தன்மை (a11y) கருத்தில் கொள்ளுங்கள்: வலைக் கூறுகள் தொடக்கத்திலிருந்தே அணுகல்தன்மையை மனதில் கொண்டு வடிவமைக்கப்பட வேண்டும். உதவித் தொழில்நுட்பங்களுக்கு சொற்பொருள் தகவலை வழங்க தேவையான இடங்களில் ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும். விசைப்பலகை வழிசெலுத்தல் முழுமையாக ஆதரிக்கப்படுவதையும், பார்வை குறைபாடு உள்ள பயனர்களுக்கு வண்ண வேறுபாடு போதுமானதாக இருப்பதையும் உறுதிப்படுத்தவும். உங்கள் கூறுகளை அவற்றின் அணுகல்தன்மையைச் சரிபார்க்க ஸ்கிரீன் ரீடர்களுடன் சோதிக்கவும்.

தனிப்பயன் உறுப்புகள் மற்றும் கட்டமைப்புகள்

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

React-ல் தனிப்பயன் உறுப்புகளைப் பயன்படுத்துதல்

React-ல் தனிப்பயன் உறுப்புகளைப் பயன்படுத்த, நீங்கள் அவற்றை வேறு எந்த HTML உறுப்பையும் போலவே ரெண்டர் செய்யலாம். இருப்பினும், அடிப்படைக் DOM உறுப்பை அணுகவும் அதனுடன் நேரடியாகத் தொடர்பு கொள்ளவும் நீங்கள் ஒரு ref-ஐப் பயன்படுத்த வேண்டியிருக்கலாம்.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // தனிப்பயன் உறுப்பின் API-ஐ அணுகவும்
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('தனிப்பயன் நிகழ்வு பெறப்பட்டது:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

இந்த எடுத்துக்காட்டில், my-element தனிப்பயன் உறுப்பை அணுகவும் ಅದರಲ್ಲಿ ஒரு நிகழ்வு கேட்பவரைச் சேர்க்கவும் ஒரு ref-ஐப் பயன்படுத்துகிறோம். இது தனிப்பயன் உறுப்பால் அனுப்பப்பட்ட தனிப்பயன் நிகழ்வுகளைக் கேட்கவும் அதற்கேற்ப பதிலளிக்கவும் நம்மை அனுமதிக்கிறது.

Angular-ல் தனிப்பயன் உறுப்புகளைப் பயன்படுத்துதல்

Angular-ல் தனிப்பயன் உறுப்புகளைப் பயன்படுத்த, தனிப்பயன் உறுப்பை அங்கீகரிக்க Angular-ஐ உள்ளமைக்க வேண்டும். இது மாட்யூலின் உள்ளமைவில் உள்ள schemas வரிசையில் தனிப்பயன் உறுப்பைச் சேர்ப்பதன் மூலம் செய்யப்படலாம்.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

தனிப்பயன் உறுப்பு பதிவு செய்யப்பட்டவுடன், உங்கள் Angular டெம்ப்ளேட்டுகளில் அதை வேறு எந்த HTML உறுப்பையும் போலப் பயன்படுத்தலாம்.

Vue.js-ல் தனிப்பயன் உறுப்புகளைப் பயன்படுத்துதல்

Vue.js இயல்பாகவே தனிப்பயன் உறுப்புகளை ஆதரிக்கிறது. எந்தவொரு சிறப்பு உள்ளமைவும் இல்லாமல் உங்கள் டெம்ப்ளேட்டுகளில் அவற்றை நேரடியாகப் பயன்படுத்தலாம்.

Vue தானாகவே தனிப்பயன் உறுப்பை அங்கீகரித்து அதைச் சரியாக ரெண்டர் செய்யும்.

அணுகல்தன்மை பரிசீலனைகள்

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

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

சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கல்

உலகளாவிய பார்வையாளர்களுக்காக தனிப்பயன் உறுப்புகளை உருவாக்கும்போது, சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) ஆகியவற்றைக் கருத்தில் கொள்வது முக்கியம். இங்கே சில முக்கிய பரிசீலனைகள் உள்ளன:

உரை திசை: இடமிருந்து வலம் (LTR) மற்றும் வலமிருந்து இடம் (RTL) ஆகிய இரண்டு உரை திசைகளையும் ஆதரிக்கவும்.
தேதி மற்றும் நேர வடிவங்கள்: வெவ்வேறு இடங்களுக்குப் பொருத்தமான தேதி மற்றும் நேர வடிவங்களைப் பயன்படுத்தவும்.
நாணய சின்னங்கள்: வெவ்வேறு இடங்களுக்குப் பொருத்தமான நாணய சின்னங்களைப் பயன்படுத்தவும்.
மொழிபெயர்ப்பு: உங்கள் கூறுகளில் உள்ள அனைத்து உரைச் சரங்களுக்கும் மொழிபெயர்ப்புகளை வழங்கவும்.
எண் வடிவமைப்பு: வெவ்வேறு இடங்களுக்குப் பொருத்தமான எண் வடிவமைப்பைப் பயன்படுத்தவும்.

முடிவுரை

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

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