பல ஆண்டுகளாக ஒரு போக்கைக் காணும் அளவுக்கு நான் முன்-இறுதி வளர்ச்சியில் இருக்கிறேன்: இளைய டெவலப்பர்கள் அதன் வரலாற்று சூழலைப் புரிந்து கொள்ளாமல் நிரலாக்கத்தின் புதிய முன்னுதாரணத்துடன் பணிபுரிகின்றனர். நிச்சயமாக, ஏதாவது தெரியாது என்பது முற்றிலும் புரிந்துகொள்ளத்தக்கது. வலை என்பது பலதரப்பட்ட திறன்கள் மற்றும் சிறப்புகளைக் கொண்ட மிகப் பெரிய இடமாகும், மேலும் நமக்குத் தெரியாததை எப்போதும் அறிய மாட்டோம். இத்துறையில் கற்றல் என்பது ஒருமுறை நடந்து முடிந்து விடுவதை விட தொடரும் பயணம். கேஸ் இன் பாயிண்ட்: பயனர்கள் UI இல் உள்ள ஒரு குறிப்பிட்ட தாவலில் இருந்து விலகிச் செல்கிறார்களா என்பதைச் சொல்ல முடியுமா என்று எனது குழுவில் உள்ள ஒருவர் கேட்டார். ஜாவாஸ்கிரிப்ட்டின் முன் இறக்கும் நிகழ்வை நான் சுட்டிக்காட்டினேன். ஆனால் இதற்கு முன் இதை சமாளித்தவர்களுக்கு இது சாத்தியம் என்று தெரியும், ஏனென்றால் மற்ற தளங்களில் சேமிக்கப்படாத தரவு பற்றிய விழிப்பூட்டல்களால் அவர்கள் தாக்கப்பட்டுள்ளனர், இதற்கு முன் இறக்குவதற்கு முன் ஒரு பொதுவான பயன்பாடு உள்ளது. எனது சக ஊழியருக்கு, பக்க மறை மற்றும் தெரிவுநிலை நிகழ்வுகளை மாற்றவும். எனக்கு அது எப்படித் தெரிந்தது? இது வேறொரு திட்டத்தில் வந்ததால், ஆரம்பத்தில் ஜாவாஸ்கிரிப்ட் கற்கும் போது நான் அதைப் படித்ததால் அல்ல. உண்மை என்னவென்றால், நவீன முன்-இறுதி கட்டமைப்புகள் அவர்களுக்கு முந்திய தொழில்நுட்ப ஜாம்பவான்களின் தோள்களில் நிற்கின்றன. அவை சுருக்கமான மேம்பாடு நடைமுறைகள், பெரும்பாலும் ஒரு சிறந்த டெவலப்பர் அனுபவத்திற்காக, பாரம்பரியமாக அத்தியாவசியமான முன்-இறுதிக் கருத்தாக்கங்களை அனைவரும் அறிந்திருக்க வேண்டும் என்பதை அறிய அல்லது தொட வேண்டிய அவசியத்தை குறைக்கிறது அல்லது நீக்குகிறது. CSS ஆப்ஜெக்ட் மாடலை (CSSOM) கவனியுங்கள். CSS மற்றும் JavaScript இல் பணிபுரியும் எவருக்கும் CSSOM அனுபவம் இருக்கும் என்று நீங்கள் எதிர்பார்க்கலாம், ஆனால் அது எப்போதும் அப்படி இருக்காது. நான் பணிபுரிந்த ஈ-காமர்ஸ் தளத்திற்கான ரியாக்ட் ப்ராஜெக்ட் உள்ளது, அங்கு தற்போது தேர்ந்தெடுக்கப்பட்ட கட்டண வழங்குநருக்கு ஸ்டைல்ஷீட்டை ஏற்ற வேண்டும். பிரச்சனை என்னவென்றால், ஸ்டைல்ஷீட் ஒரு குறிப்பிட்ட பக்கத்தில் மட்டுமே தேவைப்படும்போது ஒவ்வொரு பக்கத்திலும் ஏற்றப்படுகிறது. இதைச் செய்ய வேண்டிய டெவலப்பர் ஒரு ஸ்டைல்ஷீட்டை டைனமிக் முறையில் ஏற்றவில்லை. மீண்டும், நீங்கள் அடைந்திருக்கக்கூடிய பாரம்பரிய அணுகுமுறையை ரியாக்ட் சுருக்கும்போது இது முற்றிலும் புரிந்துகொள்ளத்தக்கது. CSSOM என்பது உங்கள் அன்றாட வேலைகளில் உங்களுக்குத் தேவையான ஒன்று அல்ல. ஆனால் ஒரு முறை கூட, ஒரு கட்டத்தில் நீங்கள் அதனுடன் தொடர்பு கொள்ள வேண்டியிருக்கும். இந்த அனுபவங்கள் இந்தக் கட்டுரையை எழுதத் தூண்டியது. உங்கள் அன்றாட வேலைகளில் நேரடியாகத் தொடாத பல இணைய அம்சங்கள் மற்றும் தொழில்நுட்பங்கள் காடுகளில் உள்ளன. ஒருவேளை நீங்கள் இணைய மேம்பாட்டிற்கு மிகவும் புதியவராக இருக்கலாம், மேலும் நீங்கள் அவற்றைப் பற்றி அறியாமல் இருக்கலாம், ஏனெனில் நீங்கள் ஒரு குறிப்பிட்ட கட்டமைப்பின் சுருக்கத்தில் மூழ்கியிருப்பீர்கள், அதை நீங்கள் ஆழமாக அறிந்து கொள்ள வேண்டிய அவசியமில்லை. நான் குறிப்பாக XML பற்றி பேசுகிறேன், இது HTML இலிருந்து முற்றிலும் வேறுபட்ட பழங்கால மொழி என்பது நம்மில் பலருக்குத் தெரியும். XSLT புரோகிராமிங் எனப்படும் XML ஸ்டாக்கின் குறிப்பிடத்தக்க பகுதியை உலாவிகளில் இருந்து அகற்ற வேண்டும் என்று சமீபத்திய WHATWG விவாதங்கள் பரிந்துரைத்ததால் இதை நான் கொண்டு வருகிறேன். எனது குழுவில் இருந்த CSSOM சூழ்நிலையைப் போன்ற நடைமுறைக்கு பயன்படுத்தக்கூடிய பழைய, ஏற்கனவே இருக்கும் தொழில்நுட்பம் இதுவே. நீங்கள் இதற்கு முன்பு XSLT உடன் பணிபுரிந்திருக்கிறீர்களா? இந்த பழைய தொழில்நுட்பத்தில் நாம் பெரிதும் சாய்ந்து, இன்றைய நிஜ உலகப் பிரச்சனைகளைச் சமாளிக்க XML இன் சூழலுக்கு வெளியே அதன் அம்சங்களைப் பயன்படுத்துகிறோமா என்பதைப் பார்ப்போம். XPath: மத்திய API நேரான எக்ஸ்எம்எல் முன்னோக்குக்கு வெளியே மிகவும் பயனுள்ளதாக இருக்கும் மிக முக்கியமான எக்ஸ்எம்எல் தொழில்நுட்பம் எக்ஸ்பாத் ஆகும், இது ஒரு வினவல் மொழியாகும், இது ஒரு வேர் உறுப்புடன் மார்க்அப் ட்ரீயில் எந்த முனை அல்லது பண்புக்கூறையும் கண்டறிய உங்களை அனுமதிக்கிறது. XSLT மீது எனக்கு தனிப்பட்ட பாசம் உண்டு, ஆனால் அதுவும் XPath ஐ நம்பியுள்ளது, மேலும் தரவரிசையில் தனிப்பட்ட பாசத்தை ஒதுக்கி வைக்க வேண்டும். XSLT ஐ அகற்றுவதற்கான வாதத்தில் XPath பற்றி எதுவும் குறிப்பிடப்படவில்லை, எனவே இது இன்னும் அனுமதிக்கப்படுகிறது என்று நினைக்கிறேன். இது நல்லது, ஏனெனில் XPath இந்த தொழில்நுட்பத் தொகுப்பில் மையமான மற்றும் மிக முக்கியமான API ஆகும், குறிப்பாக சாதாரண XML பயன்பாட்டிற்கு வெளியே எதையாவது பயன்படுத்த முயற்சிக்கும் போது. இது முக்கியமானது, ஏனெனில், உங்கள் பக்கத்தில் உள்ள பெரும்பாலான கூறுகளைக் கண்டறிய CSS தேர்வாளர்கள் பயன்படுத்தப்பட்டாலும், அவர்களால் அனைத்தையும் கண்டுபிடிக்க முடியாது. மேலும், DOM இல் அதன் தற்போதைய நிலையின் அடிப்படையில் ஒரு உறுப்பைக் கண்டறிய CSS தேர்வாளர்களைப் பயன்படுத்த முடியாது. XPath முடியும். இப்போது, இதைப் படிக்கும் உங்களில் சிலருக்கு XPath தெரிந்திருக்கலாம், சிலருக்கு தெரியாமல் இருக்கலாம். XPath என்பது தொழில்நுட்பத்தின் மிகப் பெரிய பகுதியாகும், மேலும் என்னால் அனைத்து அடிப்படைகளையும் கற்பிக்க முடியாது, மேலும் இதைப் போன்ற ஒரு கட்டுரையில் அதைச் செய்வதற்கான சிறந்த விஷயங்களையும் உங்களுக்குக் காட்ட முடியாது. நான் உண்மையில் அந்தக் கட்டுரையை எழுத முயற்சித்தேன், ஆனால் சராசரி ஸ்மாஷிங் இதழ் வெளியீடு 5,000 வார்த்தைகளுக்கு மேல் போகவில்லை. நான் ஏற்கனவே அதிகமாக இருந்தேன்2,000 வார்த்தைகள், அடிப்படைகள் பாதியிலேயே இருக்கும் போது. எனவே, நான் XPath மூலம் அருமையான விஷயங்களைச் செய்யத் தொடங்கப் போகிறேன், மேலும் இந்த விஷயங்களை நீங்கள் சுவாரஸ்யமாகக் கண்டால், அடிப்படை விஷயங்களுக்குப் பயன்படுத்தக்கூடிய சில இணைப்புகளைத் தருகிறேன். XPath & CSS ஆகியவற்றை இணைத்தல் கூறுகளை வினவும்போது CSS தேர்வாளர்கள் செய்ய முடியாத பல விஷயங்களை XPath செய்ய முடியும். ஆனால் XPath செய்ய முடியாத சில விஷயங்களை CSS தேர்வாளர்கள் செய்ய முடியும், அதாவது, வர்க்கப் பெயரால் உறுப்புகளை வினவலாம்.
CSS எக்ஸ்பாத் .myClass /*[கொண்டுள்ளது(@class, "myClass")]
இந்த எடுத்துக்காட்டில், CSS ஆனது .myClass வகுப்புப் பெயரைக் கொண்ட கூறுகளை வினவுகிறது. இதற்கிடையில், XPath எடுத்துக்காட்டு "myClass" என்ற சரத்துடன் பண்புக்கூறு வகுப்பைக் கொண்டிருக்கும் கூறுகளை வினவுகிறது. வேறு வார்த்தைகளில் கூறுவதானால், இது .myClass வகுப்புப்பெயருடன் கூடிய கூறுகள் உட்பட எந்தப் பண்புக்கூறிலும் myClass உடன் உள்ள உறுப்புகளைத் தேர்ந்தெடுக்கிறது — அதே போல் .myClass2 போன்ற சரத்தில் "myClass" உள்ள உறுப்புகளையும் இது தேர்ந்தெடுக்கிறது. அந்த வகையில் XPath பரந்தது. எனவே, இல்லை. நாம் CSS ஐ தூக்கி எறிந்துவிட்டு XPath வழியாக அனைத்து கூறுகளையும் தேர்ந்தெடுக்க வேண்டும் என்று நான் பரிந்துரைக்கவில்லை. விஷயம் அதுவல்ல. XPath ஆனது CSS செய்ய முடியாத மற்றும் மிகவும் பயனுள்ளதாக இருக்கும் விஷயங்களைச் செய்ய முடியும், இது உலாவி அடுக்கில் உள்ள பழைய தொழில்நுட்பம் மற்றும் முதல் பார்வையில் வெளிப்படையாகத் தெரியவில்லை என்றாலும். இரண்டு தொழில்நுட்பங்களையும் ஒன்றாகப் பயன்படுத்துவோம், ஏனென்றால் எங்களால் முடிந்தால் மட்டும் அல்ல, ஆனால் செயல்பாட்டில் XPath பற்றி ஏதாவது கற்றுக்கொள்வோம், அதை உங்கள் ஸ்டேக்கில் மற்றொரு கருவியாக மாற்றுவோம் - நீங்கள் அறிந்திருக்காத ஒன்று எல்லா நேரங்களிலும் உள்ளது! சிக்கல் என்னவென்றால், JavaScript இன் document.evaluate முறை மற்றும் JavaScriptக்கான CSS APIகளுடன் நாம் பயன்படுத்தும் பல்வேறு வினவல் தேர்வி முறைகள் இணக்கமற்றவை. நாங்கள் தொடங்குவதற்கு இணக்கமான வினவல் API ஐ உருவாக்கியுள்ளேன், ஒப்புக்கொண்டாலும், நாங்கள் இங்கு என்ன செய்கிறோம் என்பதிலிருந்து விலகியதால் நான் அதைப் பற்றி அதிகம் சிந்திக்கவில்லை. மீண்டும் பயன்படுத்தக்கூடிய வினவல் கட்டமைப்பாளரின் மிகவும் எளிமையான வேலை உதாரணம் இங்கே: Bryan Rasmussen எழுதிய Pen queryXPath [forked] ஐப் பார்க்கவும். ஆவணப் பொருளில் இரண்டு முறைகளைச் சேர்த்துள்ளேன்: queryCSSSelectors (இது அடிப்படையில் querySelectorAll) மற்றும் queryXPaths. இவை இரண்டும் வினவல் முடிவுகள் பொருளை வழங்கும்:
{ வினவல் வகை: முனைகள் | சரம் | எண் | பூலியன், முடிவுகள்: ஏதேனும்[] // html கூறுகள், xml கூறுகள், சரங்கள், எண்கள், பூலியன்கள், queryCSSSelectors: (வினவல்: சரம், திருத்தம்: பூலியன்) => வினவல் முடிவுகள், queryXpaths: (வினவல்: சரம், திருத்தம்: பூலியன்) => வினவல் முடிவுகள் }
queryCSSSelectors மற்றும் queryXpaths செயல்பாடுகள், முடிவுகள் வரிசையில் உள்ள உறுப்புகள் மீது நீங்கள் வழங்கும் வினவலை இயக்கும், நிச்சயமாக முடிவுகள் வரிசை வகை முனைகளாக இருக்கும் வரை. இல்லையெனில், அது ஒரு வெற்று வரிசை மற்றும் ஒரு வகை முனைகளுடன் வினவல் முடிவை வழங்கும். திருத்த சொத்து சரி என அமைக்கப்பட்டால், செயல்பாடுகள் அவற்றின் சொந்த வினவல் முடிவுகளை மாற்றும். எந்த சூழ்நிலையிலும் இதை உற்பத்தி சூழலில் பயன்படுத்தக்கூடாது. இரண்டு வினவல் APIகளை ஒன்றாகப் பயன்படுத்துவதால் ஏற்படும் பல்வேறு விளைவுகளை விளக்குவதற்காகவே இதை நான் செய்கிறேன். எடுத்துக்காட்டு வினாக்கள் வெவ்வேறு XPath வினவல்களின் சில உதாரணங்களைக் காட்ட விரும்புகிறேன், அவை சில சக்திவாய்ந்த விஷயங்களைச் செய்யக்கூடியவை மற்றும் பிற அணுகுமுறைகளுக்குப் பதிலாக அவை எவ்வாறு பயன்படுத்தப்படலாம் என்பதை நிரூபிக்கின்றன. முதல் உதாரணம் //li/text(). இது அனைத்து li உறுப்புகளையும் வினவுகிறது மற்றும் அவற்றின் உரை முனைகளை வழங்குகிறது. எனவே, நாம் பின்வரும் HTML ஐ வினவினால்:
- ஒன்று
- இரண்டு
- மூன்று
…இது திருப்பி அனுப்பப்பட்டது:
{"queryType":"xpathEvaluate","முடிவுகள்":["ஒன்று","இரண்டு","மூன்று"],"resultType":"string"}
வேறு வார்த்தைகளில் கூறுவதானால், பின்வரும் வரிசையைப் பெறுகிறோம்: ["ஒன்று", "இரண்டு", "மூன்று"]. பொதுவாக, li உறுப்புகள் அதைப் பெற நீங்கள் வினவுவீர்கள், அந்த வினவலின் முடிவை வரிசையாக மாற்றி, வரிசையை வரைபடமாக்கி, ஒவ்வொரு தனிமத்தின் உரை முனையையும் திரும்பப் பெறுவீர்கள். ஆனால் அதை நாம் XPath மூலம் இன்னும் சுருக்கமாகச் செய்யலாம்: document.queryXPaths("//li/text()").முடிவுகள்.
உரை முனையைப் பெறுவதற்கான வழி டெக்ஸ்ட்()ஐப் பயன்படுத்துவதாகும் என்பதைக் கவனியுங்கள், இது ஒரு செயல்பாட்டு கையொப்பம் போல் தெரிகிறது - அது. இது ஒரு தனிமத்தின் உரை முனையை வழங்குகிறது. எங்கள் எடுத்துக்காட்டில், மார்க்அப்பில் மூன்று லி உறுப்புகள் உள்ளன, ஒவ்வொன்றும் உரையைக் கொண்டிருக்கும் ("ஒன்று", "இரண்டு" மற்றும் "மூன்று").
உரை() வினவலுக்கு மேலும் ஒரு உதாரணத்தைப் பார்ப்போம். இது எங்கள் மார்க்அப் என்று வைத்துக்கொள்வோம்:
href பண்புக்கூறு மதிப்பை வழங்கும் வினவலை எழுதுவோம்: document.queryXPaths("//a[text() = 'Sign In']/@href").முடிவுகள்.
இது கடந்த உதாரணத்தைப் போலவே தற்போதைய ஆவணத்தில் உள்ள XPath வினவல் ஆகும், ஆனால் இந்த முறை "உள்நுழை" என்ற உரையைக் கொண்ட இணைப்பின் (உறுப்பு) href பண்புக்கூறை வழங்குகிறோம். உண்மையானது திரும்பியதுமுடிவு ["/login.html"]. XPath செயல்பாடுகள் மேலோட்டம் பல XPath செயல்பாடுகள் உள்ளன, அவற்றை நீங்கள் அறிந்திருக்க வாய்ப்பில்லை. பின்வருபவை உட்பட, தெரிந்து கொள்ள வேண்டிய பல உள்ளன என்று நான் நினைக்கிறேன்:
ஒரு குறிப்பிட்ட பிற உரை உதாரணத்துடன் ஒரு உரை தொடங்கினால், href பண்புக்கூறு http: உடன் தொடங்கினால், starts-with(@href, 'http:') உண்மை எனத் தரும். ஒரு உரையில் குறிப்பிட்ட பிற உரை உதாரணம் இருந்தால், ஒரு உரை முனையில் “ஸ்மாஷிங் இதழ்” என்ற வார்த்தைகள் இருந்தால், அதில் (உரை(), "ஸ்மாஷிங் மேகசின்") உண்மையாக இருக்கும். ஒரு வினவலுக்கு எத்தனை பொருத்தங்கள் உள்ளன என்ற கணக்கை countReturn செய்கிறது. எடுத்துக்காட்டாக, எண் (//*[starts-with(@href, 'http:']) ஆனது, http: உடன் தொடங்கும் உரையைக் கொண்ட href பண்புக்கூறுடன் கூடிய கூறுகளைக் கொண்ட சூழல் முனையில் எத்தனை இணைப்புகள் உள்ளன என்பதைக் கணக்கிடுகிறது. substring நீங்கள் சரத்தை ஒரு வாதமாக அனுப்பினால் தவிர, ஜாவாஸ்கிரிப்ட் சப்ஸ்ட்ரிங் போல் வேலை செய்கிறது. எடுத்துக்காட்டாக, சப்ஸ்ட்ரிங்("எனது உரை", 2, 4) "y t" ஐ வழங்குகிறது. substring-before ஒரு சரத்தின் பகுதியை மற்றொரு சரத்திற்கு முன் திரும்பும். எடுத்துக்காட்டாக, substing-before("my text", " ") "my" ஐ வழங்குகிறது. இதேபோல், substring-before("hi","bye") ஒரு வெற்று சரத்தை வழங்குகிறது. substring-after ஒரு சரத்தின் பகுதியை மற்றொரு சரத்திற்குப் பின் திரும்பும். எடுத்துக்காட்டாக, substing-after("my text", " ") "text" ஐ வழங்குகிறது. இதேபோல், substring-after("hi","bye") ஒரு வெற்று சரத்தை வழங்குகிறது. normalize-space, முன்னணி மற்றும் பின்தங்கிய இடைவெளியை அகற்றுவதன் மூலமும், இடைவெளி எழுத்துகளின் வரிசைகளை ஒரு இடைவெளியால் மாற்றியமைப்பதன் மூலமும் இயல்பாக்கப்பட்ட இடைவெளியுடன் வாத சரத்தை வழங்குகிறது. notReturns boolean true எனில் வாதம் தவறு, இல்லையெனில் தவறானது. உண்மை திரும்பும் பூலியன் உண்மை. பொய்யான பூலியன் பொய்யை வழங்குகிறது. concat ஜாவாஸ்கிரிப்ட் கான்காட் போலவே, நீங்கள் அதை ஒரு சரத்தில் ஒரு முறையாக இயக்கவில்லை. அதற்கு பதிலாக, நீங்கள் இணைக்க விரும்பும் அனைத்து சரங்களையும் உள்ளிடவும். string-length இது JavaScript சரம் நீளம் போன்றது அல்ல, மாறாக அது ஒரு வாதமாக கொடுக்கப்பட்ட சரத்தின் நீளத்தை வழங்குகிறது. மொழிபெயர்க்க இது ஒரு சரத்தை எடுத்து இரண்டாவது வாதத்தை மூன்றாவது வாதமாக மாற்றுகிறது. எடுத்துக்காட்டாக, மொழியாக்கம் ("abcdef", "abc", "XYZ") வெளியீடுகள் XYZdef.
இந்தக் குறிப்பிட்ட XPath செயல்பாடுகளைத் தவிர, அவற்றின் ஜாவாஸ்கிரிப்ட் சகாக்களைப் போலவே செயல்படும் பல செயல்பாடுகள் உள்ளன - அல்லது அடிப்படையில் எந்த நிரலாக்க மொழியிலும் உள்ள இணைகள் - நீங்கள் தளம், கூரை, வட்டம், தொகை மற்றும் பலவற்றையும் பயனுள்ளதாகக் காணலாம். பின்வரும் டெமோ இந்த செயல்பாடுகள் ஒவ்வொன்றையும் விளக்குகிறது: பிரையன் ராஸ்முசென் எழுதிய பென் எக்ஸ்பாத் எண் செயல்பாடுகளை [ஃபோர்க்] பார்க்கவும். பெரும்பாலான சரம் கையாளுதல் செயல்பாடுகளைப் போலவே, பல எண்கள் ஒரே உள்ளீட்டை எடுத்துக்கொள்கின்றன என்பதை நினைவில் கொள்க. கடந்த XPath எடுத்துக்காட்டில் உள்ளதைப் போல, வினவலுக்கு அவை பயன்படுத்தப்பட வேண்டும் என்பதால், இது நிச்சயமாக உள்ளது: //li[floor(text()) > 250]/@val
பெரும்பாலான எடுத்துக்காட்டுகளைப் போலவே நீங்கள் அவற்றைப் பயன்படுத்தினால், பாதையுடன் பொருந்தக்கூடிய முதல் முனையில் அதை இயக்குவீர்கள். ஜாவாஸ்கிரிப்ட் ஏற்கனவே அதன் சொந்த வகை மாற்று சிக்கல்களைக் கொண்டிருப்பதால் நீங்கள் தவிர்க்க வேண்டிய சில வகை மாற்று செயல்பாடுகளும் உள்ளன. ஆனால் வேறு சில எண்ணுடன் சரிபார்ப்பதற்காக, ஒரு சரத்தை எண்ணாக மாற்ற விரும்பும் நேரங்கள் இருக்கலாம். ஏதோவொன்றின் வகையை அமைக்கும் செயல்பாடுகள் பூலியன், எண், சரம் மற்றும் முனை. இவை முக்கியமான XPath தரவு வகைகளாகும். நீங்கள் நினைப்பது போல், இந்த செயல்பாடுகளில் பெரும்பாலானவை DOM முனைகள் அல்லாத தரவு வகைகளில் பயன்படுத்தப்படலாம். எடுத்துக்காட்டாக, சப்ஸ்ட்ரிங்-ஆஃப்டர் என்பது நாம் ஏற்கனவே கூறியது போல் ஒரு சரத்தை எடுக்கும், ஆனால் அது href பண்புக்கூறின் சரமாக இருக்கலாம். இது ஒரு சரமாகவும் இருக்கலாம்:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
வெளிப்படையாக, இந்த உதாரணம் முடிவு வரிசையை ["உலகம்"] என நமக்குத் தரும். இதை செயலில் காட்ட, DOM நோட்கள் அல்லாத விஷயங்களுக்கு எதிரான செயல்பாடுகளைப் பயன்படுத்தி டெமோ பக்கத்தை உருவாக்கியுள்ளேன்: Bryan Rasmussen எழுதிய Pen queryXPath [forked] ஐப் பார்க்கவும். மொழிபெயர்ப்புச் செயல்பாட்டின் ஆச்சரியமான அம்சத்தை நீங்கள் கவனிக்க வேண்டும், அதாவது, இரண்டாவது வாதத்தில் உங்களிடம் ஒரு எழுத்து இருந்தால் (அதாவது, நீங்கள் மொழிபெயர்க்க விரும்பும் எழுத்துக்களின் பட்டியல்) மற்றும் மொழிபெயர்க்க பொருந்தக்கூடிய எழுத்து இல்லை என்றால், அந்த எழுத்து வெளியீட்டிலிருந்து அகற்றப்படும். எனவே, இது:
மொழிபெயர் ('வணக்கம், என் பெயர் இனிகோ மோன்டோயா, நீங்கள் என் தந்தையைக் கொன்றீர்கள், இறக்கத் தயாராகுங்கள்','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…ஸ்பேஸ்கள் உட்பட சரத்தில் முடிவுகள்: [" * * ** "]
இதன் பொருள் “a” என்ற எழுத்து ஒரு நட்சத்திரமாக (*) மொழிபெயர்க்கப்படுகிறது, ஆனால் இலக்கு சரத்தில் கொடுக்கப்பட்ட மொழிபெயர்ப்பு இல்லாத மற்ற எல்லா எழுத்துகளும் முற்றிலும் அகற்றப்படும். நமக்கு எஞ்சியிருப்பது வெள்ளைவெளி மட்டுமேமொழிபெயர்க்கப்பட்ட "a" எழுத்துகளுக்கு இடையில். மீண்டும், இந்தக் கேள்வி:
மொழிபெயர் ('வணக்கம், என் பெயர் இனிகோ மோன்டோயா, நீங்கள் என் தந்தையைக் கொன்றீர்கள், இறப்பதற்குத் தயாராகுங்கள்','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','***********************************************************************************************************************
…பிரச்சனை இல்லை மற்றும் இது போன்ற ஒரு முடிவை வெளியிடுகிறது:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** **"
XPath மொழி பெயர்ப்புச் செயல்பாடுகளைச் சரியாகச் செய்வதற்கு JavaScript இல் எளிதான வழி எதுவுமில்லை என்பது உங்களைத் தாக்கும், இருப்பினும் பல பயன்பாட்டு நிகழ்வுகளுக்கு, அனைத்தையும் வழக்கமான வெளிப்பாடுகளுடன் மாற்றியமைக்கலாம். நான் நிரூபித்த அதே அணுகுமுறையை நீங்கள் பயன்படுத்தலாம், ஆனால் நீங்கள் விரும்பியதெல்லாம் சரங்களை மொழிபெயர்க்க வேண்டும் என்றால் அது உகந்ததாகும். ஜாவாஸ்கிரிப்ட் பதிப்பை வழங்க, XPath இன் மொழிபெயர்ப்புச் செயல்பாட்டை பின்வரும் டெமோ மூடுகிறது: பிரையன் ராஸ்முசென் எழுதிய பேனா மொழி பெயர்ப்பு செயல்பாட்டைப் பார்க்கவும். இதுபோன்ற ஒன்றை நீங்கள் எங்கே பயன்படுத்தலாம்? சீசர் சைஃபர் என்க்ரிப்ஷனை மூன்று இட ஆஃப்செட் (எ.கா., 48 கி.மு. முதல் வரி குறியாக்கம்):
மொழிபெயர் ("சீசர் ரூபிகானை கடக்க திட்டமிட்டுள்ளார்!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
உள்ளீட்டு உரை “சீசர் ரூபிகானை கடக்க திட்டமிட்டுள்ளார்!” முடிவுகள் "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" வெவ்வேறு சாத்தியக்கூறுகளுக்கு மற்றொரு விரைவான உதாரணம் கொடுக்க, நான் ஒரு உலோகச் செயல்பாட்டைச் செய்துள்ளேன், அது ஒரு சரம் உள்ளீட்டை எடுக்கும் மற்றும் உரையை திரும்பப் பெறுவதற்கு மொழியாக்க செயல்பாட்டைப் பயன்படுத்துகிறது, இதில் umlauts எடுக்கும் அனைத்து எழுத்துகளும் அடங்கும். பிரையன் ராஸ்முசென் எழுதிய பென் மெட்டல் செயல்பாட்டைப் பார்க்கவும்.
கான்ஸ்ட் உலோகம் = (str) => { திரும்ப மொழிபெயர்(str, "AOUaou","ÄÖÜäöü"); }
மேலும், “மோட்லி க்ரூ ரூல்ஸ், ராக் ஆன் டூட்ஸ்!” என்ற உரையைக் கொடுத்தால், “மொட்லி க்ரூ ரூல்ஸ், ராக் ஆன் டியூட்ஸ்!” என்று திரும்பும். வெளிப்படையாக, இந்த செயல்பாட்டின் அனைத்து வகையான பகடி பயன்பாடுகளையும் ஒருவர் கொண்டிருக்கலாம். அது நீங்கள் என்றால், இந்த TVTropes கட்டுரை உங்களுக்கு நிறைய உத்வேகத்தை அளிக்க வேண்டும். XPath உடன் CSS ஐப் பயன்படுத்துதல் XPath உடன் CSS தேர்வாளர்களைப் பயன்படுத்துவதற்கான எங்கள் முக்கிய காரணத்தை நினைவில் கொள்ளுங்கள்: CSS ஆனது வகுப்பு என்றால் என்ன என்பதைப் புரிந்துகொள்கிறது, அதேசமயம் XPath மூலம் நீங்கள் செய்யக்கூடியது வகுப்பு பண்புக்கூறின் சரம் ஒப்பீடு ஆகும். இது பெரும்பாலான சந்தர்ப்பங்களில் வேலை செய்யும். ஆனால் நீங்கள் எப்போதாவது .primaryLinks மற்றும் .primaryLinks2 என்ற பெயரில் வகுப்புகளை உருவாக்கி, .primaryLinks வகுப்பைப் பெற XPath ஐப் பயன்படுத்தினால், நீங்கள் எப்போதாவது சிக்கல்களைச் சந்திக்க நேரிடும். அது போன்ற முட்டாள்தனமான எதுவும் இல்லாத வரை, நீங்கள் XPath ஐப் பயன்படுத்தலாம். ஆனால் இதுபோன்ற முட்டாள்தனமான செயல்களை மக்கள் செய்யும் இடங்களில் நான் பணிபுரிந்தேன் என்பதை வருத்தத்துடன் தெரிவிக்கிறேன். CSS மற்றும் XPath ஆகியவற்றைப் பயன்படுத்தும் மற்றொரு டெமோ இதோ. ஆவணத்தின் முனை அல்லாத சூழல் முனையில் எக்ஸ்பாத்தை இயக்க குறியீட்டைப் பயன்படுத்தும்போது என்ன நடக்கும் என்பதை இது காட்டுகிறது. Bryan Rasmussen எழுதிய Pen css மற்றும் xpath ஆகியவற்றை ஒன்றாகப் பார்க்கவும். CSS வினவல் என்பது .relatedarticles a ஆகும், இது .relatedarticles வகுப்பிற்கு ஒதுக்கப்பட்ட ஒரு div இல் உள்ள இரண்டு a உறுப்புகளைப் பெறுகிறது. அதன் பிறகு மூன்று "மோசமான" வினவல்கள், அதாவது, இந்த கூறுகளை சூழல் முனையாகக் கொண்டு இயங்கும்போது நாம் என்ன செய்ய வேண்டும் என்று விரும்புகிறோமோ அதைச் செய்யாத வினவல்கள். நீங்கள் எதிர்பார்ப்பதை விட அவர்கள் ஏன் வித்தியாசமாக நடந்து கொள்கிறார்கள் என்பதை என்னால் விளக்க முடியும். கேள்விக்குரிய மூன்று மோசமான கேள்விகள்:
//text(): ஆவணத்தில் உள்ள அனைத்து உரைகளையும் வழங்கும். //a/text(): ஆவணத்தில் உள்ள இணைப்புகளுக்குள் உள்ள அனைத்து உரைகளையும் வழங்கும். ./a/text(): எந்த முடிவுகளையும் தரவில்லை.
இந்த முடிவுகளுக்கான காரணம் என்னவென்றால், உங்கள் சூழல் CSS வினவலில் இருந்து திரும்பிய உறுப்புகளாக இருக்கும் போது, // முழு ஆவணத்திற்கும் எதிரானது. இது XPath இன் பலம்; CSS ஆனது ஒரு முனையிலிருந்து ஒரு மூதாதையர் வரை சென்று பின்னர் அந்த மூதாதையரின் உடன்பிறந்தவர் வரை சென்று, அந்த உடன்பிறந்தவரின் வழித்தோன்றலுக்குச் செல்ல முடியாது. ஆனால் XPath முடியும். இதற்கிடையில், ./ தற்போதைய முனையின் குழந்தைகளை வினவுகிறது, அங்கு புள்ளி (.) தற்போதைய முனையைக் குறிக்கிறது, மேலும் முன்னோக்கி சாய்வு (/) என்பது சில சைல்டு நோட்களுக்குச் செல்வதைக் குறிக்கிறது - இது ஒரு பண்புக்கூறு, உறுப்பு அல்லது உரை என்பது பாதையின் அடுத்த பகுதியால் தீர்மானிக்கப்படுகிறது. ஆனால் CSS வினவலால் தேர்ந்தெடுக்கப்பட்ட ஒரு உறுப்பு எதுவும் இல்லை, இதனால் அந்த வினவல் எதையும் கொடுக்காது. அந்த கடைசி டெமோவில் மூன்று நல்ல கேள்விகள் உள்ளன:
.//உரை(), ./text(), normalize-space(./text()).
இயல்பாக்க-இட வினவல் XPath செயல்பாட்டு பயன்பாட்டை நிரூபிக்கிறது, ஆனால் மற்ற வினவல்களில் உள்ள சிக்கலையும் சரிசெய்கிறது. HTML பின்வருமாறு கட்டமைக்கப்பட்டுள்ளது:
செலினியம் வெப்டிரைவர் மூலம் உங்கள் அம்ச சோதனையை தானியக்கமாக்குகிறது
வினவல் உரை முனையின் தொடக்கத்திலும் முடிவிலும் ஒரு வரி ஊட்டத்தை வழங்குகிறது,மற்றும் normalize-space இதை நீக்குகிறது. உள்ளீடு XPath உடன் பூலியனைத் தவிர வேறு எதையாவது வழங்கும் XPath செயல்பாட்டைப் பயன்படுத்துவது மற்ற செயல்பாடுகளுக்குப் பொருந்தும். பின்வரும் டெமோ பல எடுத்துக்காட்டுகளைக் காட்டுகிறது: Bryan Rasmussen எழுதிய பென் xpath செயல்பாடுகளின் எடுத்துக்காட்டுகளைப் பார்க்கவும். முதல் உதாரணம் நீங்கள் கவனிக்க வேண்டிய ஒரு சிக்கலைக் காட்டுகிறது. குறிப்பாக, பின்வரும் குறியீடு:
document.queryXPaths("substring-after(//a/@href,'https://')");
…ஒரு சரத்தை வழங்குகிறது:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
இது அர்த்தமுள்ளதாக இருக்கிறது, இல்லையா? இந்த செயல்பாடுகள் வரிசைகளை வழங்காது, மாறாக ஒற்றை சரங்கள் அல்லது ஒற்றை எண்களை வழங்குகின்றன. பல முடிவுகளுடன் செயல்பாட்டை எங்கும் இயக்குவது முதல் முடிவை மட்டுமே வழங்கும். இரண்டாவது முடிவு நாம் உண்மையில் விரும்புவதைக் காட்டுகிறது:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
இது இரண்டு சரங்களின் வரிசையை வழங்குகிறது:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
ஜாவாஸ்கிரிப்டில் உள்ள செயல்பாடுகளைப் போலவே எக்ஸ்பாத் செயல்பாடுகளும் உள்ளமைக்கப்படலாம். எனவே, ஸ்மாஷிங் இதழின் URL கட்டமைப்பை நாங்கள் அறிந்திருந்தால், பின்வருவனவற்றைச் செய்யலாம் (வார்ப்புரு எழுத்துக்களைப் பயன்படுத்துவது பரிந்துரைக்கப்படுகிறது): மொழிபெயர் துணை சரம் substring-after(./@href, ‘www.smashingmagazine.com/') ,9), '/','')`
இது என்ன செய்கிறது என்பதை விவரிக்கும் கருத்துகள் தேவைப்படும் அளவுக்கு இது சற்று சிக்கலானதாகி வருகிறது: www.smashingmagazine.com/ க்குப் பிறகு href பண்புக்கூறிலிருந்து அனைத்து URLகளையும் எடுத்து, முதல் ஒன்பது எழுத்துகளை அகற்றி, பின் முன்னோக்கி சாய்வு (/) எழுத்தை ஒன்றும் இல்லாமல் மொழிபெயர்க்கவும். இதன் விளைவாக வரும் வரிசை:
["feature-testing-selenium-webdriver","தானியங்கி-சோதனை முடிவுகள்-மேம்படுத்த-அணுகல்தன்மை"]
மேலும் XPath பயன்பாட்டு வழக்குகள் XPath உண்மையில் சோதனையில் பிரகாசிக்க முடியும். காரணத்தைப் பார்ப்பது கடினம் அல்ல, ஏனெனில் DOM இல் உள்ள ஒவ்வொரு உறுப்பையும் DOM இல் உள்ள எந்த நிலையிலிருந்தும் பெற XPath பயன்படுத்தப்படலாம், ஆனால் CSS இல் முடியாது. பல நவீன உருவாக்க அமைப்புகளில் CSS வகுப்புகள் சீராக இருப்பதை நீங்கள் நம்ப முடியாது, ஆனால் XPath மூலம், DOM கட்டமைப்பை மாற்றினாலும், ஒரு உறுப்பின் உரை உள்ளடக்கம் என்ன என்பதை நாங்கள் மிகவும் வலுவான பொருத்தங்களை உருவாக்க முடியும். நெகிழ்வான XPath சோதனைகளைச் செய்ய உங்களை அனுமதிக்கும் நுட்பங்கள் பற்றிய ஆராய்ச்சி உள்ளது. ஏதாவது மறுபெயரிடப்பட்டதாலோ அல்லது அகற்றப்பட்டதாலோ, CSS தேர்வி வேலை செய்யாது என்பதால், சோதனைகள் வெடித்து தோல்வியடைவதை விட மோசமானது எதுவுமில்லை. XPath பல லொக்கேட்டர் பிரித்தெடுப்பதில் மிகவும் சிறந்தது. ஒரு உறுப்பைப் பொருத்த XPath வினவல்களைப் பயன்படுத்த ஒன்றுக்கு மேற்பட்ட வழிகள் உள்ளன. CSS விஷயத்திலும் இதுவே உண்மை. ஆனால் XPath வினவல்கள், திரும்பப் பெறப்படுவதைக் கட்டுப்படுத்தும் வகையில், பல சாத்தியமான பொருத்தங்கள் இருக்கும் இடத்தில் ஒரு குறிப்பிட்ட பொருத்தத்தைக் கண்டறிய உங்களை அனுமதிக்கிறது. எடுத்துக்காட்டாக, ஒரு உடன்பிறப்பு div ஐ உடனடியாகப் பின்தொடரும் ஒரு div க்குள் இருக்கும் ஒரு குறிப்பிட்ட h2 உறுப்பைத் திருப்பித் தர XPath ஐப் பயன்படுத்தலாம்.
இந்தத் தலைப்பைப் பெறவில்லை
இந்தத் தலைப்பையும் பெற வேண்டாம்
தலைவர் படத்திற்கான தலைப்பு
இதுதான் வினா: document.queryXPaths(` //டிவி[ பின்வரும்-உடன்பிறப்பு::div[1] /img[@data-testID='leader'] ] /h2/ உரை() `);
இவை அனைத்தும் எவ்வாறு ஒன்றிணைகின்றன என்பதைப் பார்க்க ஒரு டெமோவைக் காண்போம்: Bryan Rasmussen எழுதிய பென் காம்ப்ளக்ஸ் H2 வினவல் [ஃபோர்க்டு] பார்க்கவும். எனவே, ஆம். XPath ஐப் பயன்படுத்தி ஒரு சோதனையில் எந்த உறுப்புக்கும் பல சாத்தியமான பாதைகள் உள்ளன. XSLT 1.0 தேய்மானம் உலாவியில் இருந்து XSLT 1.0 ஆதரவை அகற்ற Chrome குழு திட்டமிட்டுள்ளதாக நான் ஆரம்பத்தில் குறிப்பிட்டேன். இது முக்கியமானது, ஏனெனில் XSLT 1.0 ஆனது XML-மையப்படுத்தப்பட்ட நிரலாக்கத்தை ஆவண மாற்றத்திற்காகப் பயன்படுத்துகிறது, இது XPath 1.0 ஐ நம்பியுள்ளது, இது பெரும்பாலான உலாவிகளில் காணப்படுகிறது. அது நிகழும்போது, XPath இன் முக்கிய அங்கத்தை இழப்போம். ஆனால் எக்ஸ்பாத் தேர்வு எழுதுவதற்கு மிகவும் சிறந்தது என்ற உண்மையைப் பொறுத்தவரை, எக்ஸ்பாத் முழுவதுமாக எந்த நேரத்திலும் மறைந்துவிடும் என்பது சாத்தியமில்லை. ஒரு அம்சம் அகற்றப்படும்போது மக்கள் அதில் ஆர்வம் காட்டுவதை நான் கவனித்தேன். XSLT 1.0 நிராகரிக்கப்படும் விஷயத்தில் அது நிச்சயமாக உண்மைதான். ஹேக்கர் நியூஸில், பணமதிப்பு நீக்கத்திற்கு எதிரான வாதங்கள் நிறைந்த ஒரு முழு விவாதமும் நடக்கிறது. XSLT உடன் பிளாக்கிங் கட்டமைப்பை உருவாக்குவதற்கு இந்த இடுகையே சிறந்த எடுத்துக்காட்டு. நீங்கள்விவாதத்தை உங்களுக்காகப் படிக்கலாம், ஆனால் அந்த வகையான நிகழ்வுகளைக் கையாள XLSTக்கான ஷிம்மாக ஜாவாஸ்கிரிப்ட் எப்படிப் பயன்படுத்தப்படலாம் என்பதைப் பற்றியது. ஜாவாஸ்கிரிப்ட்டின் சாக்சன் எக்ஸ்எஸ்எல்டி, எக்ஸ்குவெரி மற்றும் எக்ஸ்பாத் இன்ஜின்களுக்கான போர்ட்டாக இருக்கும் சாக்சன்ஜேஎஸ் உலாவிகளைப் பயன்படுத்த வேண்டும் என்ற பரிந்துரைகளையும் நான் பார்த்திருக்கிறேன். இது ஒரு சுவாரஸ்யமான யோசனை, குறிப்பாக Saxon-JS இந்த விவரக்குறிப்புகளின் தற்போதைய பதிப்பைச் செயல்படுத்துகிறது, அதேசமயம் 1.0க்கு அப்பால் XPath அல்லது XSLT இன் எந்தப் பதிப்பையும் செயல்படுத்தும் உலாவி இல்லை, மேலும் XQuery ஐ செயல்படுத்துவது எதுவுமில்லை. SaxonJS மற்றும் Saxon இன்ஜினின் பிற பதிப்புகளுக்குப் பின்னால் உள்ள நிறுவனமான Saxonica இல் உள்ள Norm Tovey-Walsh ஐ நான் தொடர்பு கொண்டேன். அவர் கூறியதாவது: "நவீன எக்ஸ்எம்எல் தொழில்நுட்பங்களை உலாவியில் ஒருங்கிணைப்பதற்கான தொடக்கப் புள்ளியாக SaxonJS ஐ எடுத்துக்கொள்வதில் எந்த உலாவி விற்பனையாளரும் ஆர்வமாக இருந்தால், அவர்களுடன் அதைப் பற்றி விவாதிக்க நாங்கள் மகிழ்ச்சியடைவோம்." - நார்ம் டோவி-வால்ஷ்
ஆனால் மேலும் சேர்க்கப்பட்டது: "SaxonJS ஐ அதன் தற்போதைய வடிவத்தில் எடுத்து, அதை உலாவியின் கட்டமைப்பில் மாற்றாமல் விடுவது சிறந்த அணுகுமுறையாக இருக்கும் என்று யாராவது நினைத்தால் நான் மிகவும் ஆச்சரியப்படுவேன். ஒரு உலாவி விற்பனையாளர், அவர்கள் உலாவியை உருவாக்குவதன் மூலம், நாம் 'வெளியில் இருந்து' அணுகுவதை விட மிக ஆழமான அளவில் ஒருங்கிணைப்பை அணுக முடியும்." - Norm Tovey-Walsh
டோவி-வால்ஷின் கருத்துக்கள் XSLT மதிப்பிழப்பு அறிவிப்புக்கு ஒரு வாரத்திற்கு முன்பு வந்தது என்பது குறிப்பிடத்தக்கது. முடிவுரை நான் தொடர்ந்து செல்ல முடியும். ஆனால் இது XPath இன் சக்தியை நிரூபித்துள்ளது மற்றும் சிறந்த விஷயங்களை அடைய அதை எவ்வாறு பயன்படுத்துவது என்பதை நிரூபிக்கும் ஏராளமான எடுத்துக்காட்டுகளை உங்களுக்கு வழங்கியிருப்பதாக நம்புகிறேன். உலாவி அடுக்கில் உள்ள பழைய தொழில்நுட்பத்திற்கு இது ஒரு சிறந்த எடுத்துக்காட்டு, இது இன்றும் ஏராளமான பயன்பாடுகளைக் கொண்டுள்ளது, அது இருப்பதை நீங்கள் அறிந்திருக்காவிட்டாலும் அல்லது அதை அடைய நினைக்கவில்லை என்றாலும். மேலும் படித்தல்
"இயற்கை மொழியுடன் தானியங்கி இணைய சோதனைகளின் நெகிழ்ச்சித்தன்மையை மேம்படுத்துதல்" (ACM டிஜிட்டல் லைப்ரரி) மரூன் அய்லி, யூசுப் பகூனி, நாடர் ஜல்லோல் மற்றும் ரீமா கிலானி ஆகியோரால் இந்த கட்டுரை நெகிழ்ச்சியான சோதனைகளை எழுதுவதற்கான பல எக்ஸ்பாத் எடுத்துக்காட்டுகளை வழங்குகிறது. XPath (MDN) XPath எவ்வாறு செயல்படுகிறது என்பதை விவரிக்கும் தொழில்நுட்ப விளக்கத்தை நீங்கள் விரும்பினால், இது ஒரு சிறந்த இடமாகும். எக்ஸ்பாத் டுடோரியல் (ZVON)எனது சொந்தக் கற்றலில் இந்தப் பயிற்சி மிகவும் உதவிகரமாக இருப்பதைக் கண்டேன், ஏராளமான எடுத்துக்காட்டுகள் மற்றும் தெளிவான விளக்கங்களுக்கு நன்றி. XPatherஇந்த ஊடாடும் கருவி நீங்கள் குறியீட்டுடன் நேரடியாக வேலை செய்ய உதவுகிறது.
