இணைய ஆக்கக்கூறுகள்(Web components)என்பவை ஜாவாஸ்கிரிப்ட்,HTML போன்ற திறமூல தொழில்நுட்பங்களின் தொகுப்பாகும், அவை இணைய பயன்பாடுகளில் நாம் மீண்டும் மீண்டும் பயன்படுத்தக்கூடிய தனிப்பயன் உறுப்புகளை உருவாக்க அனுமதிக்கிறது. நாம் உருவாக்குகின்ற ஆக்கக்கூறுகளானவை நம்மிடம் மீதமுள்ள குறிமுறைவரிகளிலிருந்து சுதந்திரமானவை, எனவே அவை பல செயல் திட்டங்களில் மீண்டும் பயன்படுத்த எளிதானது.எல்லாவற்றிற்கும் மேலாக, இது முக்கிய அனைத்து நவீன இணைய உலாவிகளாலும் ஆதரிக்கப்படும் ஒரு தளமாகும்.
ஒரு இணைய ஆக்கக்கூறில் என்னென்ன இருக்கின்றன?
தனிப்பயன்உறுப்புகள்: இது JavaScript API இல் புதிய வகை HTML உறுப்புகளை வரையறுக்க நம்மை அனுமதிக்கிறது.
நிழலானஆவணப் பொருள் மாதிரி (DOM): இது JavaScript API இல் ஒரு உறுப்புடன் மறைக்கப்பட்ட தனி ஆவணப் பொருள் மாதிரியை (DOM) இணைக்க ஒரு வழியை வழங்குகிறது. பாணி, மார்க்அப் கட்டமைப்பு , நடத்தை பக்கத்தில் உள்ள மற்ற குறிமுறைவரிகளிலிருந்து தனிமைப்படுத்தப்படுவதன் மூலம் இது நம்முடைய இணைய ஆக்கக்கூறுகளை இணைக்கிறது. பாணிகளானவை வெளிப்புற பாணிகளால் மீறப்படுவதை உறுதி செய்கிறது அல்லது மாறாக, நம்முடைய இணைய ஆக்கக்கூறுகளிலிருந்து பாணியானது மீதமுள்ள பக்கத்திற்கு “கசியாது”.
HTML வார்ப்புருக்கள்: மீண்டும் பயன்படுத்தக்கூடிய DOM உறுப்புகளை வரையறுக்க இதனுடைய உறுப்பு நம்மை அனுமதிக்கிறது. இந்தஉறுப்பும் அதன் உள்ளடக்கங்களும் DOM இல் வழங்கப்படவில்லை ஆனால் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி இதனை குறிப்பிடலாம்.
முதல் இணைய ஆக்கக்கூறுகளை எழுதுதல்
நமக்கு பிடித்த உரை பதிப்பாளர், ஜாவாஸ்கிரிப்ட் ஆகியவற்றின் மூலம் ஒரு எளிய இணைய ஆக்கக்கூறினை எளிதாக உருவாக்கலாம். எளிய பாணியை உருவாக்க இந்த முன்னோடியை எவ்வாறு பயன்படுத்துவது என்பது ஒரு பண்புக்கூறாக இருக்கின்றஇடத்தின் வெப்பநிலையைக் காண்பிக்க ஒரு எளிய அட்டையின் இணைய ஆக்கக்கூறுகளை உருவாக்குகிறது. இந்த ஆக்கக்கூறு திறந்த வானிலையின் API ஐப் பயன்படுத்துகிறது, இதற்குள் உள்நுழைவதன் மூலம் ஒரு APPID/APIKey ஐ உருவாக்கிடுக.
இந்த இணையஆக்கக்கூறுகளை அழைப்பதற்கான தொடரியலுக்கு இருப்பிடத்தின் தீர்க்கரேகை , அட்சரேகை ஆகியவை தேவைப்படுகிறது:
<weather-card longitude=’85.8245′ latitude=’20.296′ />
இதற்காக Weather-card.js என்ற கோப்பை மேலேகூறிய கட்டளைவரியின் வாயிலாக உருவாக்கிடுக, அதில் நம்முடைய இணைய ஆக்கக்கூறுக்கான அனைத்து குறிமுறைவரிகளும் இருக்கும். நம்முடைய ஆக்கக்கூறுகளை வரையறுப்பதன் மூலம் பணியை தொடங்கிடுக. ஒரு மாதிரிபலகத்தின் உறுப்பை உருவாக்கி சில எளிய HTML ஆக்கக்கூறுகளைச் சேர்ப்பதன் மூலம் இதைச் செய்யலாம்:
const template = document.createElement(‘template’);
template.innerHTML = `
<div class=”card”>
<div class=”card-body”></div>
</div>
இணைய கூறின் இனம்,அதன் கட்டமைப்பாளரை வரையறுக்கத் தொடங்கிடுக:
class WeatherCard extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({ ‘mode’: ‘open’ });
this._shadowRoot.appendChild(template.content.cloneNode(true));
}
….
}
கட்டமைப்பாளரானது நிழல்மூலத்தினைஇணைத்து அதை திறந்த பயன்முறையில் அமைக்கின்றது. பின்னர் வார்ப்புரு நிழல்மூலத்திற்கு நகலி எடுக்கப்படுகிறது.
அடுத்து, பண்புகளை அணுகிடுக. இவை தீர்க்கரேகை, அட்சரேகை, திறந்த வானிலையின் API க்கு GET கோரிக்கையை எழுப்பிடுக. இணைக்கப்பட்ட அழைப்பு செயல்பாட்டில் இதைச் செய்திடுக. பண்புகளை அணுகுவதற்கு getAttribute வழிமுறையைப் பயன்படுத்தலாம் அல்லது இந்த பொருளுடன் பிணைக்க பெறுபவைகளை வரையறுக்கலாம்:
get longitude() {
return this.getAttribute(‘longitude’);
}
get latitude() {
return this.getAttribute(‘latitude’);
}
இப்போது connected CallBacவழி முறையை வரையறுத்திடுக, அது நினைவகத்தில் ஏற்றப்படும் போதெல்லாம் வானிலை தரவுகளைப் பெறுகிறது:
connectedCallback() {
var xmlHttp = new XMLHttpRequest();
const url = `http://api.openweathermap.org/data/2.5/weather?lat=${this.latitude}&lon=${this.longitude}&appid=API_KEY`
xmlHttp.open(“GET”, url, false);
xmlHttp.send(null);
this.$card = this._shadowRoot.querySelector(‘.card-body’);
let responseObj = JSON.parse(xmlHttp.responseText);
let $townName = document.createElement(‘p’);
$townName.innerHTML = `Town: ${responseObj.name}`;
this._shadowRoot.appendChild($townName);
let $temperature = document.createElement(‘p’);
$temperature.innerHTML = `${parseInt(responseObj.main.temp – 273)} °C`
this._shadowRoot.appendChild($temperature);
}
வானிலையின் தரவுகள மீட்டெடுக்கப்பட்டவுடன், கூடுதலான HTML ஆக்கக்கூறுகள் வார்ப்புருவில் சேர்க்கப்படுகின்றன. இப்போது, நம்முடைய இனம் வரையறுக்கப் பட்டுள்ளது.
இறுதியாக, இந்த வழிமுறையைப் பயன்படுத்தி புதிய தனிப்பயன் உறுப்பை வரையறுத்து பதிவு செய்திடுக
window.customElements.define:
window.customElements.define(‘weather-card’, WeatherCard);
முதல் தருமதிப்பு தனிப்பயன் உறுப்பின் பெயர், இரண்டாவது தருமதிப்பு வரையறுக்கப்பட்டஇனமாகும். gist.github.com/rkpattnaik780/acc683d3796102c26c1abb03369e31f8எனும் இணையதள முகவரியில் இதனுடைய முழு ஆக்கக் கூறுகள் உள்ளன.இப்போது நம்முடைய முதன்முதலான இணையஆக்கக்கூறினை உருவாக்கிவிட்டோம் அதனால் தற்போது இதனை DOM இற்கு கொண்டுவரவேண்டிய நேரமாகும் அவ்வாறு செய்வதற்கு நம்முடைய HTML கோப்பினை நம்முடைய இணையஆக்கக்கூறு வரையறையுடன் ஜாவாஸ்கிரிப்ட் கோப்பை ஏற்றிடுக (அதற்கு பெயர் index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
</head>
<body>
<weather-card longitude=’85.8245′ latitude=’20.296′></weather-card>
<script src=’./weather-card.js’></script>
</body>
</html>
நம்முடைய இணையஆக்கக்கூறு ஒரு இணையஉலாவியில் பின்வருமாறு அமைந்திருக்கின்றது.
இணையஆக்கக்கூறுகளுக்கு HTML, CSS, ஜாவாஸ்கிரிப்ட் ஆகியவை மட்டுமே தேவைப்படுவதால், அவை இணைய உலாவிகளால் ஆதரிக்கப்படுகின்றன மேலும் React , Vue உள்ளிட்ட முன்புற கட்டமைப்புகளுடன் தடையின்றி பயன்படுத்தலாம். பின்வரும் எளிய குறிமுறைவரிகளின் துணுக்கை React எனும் செயலியுடன் முன்னோடியாக்கப்பட்ட எளிய Reactபயன்பாட்டின் மூலம் இணைய ஆக்கக்கூறுகளை எவ்வாறு பயன்படுத்துவது என்பதை காட்டுகிறது. இதற்காக, முன்பு வரையறுக்கப்பட்ட வானிலை- card.js கோப்பை பதிவிறக்கம் செய்து அதை ஒரு அங்கமாகப் பயன்படுத்திடுக:
import ‘./App.css’;
import ‘./weather-card’;
function App() {
return (
<weather-card longitude=’85.8245′ latitude=’20.296′></weather-card>
);
}
export default App;