म धेरै वर्षहरूमा एक प्रवृत्ति हेर्नको लागि फ्रन्ट-एन्ड विकासमा छु: युवा विकासकर्ताहरूले यसको ऐतिहासिक सन्दर्भलाई नबुझेर प्रोग्रामिङको नयाँ प्रतिमानसँग काम गरिरहेका छन्। यो, निस्सन्देह, केहि थाहा छैन पूर्णतया बुझ्न योग्य छ। वेब सीप र विशेषताहरूको विविध सेटको साथ एक धेरै ठूलो ठाउँ हो, र हामीलाई सधैं थाहा छैन के हामीलाई थाहा छैन। यस क्षेत्रमा सिक्नु भनेको एक पटक हुने र अन्त्य हुने कुराको सट्टा निरन्तर यात्रा हो। बिन्दुमा केस: मेरो टोलीमा कसैले सोध्यो कि यदि प्रयोगकर्ताहरूले UI मा एक विशेष ट्याबबाट नेभिगेट गर्छन् भने भन्न सम्भव छ। मैले जाभास्क्रिप्टको अनलोड घटना अघि औंल्याएँ। तर जसले पहिले नै यसलाई सम्बोधन गरिसकेका छन् उनीहरूलाई थाहा छ यो सम्भव छ किनभने उनीहरूलाई अन्य साइटहरूमा सुरक्षित नगरिएको डाटाको बारेमा अलर्टहरू दिइएका छन्, जसको लागि पहिले अनलोड एक सामान्य प्रयोग केस हो। मैले राम्रो उपायको लागि मेरो सहकर्मीलाई पृष्ठहाइड र दृश्यता परिवर्तन घटनाहरू पनि औंल्याएँ। मलाई यसको बारेमा कसरी थाहा भयो? किनभने यो अर्को प्रोजेक्टमा आयो, किनभने मैले सुरुमा जाभास्क्रिप्ट सिक्दै गर्दा यसमा अध्ययन गरें। तथ्य यो हो कि आधुनिक फ्रन्ट-एन्ड फ्रेमवर्कहरू पहिलेका टेक्नोलोजी दिग्गजहरूको काँधमा खडा छन्। तिनीहरू अमूर्त विकास अभ्यासहरू, प्राय: राम्रो विकासकर्ता अनुभवको लागि जसले कम गर्छ, वा हटाउन पनि, जान्न वा छुनु पर्ने आवश्यकतालाई परम्परागत रूपमा आवश्यक फ्रन्ट-एन्ड अवधारणाहरू सबैले थाहा पाउनुपर्छ। CSS वस्तु मोडेल (CSSOM) लाई विचार गर्नुहोस्। तपाईले अपेक्षा गर्न सक्नुहुन्छ कि CSS र JavaScript मा काम गर्ने जो कोहीसँग ह्यान्ड्स-अन CSSOM अनुभवको गुच्छा छ, तर त्यो सधैं मामला हुने छैन। त्यहाँ एउटा इ-कमर्स साइटको लागि प्रतिक्रिया परियोजना थियो जहाँ हामीले हाल चयन गरिएको भुक्तानी प्रदायकको लागि स्टाइलसिट लोड गर्न आवश्यक छ। समस्या यो थियो कि स्टाइलसिट प्रत्येक पृष्ठमा लोड भइरहेको थियो जब यो केवल एक विशेष पृष्ठमा आवश्यक थियो। विकासकर्ताले यसो गर्नका लागि काम गरेकोले कहिल्यै गतिशील रूपमा स्टाइलसिट लोड गरेको थिएन। फेरि, यो पूर्णतया बुझ्न योग्य छ जब प्रतिक्रियाले तपाइँको लागि पुग्न सक्ने परम्परागत दृष्टिकोणलाई हटाउँछ। CSSOM तपाईको दैनिक कार्यमा आवश्यक पर्ने कुरा होइन। तर यो सम्भव छ कि तपाईले कुनै बिन्दुमा यसको साथ अन्तरक्रिया गर्न आवश्यक छ, एक-अफ उदाहरणमा पनि। यी अनुभवहरूले मलाई यो लेख लेख्न प्रेरित गर्यो। त्यहाँ धेरै अवस्थित वेब सुविधाहरू र प्रविधिहरू जंगलमा छन् जुन तपाईंले आफ्नो दिन-दिनको काममा सीधै छुन सक्नुहुन्न। सायद तपाईं वेब विकासको लागि एकदम नयाँ हुनुहुन्छ र तिनीहरूबाट मात्र अनभिज्ञ हुनुहुन्छ किनभने तपाईं एक विशिष्ट ढाँचाको अमूर्ततामा खडा हुनुहुन्छ जसले तपाईंलाई यसलाई गहिरो रूपमा वा सबैमा जान्न आवश्यक पर्दैन। म विशेष गरी XML को बारेमा बोल्दै छु, जुन हामी मध्ये धेरैलाई थाहा छ पुरानो भाषा हो जुन HTML बाट पूर्ण रूपमा भिन्न छैन। म यसलाई हालैको WHATWG छलफलहरूको कारणले ल्याइरहेको छु जसले XSLT प्रोग्रामिङको रूपमा चिनिने XML स्ट्याकको महत्त्वपूर्ण भागलाई ब्राउजरहरूबाट हटाउनु पर्छ। यो ठ्याक्कै त्यस्तै प्रकारको पुरानो, अवस्थित टेक्नोलोजी हो जुन हामीसँग वर्षौंदेखि छ जुन मेरो टोलीको CSSOM परिस्थिति जस्तो व्यावहारिक रूपमा प्रयोग गर्न सकिन्छ। के तपाईंले XSLT सँग पहिले काम गर्नुभएको छ? आजको वास्तविक-विश्व समस्याहरू समाधान गर्न हामी XML को सन्दर्भ बाहिर यस पुरानो प्रविधिमा धेरै झुकाव राख्छौं कि छैन हेरौं। XPath: केन्द्रीय API सबैभन्दा महत्त्वपूर्ण XML टेक्नोलोजी जुन सीधा XML परिप्रेक्ष्य बाहिर सम्भवतः सबैभन्दा उपयोगी छ XPath हो, एक क्वेरी भाषा जसले तपाईंलाई एउटा मूल तत्वको साथ मार्कअप रूखमा कुनै नोड वा विशेषता फेला पार्न अनुमति दिन्छ। मेरो XSLT को लागी एक व्यक्तिगत स्नेह छ, तर त्यो XPath मा पनि निर्भर गर्दछ, र व्यक्तिगत स्नेह को महत्व को महत्व मा अलग राख्नु पर्छ। XSLT हटाउनको लागि तर्कले XPath को कुनै उल्लेख गर्दैन, त्यसैले मलाई लाग्छ कि यो अझै पनि अनुमति छ। यो राम्रो छ किनभने XPath प्रविधिहरूको यस सूटमा केन्द्रीय र सबैभन्दा महत्त्वपूर्ण API हो, विशेष गरी जब सामान्य XML प्रयोग बाहिर प्रयोग गर्न केहि खोज्ने प्रयास गर्दा। यो महत्त्वपूर्ण छ किनभने, CSS चयनकर्ताहरू तपाईंको पृष्ठमा अधिकांश तत्वहरू फेला पार्न प्रयोग गर्न सकिन्छ, तिनीहरूले ती सबै फेला पार्न सक्दैनन्। यसबाहेक, CSS चयनकर्ताहरू DOM मा यसको हालको स्थितिमा आधारित तत्व फेला पार्न प्रयोग गर्न सकिँदैन। XPath सक्छ। अब, तपाईंहरू मध्ये कसैलाई यो पढ्दै XPath थाहा हुन सक्छ, र कसैलाई थाहा नहुन सक्छ। XPath टेक्नोलोजीको एक धेरै ठूलो क्षेत्र हो, र म साँच्चै सबै आधारभूत कुराहरू सिकाउन सक्दिन र यो जस्तै एकल लेखमा तपाईंलाई यससँग गर्नका लागि उत्कृष्ट चीजहरू पनि देखाउन सक्दिन। मैले वास्तवमा त्यो लेख लेख्ने प्रयास गरें, तर औसत Smashing पत्रिका प्रकाशन 5,000 शब्दहरू भन्दा बढि जाँदैन। म पहिले नै भन्दा धेरै मा थिए2,000 शब्दहरू मात्र आधारभूत माध्यमबाट आधा बाटो। त्यसोभए, म XPath सँग राम्रो सामानहरू गर्न सुरु गर्न जाँदैछु र तपाईंलाई केही लिङ्कहरू दिनेछु जुन तपाईंले आधारभूतका लागि प्रयोग गर्न सक्नुहुन्छ यदि तपाईंलाई यो सामान रोचक लाग्यो भने। XPath र CSS को संयोजन XPath ले तत्वहरू क्वेरी गर्दा CSS चयनकर्ताहरूले गर्न नसक्ने धेरै चीजहरू गर्न सक्छ। तर CSS चयनकर्ताहरूले XPath ले गर्न नसक्ने केहि चीजहरू पनि गर्न सक्छन्, अर्थात्, वर्ग नामद्वारा क्वेरी तत्वहरू।
CSS XPath .myClass /*[समावेश गर्दछ(@class, "myClass")]
यस उदाहरणमा, .myClass classname समावेश गर्ने CSS क्वेरी तत्वहरू। यसैबीच, XPath उदाहरणले "myClass" स्ट्रिङको साथ विशेषता वर्ग समावेश गर्ने तत्वहरूलाई सोध्छ। अर्को शब्दमा भन्नुपर्दा, यसले .myClass classname — साथै स्ट्रिङमा "myClass" भएका तत्वहरू, जस्तै .myClass2 सहित कुनै पनि विशेषतामा myClass भएका तत्वहरू चयन गर्छ। XPath त्यो अर्थमा फराकिलो छ। त्यसैले, छैन। म सुझाव दिइरहेको छैन कि हामीले CSS बाहिर टस गर्नुपर्छ र XPath मार्फत सबै तत्वहरू चयन गर्न सुरु गर्नुपर्छ। त्यो बिन्दु होइन। बिन्दु यो हो कि XPath ले चीजहरू गर्न सक्छ जुन CSS गर्न सक्दैन र अझै पनि धेरै उपयोगी हुन सक्छ, यद्यपि यो ब्राउजर स्ट्याकमा पुरानो प्रविधि हो र पहिलो नजरमा स्पष्ट देखिँदैन। हामी दुई प्रविधिहरू सँगै प्रयोग गरौं किनभने हामी सक्छौं मात्र होइन, तर हामीले XPath को बारेमा प्रक्रियामा केही सिक्ने छौँ, यसलाई तपाइँको स्ट्याकमा अर्को उपकरण बनाउनेछ - जुन तपाइँलाई थाहा नभएको हुन सक्छ। समस्या यो छ कि JavaScript को document.evaluate विधि र हामीले JavaScript को लागि CSS API हरु प्रयोग गर्ने विभिन्न क्वेरी चयनकर्ता विधिहरू असंगत छन्। हामीले हामीलाई सुरु गर्नको लागि एक मिल्दो क्वेरी API बनाएको छु, यद्यपि स्वीकार्य रूपमा, मैले यसमा धेरै विचार राखेको छैन किनकि यो हामी यहाँ के गर्दैछौं त्यसबाट प्रस्थान हो। यहाँ पुन: प्रयोज्य क्वेरी कन्स्ट्रक्टरको एकदम सरल कार्य उदाहरण हो: ब्रायन रासमुसेन द्वारा पेन क्वेरी एक्सपाथ [फोर्केड] हेर्नुहोस्। मैले कागजात वस्तुमा दुईवटा विधिहरू थपेको छु: queryCSSSelectors (जुन अनिवार्य रूपमा querySelectorAll हो) र queryXPaths। यी दुबैले क्वेरी परिणाम वस्तु फर्काउँछ:
{ क्वेरी प्रकार: नोड्स | स्ट्रिङ | नम्बर | बुलियन, परिणामहरू: कुनै पनि [] // html तत्वहरू, xml तत्वहरू, तारहरू, संख्याहरू, बुलियनहरू, queryCSSSelectors: (क्वेरी: string, amend: boolean) => क्वेरी परिणाम, queryXpaths: (query: string, amend: boolean) => क्वेरी परिणामहरू }
queryCSSSelectors र queryXpaths प्रकार्यहरूले तपाईंले तिनीहरूलाई नतिजा एरेमा तत्वहरूमा दिनुहुने क्वेरी चलाउनुहुन्छ, जबसम्म परिणाम एरे प्रकार नोडहरूको हुन्छ। अन्यथा, यसले खाली एरे र नोडहरूको प्रकारको साथ क्वेरी परिणाम फर्काउनेछ। यदि संशोधन गुण सही मा सेट गरिएको छ भने, प्रकार्यहरूले आफ्नै क्वेरी परिणामहरू परिवर्तन गर्नेछ। कुनै पनि परिस्थितिमा यसलाई उत्पादन वातावरणमा प्रयोग गर्नु हुँदैन। म यो विशुद्ध रूपमा दुई क्वेरी API हरू सँगै प्रयोग गर्ने विभिन्न प्रभावहरू प्रदर्शन गर्नको लागि गरिरहेको छु। उदाहरण प्रश्नहरू म विभिन्न XPath प्रश्नहरूको केही उदाहरणहरू देखाउन चाहन्छु जसले उनीहरूले गर्न सक्ने केही शक्तिशाली चीजहरू प्रदर्शन गर्दछ र तिनीहरूलाई अन्य दृष्टिकोणहरूको ठाउँमा कसरी प्रयोग गर्न सकिन्छ। पहिलो उदाहरण हो //li/text()। यसले सबै li तत्वहरूलाई सोध्छ र तिनीहरूको पाठ नोडहरू फर्काउँछ। त्यसोभए, यदि हामीले निम्न एचटीएमएललाई सोध्ने हो भने:
- एउटा
- दुई
- तीन
... यो फिर्ता गरिएको छ:
{"queryType":"xpathEvaluate","results":["one","दुई","तीन"],"resultType":"string"}
अर्को शब्दमा, हामीले निम्न एरे पाउँछौं: ["एक","दुई","तीन"]। सामान्यतया, तपाईले li तत्वहरू प्राप्त गर्नको लागि क्वेरी गर्नुहुनेछ, त्यो क्वेरीको नतिजालाई एरेमा बदल्नुहोस्, एरे नक्सा गर्नुहोस्, र प्रत्येक तत्वको पाठ नोड फर्काउनुहोस्। तर हामी XPath को साथ अधिक संक्षिप्त रूपमा गर्न सक्छौं: document.queryXPaths("//li/text()") परिणामहरू।
ध्यान दिनुहोस् कि पाठ नोड प्राप्त गर्ने तरिका पाठ (), जुन प्रकार्य हस्ताक्षर जस्तो देखिन्छ - र यो हो। यसले तत्वको पाठ नोड फर्काउँछ। हाम्रो उदाहरणमा, मार्कअपमा तीन li तत्वहरू छन्, प्रत्येकमा पाठ ("एक", "दुई", र "तीन") समावेश छ।
टेक्स्ट() क्वेरीको अर्को उदाहरण हेरौं। मान्नुहोस् यो हाम्रो मार्कअप हो:
एउटा क्वेरी लेखौं जसले href विशेषता मान फर्काउँछ: document.queryXPaths("//a[text() = 'साइन इन']/@href") परिणामहरू।
यो हालको कागजातमा XPath क्वेरी हो, अन्तिम उदाहरण जस्तै, तर यस पटक हामीले "साइन इन" पाठ समावेश गर्ने लिङ्कको href विशेषता फिर्ता गर्छौं। वास्तविक फर्कियोपरिणाम ["/login.html"] हो। XPath प्रकार्यहरूको अवलोकन त्यहाँ धेरै XPath प्रकार्यहरू छन्, र तपाईं तिनीहरूसँग अपरिचित हुनुहुन्छ। त्यहाँ धेरै छन्, मलाई लाग्छ, जुन निम्न सहित जान्न लायक छ:
starts-withयदि कुनै पाठ विशेष अन्य पाठ उदाहरणको साथ सुरु हुन्छ, starts-with(@href, 'http:') सही फर्काउँछ यदि href विशेषता http: बाट सुरु हुन्छ। यदि पाठमा कुनै विशेष अन्य पाठ उदाहरण समावेश छ भने, समावेश(टेक्स्ट(), "स्म्याशिङ म्यागजिन") साँचो फर्काउँछ यदि पाठ नोडमा जहाँ पनि "स्म्याशिङ म्यागजिन" शब्दहरू छन् भने। countले क्वेरीमा कति मिल्दोजुल्दो छन् भन्ने गणना फर्काउँछ। उदाहरणका लागि, count(//*[starts-with(@href, 'http:']) ले कन्टेक्स्ट नोडमा HTTP: बाट सुरु हुने पाठ समावेश गर्ने href विशेषता भएका तत्वहरू भएका कतिवटा लिङ्कहरूको गणना फर्काउँछ। सबस्ट्रिंगले जाभास्क्रिप्ट सबस्ट्रिङ जस्तै काम गर्दछ, तपाईले स्ट्रिङलाई तर्कको रूपमा पास गर्नुभएन। उदाहरणका लागि, substring("my text", 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 ले अगाडि र ट्रेलिङ ह्वाइटस्पेस स्ट्रिप गरेर र एकल स्पेसद्वारा व्हाइटस्पेस क्यारेक्टरहरूको अनुक्रम प्रतिस्थापन गरेर ह्वाइटस्पेसको साथ आर्गुमेन्ट स्ट्रिङ फर्काउँछ। यदि तर्क गलत छ भने बुलियन सत्य फर्काउँछ, अन्यथा गलत। true बुलियन सत्य फर्काउँछ। false बुलियन गलत फर्काउँछ। concat जाभास्क्रिप्ट concat को रूपमा उस्तै कुरा, तपाईंले यसलाई स्ट्रिङमा विधिको रूपमा चलाउनुहुन्न। यसको सट्टा, तपाईंले जोड्न चाहनुभएको सबै स्ट्रिङहरू राख्नुहुन्छ। string-length यो JavaScript string-length जस्तै होइन, बरु तर्कको रूपमा दिइएको स्ट्रिङको लम्बाइ फर्काउँछ। translate यसले स्ट्रिङ लिन्छ र दोस्रो आर्गुमेन्टलाई तेस्रो आर्गुमेन्टमा परिवर्तन गर्छ। उदाहरणका लागि, अनुवाद गर्नुहोस्("abcdef", "abc", "XYZ") XYZdef आउटपुट।
यी विशेष XPath प्रकार्यहरू बाहेक, त्यहाँ धेरै अन्य प्रकार्यहरू छन् जुन तिनीहरूको JavaScript समकक्षहरू जस्तै काम गर्दछ - वा मूल रूपमा कुनै पनि प्रोग्रामिङ भाषामा समकक्षहरू - जुन तपाईंले सम्भवतः उपयोगी पाउनुहुनेछ, जस्तै भुइँ, छत, राउन्ड, योग, र यस्तै। निम्न डेमोले यी प्रत्येक कार्यहरू चित्रण गर्दछ: ब्रायन रासमुसेन द्वारा पेन XPath संख्यात्मक प्रकार्यहरू [फोर्क गरिएको] हेर्नुहोस्। ध्यान दिनुहोस् कि, अधिकांश स्ट्रिङ हेरफेर प्रकार्यहरू जस्तै, धेरै संख्यात्मकहरूले एकल इनपुट लिन्छन्। यो निस्सन्देह हो, किनभने तिनीहरू क्वेरीको लागि प्रयोग गरिनु पर्छ, जस्तै अन्तिम XPath उदाहरणमा: //li[floor(text()) > 250]/@val
यदि तपाइँ तिनीहरूलाई प्रयोग गर्नुहुन्छ भने, धेरै जसो उदाहरणहरूले गर्दछ, तपाइँ यसलाई पहिलो नोडमा चलाउनुहुनेछ जुन पथसँग मेल खान्छ। त्यहाँ केहि प्रकारका रूपान्तरण प्रकार्यहरू पनि छन् जुन तपाईंले सायद बेवास्ता गर्नुपर्छ किनभने जाभास्क्रिप्टको पहिले नै आफ्नै प्रकारको रूपान्तरण समस्याहरू छन्। तर त्यहाँ कहिलेकाहीँ हुन सक्छ जब तपाइँ एक नम्बरमा स्ट्रिङ रूपान्तरण गर्न चाहानुहुन्छ यसलाई केहि अन्य नम्बर विरुद्ध जाँच गर्न। कुनै चीजको प्रकार सेट गर्ने कार्यहरू बुलियन, नम्बर, स्ट्रिङ र नोड हुन्। यी महत्त्वपूर्ण XPath डाटाटाइपहरू हुन्। र तपाईले कल्पना गर्न सक्नुहुन्छ, यी धेरै प्रकार्यहरू डाटाटाइपहरूमा प्रयोग गर्न सकिन्छ जुन DOM नोडहरू होइनन्। उदाहरणका लागि, substring-after ले स्ट्रिङ लिन्छ जुन हामीले पहिले नै कभर गरिसकेका छौं, तर यो href विशेषताबाट स्ट्रिङ हुन सक्छ। यो केवल एक स्ट्रिङ पनि हुन सक्छ:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
जाहिर छ, यो उदाहरणले हामीलाई परिणाम एरे ["world"] को रूपमा फिर्ता दिनेछ। यसलाई कार्यमा देखाउनको लागि, मैले DOM नोडहरू नभएका चीजहरू विरुद्ध प्रकार्यहरू प्रयोग गरेर डेमो पृष्ठ बनाएको छु: ब्रायन रासमुसेन द्वारा पेन क्वेरी एक्सपाथ [फोर्केड] हेर्नुहोस्। तपाईंले अनुवाद कार्यको आश्चर्यजनक पक्षलाई ध्यान दिनुपर्छ, जुन यो हो कि यदि तपाईंसँग दोस्रो तर्कमा क्यारेक्टर छ (अर्थात, तपाईंले अनुवाद गर्न चाहनुभएको क्यारेक्टरहरूको सूची) र अनुवाद गर्न मिल्दो क्यारेक्टर छैन भने, त्यो क्यारेक्टर आउटपुटबाट हटाइन्छ। तसर्थ, यो:
अनुवाद गर्नुहोस्('हेलो, मेरो नाम इनिगो मोन्टोया हो, तपाईंले मेरो बुबालाई मार्नुभयो, मर्नको लागि तयार हुनुभयो','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
... स्ट्रिङमा नतिजाहरू, खाली ठाउँहरू सहित: ["*****"]
यसको मतलब यो हो कि अक्षर "a" तारा चिन्ह (*) मा अनुवाद गरिँदै छ, तर लक्ष्य स्ट्रिङ दिएर अनुवाद नभएको प्रत्येक अन्य क्यारेक्टरलाई पूर्ण रूपमा हटाइन्छ। ह्वाइटस्पेस मात्र हामीले छोडेका छौंअनुवादित "a" वर्णहरू बीच। त्यसपछि फेरि, यो प्रश्न:
अनुवाद गर्नुहोस्('हेलो, मेरो नाम इनिगो मोन्टोया हो, तपाईंले मेरो बुबालाई मार्नुभयो, मर्नको लागि तयार हुनुभयो','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************)
...समस्या छैन र परिणाम आउटपुट गर्दछ जुन यस्तो देखिन्छ:
"***********************************************************
XPath अनुवाद प्रकार्यले के गर्छ भन्ने कुरा जाभास्क्रिप्टमा कुनै सजिलो तरिका छैन भन्ने कुराले तपाईलाई हड्ताल गर्न सक्छ, यद्यपि धेरै प्रयोगका केसहरूमा, बदल्नुहोस् सबै नियमित अभिव्यक्तिले यसलाई ह्यान्डल गर्न सक्छ। तपाईंले मैले प्रदर्शन गरेको उही दृष्टिकोण प्रयोग गर्न सक्नुहुन्छ, तर यदि तपाईंले स्ट्रिङहरू अनुवाद गर्न चाहनुहुन्छ भने त्यो सबोप्टिमल हो। निम्न डेमोले जाभास्क्रिप्ट संस्करण प्रदान गर्न XPath को अनुवाद प्रकार्य लपेट्छ: ब्रायन रासमुसेन द्वारा पेन अनुवाद कार्य [काँटे] हेर्नुहोस्। तपाईले यस्तो चीज कहाँ प्रयोग गर्न सक्नुहुन्छ? तीन-स्थान अफसेटको साथ सिजर सिफर इन्क्रिप्शनलाई विचार गर्नुहोस् (जस्तै, 48 B.C. बाट शीर्ष-अफ-द-लाइन इन्क्रिप्सन):
अनुवाद ("सिजर रुबिकन पार गर्ने योजनामा छ!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
इनपुट टेक्स्ट "सिजर रुबिकन पार गर्ने योजनामा छ!" "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" मा परिणामहरू विभिन्न सम्भावनाहरूको अर्को द्रुत उदाहरण दिनको लागि, मैले स्ट्रिङ इनपुट लिने र umlauts लिने सबै क्यारेक्टरहरू सहित, पाठ फिर्ता गर्न अनुवाद प्रकार्य प्रयोग गर्ने मेटल प्रकार्य बनाएको छु। ब्रायन रासमुसेन द्वारा पेन मेटल प्रकार्य [फोर्क] हेर्नुहोस्।
const धातु = (str) => { फिर्ता अनुवाद (str, "AOUaou","ÄÖÜäöü"); }
र, यदि "Motley Crue Rules, rock on dudes!" भन्ने पाठ दिइयो भने, "Mötley Crüe rüles, röck ön düdes!" फर्काउँछ। जाहिर छ, एकसँग यस प्रकार्यको सबै प्रकारको प्यारोडी प्रयोग हुन सक्छ। यदि त्यो तपाईं हुनुहुन्छ भने, त्यसपछि यो TVTropes लेखले तपाईंलाई प्रशस्त प्रेरणा प्रदान गर्नुपर्छ। XPath सँग CSS प्रयोग गर्दै XPath सँग CSS चयनकर्ताहरू प्रयोग गर्नुको हाम्रो मुख्य कारण सम्झनुहोस्: CSS ले क्लास के हो भनेर धेरै बुझ्दछ, जबकि तपाईंले XPath सँग गर्न सक्ने सबैभन्दा राम्रो भनेको क्लास विशेषताको स्ट्रिङ तुलना हो। त्यो धेरै अवस्थामा काम गर्नेछ। तर यदि तपाइँ कहिल्यै यस्तो परिस्थितिमा भाग्नु भएको थियो जहाँ, भनौँ, कसैले .primaryLinks र .primaryLinks2 नामक कक्षाहरू सिर्जना गरेको छ र तपाइँले .primaryLinks कक्षा प्राप्त गर्न XPath प्रयोग गरिरहनुभएको छ, तब तपाइँ सम्भवतः समस्यामा पर्नुहुनेछ। जबसम्म त्यहाँ त्यस्तो मूर्खता छैन, तपाईले XPath प्रयोग गर्नुहुनेछ। तर मलाई थाहा पाउँदा दुःख लागेको छ कि मैले ती ठाउँहरूमा काम गरेको छु जहाँ मानिसहरूले त्यस्ता मूर्ख कामहरू गर्छन्। यहाँ CSS र XPath सँगै प्रयोग गरेर अर्को डेमो छ। यसले कागजातको नोड नभएको सन्दर्भ नोडमा XPath चलाउनको लागि कोड प्रयोग गर्दा के हुन्छ भनेर देखाउँछ। ब्रायन रासमुसेन द्वारा पेन css र xpath सँगै हेर्नुहोस्। CSS क्वेरी .relatedarticles a हो, जसले .relatedarticles वर्गलाई तोकिएको div मा दुई तत्वहरू ल्याउँछ। त्यस पछि तीन "खराब" प्रश्नहरू छन्, अर्थात् भन्नुपर्दा, सन्दर्भ नोडको रूपमा यी तत्वहरूसँग चल्दा हामीले उनीहरूलाई गर्न चाहेको कुरा गर्दैन। म व्याख्या गर्न सक्छु किन तिनीहरूले तपाईंले अपेक्षा गरेको भन्दा फरक व्यवहार गरिरहेका छन्। प्रश्नमा तीन खराब प्रश्नहरू छन्:
//text(): कागजातमा सबै पाठ फर्काउँछ। //a/text(): कागजातमा लिङ्क भित्र सबै पाठ फर्काउँछ। ./a/text(): कुनै परिणाम फर्काउँदैन।
यी परिणामहरूको कारण यो हो कि तपाईंको सन्दर्भ CSS क्वेरीबाट फिर्ता गरिएको तत्व हो, // सम्पूर्ण कागजातको विरुद्धमा जान्छ। यो XPath को बल हो; CSS नोडबाट पूर्वज र त्यसपछि त्यो पुर्खाको भाइबहिनीमा जान सक्दैन, र त्यो भाइबहिनीको वंशजमा जान सक्दैन। तर XPath सक्छ। यस बीचमा, ./ ले हालको नोडका बच्चाहरूलाई सोध्छ, जहाँ डट (.) ले हालको नोडलाई प्रतिनिधित्व गर्दछ, र फर्वार्ड स्ल्याश (/) ले केही चाइल्ड नोडमा जाने प्रतिनिधित्व गर्दछ — चाहे यो विशेषता, तत्व, वा पाठ मार्गको अर्को भागद्वारा निर्धारण गरिन्छ। तर CSS क्वेरीद्वारा चयन गरिएको कुनै पनि चाइल्ड एलिमेन्ट छैन, यसरी त्यो क्वेरीले पनि केही फर्काउँदैन। त्यो अन्तिम डेमोमा तीन राम्रा प्रश्नहरू छन्:
.//text(), ./text(), normalize-space(./text())।
सामान्यीकरण-स्पेस क्वेरीले XPath प्रकार्य प्रयोग देखाउँछ, तर अन्य प्रश्नहरूमा समावेश गरिएको समस्यालाई पनि समाधान गर्छ। HTML यस प्रकारको संरचित छ:
सेलेनियम WebDriver संग आफ्नो सुविधा परीक्षण स्वचालित
क्वेरीले पाठ नोडको सुरु र अन्त्यमा लाइन फिड फर्काउँछ,र normalize-space ले यसलाई हटाउँछ। कुनै पनि XPath प्रकार्य प्रयोग गर्नु जसले इनपुट 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/"]
XPath प्रकार्यहरू JavaScript मा कार्यहरू जस्तै नेस्ट गर्न सकिन्छ। त्यसोभए, यदि हामीलाई Smashing Magazine URL ढाँचा थाहा छ भने, हामी निम्न गर्न सक्छौं (टेम्प्लेट लिटरलहरू प्रयोग गर्न सिफारिस गरिन्छ): `अनुवाद( सबस्ट्रिङ( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/', '')''
यो हदसम्म धेरै जटिल हुँदै गइरहेको छ कि यसले के गर्छ वर्णन गर्न टिप्पणीहरू चाहिन्छ: www.smashingmagazine.com/ पछि href विशेषताबाट सबै URL लिनुहोस्, पहिलो नौ क्यारेक्टरहरू हटाउनुहोस्, त्यसपछि फर्वार्ड स्ल्याश (/) क्यारेक्टरलाई कुनै पनि कुरामा अनुवाद गर्नुहोस्। परिणामस्वरूप सरणी:
["सुविधा-परीक्षण-सेलेनियम-वेबड्राइभर","स्वचालित-परीक्षण-परिणाम-सुधार-पहुँच"]
थप XPath प्रयोग केसहरू XPath परीक्षणमा साँच्चै चम्कन सक्छ। कारण हेर्न गाह्रो छैन, किनकि XPath DOM मा कुनै पनि स्थानबाट DOM मा प्रत्येक तत्व प्राप्त गर्न प्रयोग गर्न सकिन्छ, जबकि CSS ले सक्दैन। तपाईंले धेरै आधुनिक निर्माण प्रणालीहरूमा CSS कक्षाहरू एकरूपतामा रहने कुरामा भरोसा गर्न सक्नुहुन्न, तर XPath मार्फत, DOM ढाँचामा परिवर्तन भए तापनि, हामी तत्वको पाठ सामग्री के हो भनेर अझ बलियो मिलानहरू गर्न सक्षम छौं। त्यहाँ प्रविधिहरूमा अनुसन्धान भएको छ जसले तपाईंलाई लचिलो XPath परीक्षणहरू गर्न अनुमति दिन्छ। CSS चयनकर्ताले काम गर्दैन किनभने केहि पुन: नामाकरण वा हटाइयो। XPath धेरै लोकेटर निकासीमा पनि साँच्चै उत्कृष्ट छ। त्यहाँ एक तत्व मिलाउन XPath क्वेरीहरू प्रयोग गर्ने एक भन्दा बढी तरिकाहरू छन्। CSS को साथ पनि यस्तै छ। तर XPath क्वेरीहरूले चीजहरूमा थप लक्षित तरिकामा ड्रिल गर्न सक्छ जसले फिर्ता हुने कुरालाई सीमित गर्दछ, तपाइँलाई एक विशेष मेल फेला पार्न अनुमति दिँदै जहाँ धेरै सम्भावित मिलानहरू हुन सक्छन्। उदाहरण को लागी, हामी XPath को प्रयोग गर्न सक्छौं एक विशिष्ट h2 तत्व फिर्ता गर्न को लागी जुन div भित्र समावेश छ जुन तुरुन्तै एक भाइबहिनी div लाई पछ्याउँछ, जसको फलस्वरूप, यसमा data-testID="leader" विशेषता भएको बच्चा छवि तत्व समावेश छ:
यो शीर्षक प्राप्त नगर्नुहोस्
यो शीर्षक पनि प्राप्त नगर्नुहोस्
नेता छविको लागि हेडर
यो प्रश्न हो: document.queryXPaths(` //div[ निम्न-भाइ:: div[1] /img[@data-testID='leader'] ] /h2/ पाठ() `);
ती सबै कसरी सँगै आउँछ भनेर हेर्नको लागि डेमोमा छोडौं: ब्रायन रासमुसेन द्वारा पेन कम्प्लेक्स H2 क्वेरी [फोर्क गरिएको] हेर्नुहोस्। त्यसैले, हो। XPath प्रयोग गरेर परीक्षणमा कुनै पनि तत्वमा धेरै सम्भावित मार्गहरू छन्। XSLT 1.0 ह्रास मैले सुरुमा उल्लेख गरें कि क्रोम टोलीले ब्राउजरबाट XSLT 1.0 समर्थन हटाउने योजना बनाएको छ। यो महत्त्वपूर्ण छ किनभने XSLT 1.0 ले कागजात रूपान्तरणको लागि XML-केन्द्रित प्रोग्रामिङ प्रयोग गर्दछ जुन, बारीमा, XPath 1.0 मा निर्भर गर्दछ, जुन धेरै ब्राउजरहरूमा पाइन्छ। जब त्यो हुन्छ, हामी XPath को एक प्रमुख घटक गुमाउनेछौं। तर XPath परीक्षण लेख्नको लागि साँच्चै उत्कृष्ट छ भन्ने तथ्यलाई दिइयो, मलाई यो सम्भव छैन कि सम्पूर्ण रूपमा XPath कुनै पनि समय चाँडै गायब हुनेछ। त्यसले भन्यो, मैले याद गरेको छु कि मानिसहरूले कुनै सुविधामा रुचि राख्छन् जब यो हटाइन्छ। र XSLT 1.0 लाई बहिष्कार गरिएको अवस्थामा यो पक्कै पनि सत्य हो। ह्याकर न्युजमा डेप्रिकेसनको विरुद्धमा तर्कहरूले भरिएको सम्पूर्ण छलफल भइरहेको छ। पोष्ट आफैंमा XSLT सँग ब्लगिङ फ्रेमवर्क सिर्जना गर्ने उत्कृष्ट उदाहरण हो। तपाईंआफ्नो लागि छलफल पढ्न सक्छ, तर यो जाभास्क्रिप्ट XLST को लागि ती प्रकारका केसहरू ह्यान्डल गर्नको लागि शिमको रूपमा कसरी प्रयोग गर्न सकिन्छ भन्ने कुरामा जान्छ। मैले सुझावहरू पनि देखेको छु कि ब्राउजरहरूले SaxonJS प्रयोग गर्नुपर्छ, जुन JavaScript को Saxon XSLT, XQUERY, र XPath इन्जिनहरूको पोर्ट हो। यो एक चाखलाग्दो विचार हो, विशेष गरी Saxon-JS ले यी विशिष्टताहरूको हालको संस्करण लागू गर्दछ, जबकि त्यहाँ कुनै ब्राउजर छैन जसले XPath वा XSLT को 1.0 भन्दा बाहिरको संस्करण लागू गर्दछ, र XQuery लागू गर्ने कुनै पनि छैन। मैले Saxonica मा Norm Tovey-Walsh मा पुगें, SaxonJS र Saxon इन्जिनको अन्य संस्करणहरू पछिको कम्पनी। उहाँले भन्नुभयो: "यदि कुनै ब्राउजर विक्रेताले SaxonJS लाई ब्राउजरमा आधुनिक XML टेक्नोलोजीहरू एकीकृत गर्नको लागि सुरूवात बिन्दुको रूपमा लिन चाहन्थे भने, हामी तिनीहरूसँग छलफल गर्न उत्साहित हुनेछौं।" - Norm Tovey-Walsh
तर पनि थपियो: "स्याक्सनजेएसलाई हालको फारममा लिएर ब्राउजर बिल्डमा अपरिवर्तित रूपमा छोड्नु आदर्श दृष्टिकोण हुनेछ भन्ने सोच्दा मलाई धेरै अचम्म लाग्नेछ। ब्राउजर विक्रेता, उनीहरूले ब्राउजर निर्माण गर्ने तथ्यको आधारमा, हामीले 'बाहिरबाट' गर्न सक्ने भन्दा धेरै गहिरो स्तरमा एकीकरणमा पुग्न सक्छ।"- Norm Tovey-Walsh
यो ध्यान दिन लायक छ कि Tovey-Walsh को टिप्पणीहरू XSLT को ह्रास घोषणा भन्दा एक हप्ता अघि आएको थियो। निष्कर्ष म अगाडि बढ्न सक्छु। तर मलाई आशा छ कि यसले XPath को शक्ति प्रदर्शन गरेको छ र तपाईलाई उत्कृष्ट चीजहरू प्राप्त गर्न यसलाई कसरी प्रयोग गर्ने भनेर प्रदर्शन गर्ने धेरै उदाहरणहरू दिएका छन्। यो ब्राउजर स्ट्याकमा पुरानो टेक्नोलोजीको एक उत्तम उदाहरण हो जसमा आज पनि धेरै उपयोगिताहरू छन्, भले पनि तपाईंले यो अवस्थित छ भनेर कहिल्यै थाहा पाउनुभएको छैन वा यसको लागि पुग्ने विचार नगरेको भए पनि। थप पढाइ
"प्राकृतिक भाषाको साथ स्वचालित वेब परीक्षणहरूको लचिलोपन बढाउँदै" (ACM डिजिटल पुस्तकालय) Maroun Ayli, Youssef Bakouny, Nader Jalloul, र Rima Kilany यस लेखले लचिलो परीक्षणहरू लेख्नको लागि धेरै XPath उदाहरणहरू प्रदान गर्दछ। XPath (MDN) यदि तपाइँ XPath कसरी काम गर्छ भन्ने विवरणको प्राविधिक व्याख्या चाहनुहुन्छ भने यो सुरु गर्नको लागि उत्कृष्ट स्थान हो। XPath ट्यूटोरियल (ZVON) मैले यो ट्यूटोरियल मेरो आफ्नै सिकाइमा सबैभन्दा उपयोगी भएको पाएको छु, उदाहरणहरू र स्पष्ट व्याख्याहरूको भण्डारको लागि धन्यवाद। XPather यो अन्तरक्रियात्मक उपकरणले तपाईंलाई कोडसँग सीधा काम गर्न दिन्छ।
