ለዓመታት የታየውን አዝማሚያ ለማየት በግንባር-ፍጻሜ ልማት ውስጥ ቆይቻለሁ፡ ወጣት ገንቢዎች የሱን ታሪካዊ ሁኔታ ሳይረዱ ከአዲስ የፕሮግራም አወጣጥ ጋር አብረው እየሰሩ ነው። እርግጥ ነው, አንድን ነገር አለማወቅ በትክክል መረዳት ይቻላል. ድሩ የተለያየ የክህሎት እና የልዩነት ስብስብ ያለው በጣም ትልቅ ቦታ ነው፣ እና ሁልጊዜ የማናውቀውን አናውቅም። በዚህ መስክ መማር አንድ ጊዜ የሚከሰት እና የሚያልቅ ሳይሆን ቀጣይነት ያለው ጉዞ ነው። ጉዳዩ፡- በቡድኔ ውስጥ ያለ አንድ ሰው ተጠቃሚዎች በዩአይዩ ውስጥ ካለው የተወሰነ ትር ርቀው እንደሄዱ ማወቅ ይቻል እንደሆነ ጠየቀ። የጃቫስክሪፕት ከመጫን በፊት የነበረውን ክስተት ጠቁሜያለሁ። ነገር ግን ይህንን ቀደም ብለው የፈቱ ሰዎች ይህ ሊሆን እንደሚችል ያውቃሉ ምክንያቱም በሌሎች ድረ-ገጾች ላይ ስላልተቀመጠ መረጃ ማንቂያዎች ስለደረሰባቸው ከመጫኑ በፊት የተለመደ የአጠቃቀም ጉዳይ ነው። እንዲሁም ገጹን ደብቅ እና ታይነት ለውጥን ለሥራ ባልደረባዬ ለጥሩ መለኪያ ጠቁሜያለሁ። ስለዚያ እንዴት አወቅሁ? በሌላ ፕሮጀክት ስለመጣ እንጂ መጀመሪያ ጃቫስክሪፕት ስማር ስላጠናሁት አይደለም። እውነታው ግን የዘመናዊው የፊት-መጨረሻ ማዕቀፎች ከነሱ በፊት በነበሩት የቴክኖሎጂ ግዙፍ ትከሻዎች ላይ ቆመው ነው. የዕድገት ልምምዶችን አብስተዋል፣ ብዙውን ጊዜ ለተሻለ የገንቢ ልምድ የሚቀንስ አልፎ ተርፎም የሚያስወግድ፣ በተለምዶ አስፈላጊ የሆኑትን የፊት-ፍጻሜ ጽንሰ-ሐሳቦችን የማወቅ ወይም የመንካት ፍላጎት ሁሉም ሰው ሊያውቀው የሚገባ። የሲኤስኤስ የነገር ሞዴልን (CSSOM) ተመልከት። በሲኤስኤስ እና ጃቫ ስክሪፕት ውስጥ የሚሰራ ማንኛውም ሰው ብዙ የCSSOM ተሞክሮ አለው ብለው ሊጠብቁ ይችላሉ፣ ነገር ግን ያ ሁልጊዜ እንደዚያ አይሆንም። አሁን ለተመረጠው የክፍያ አቅራቢ የቅጥ ሉህ መጫን በሚያስፈልገንበት ቦታ ለሰራሁበት የኢ-ኮሜርስ ጣቢያ የReact ፕሮጀክት ነበር። ችግሩ በተወሰነ ገጽ ላይ ብቻ በትክክል በሚያስፈልግበት ጊዜ የቅጥ ሉህ በእያንዳንዱ ገጽ ላይ እየተጫነ ነበር። ይህ እንዲሆን ኃላፊነት የተሰጠው ገንቢ የቅጥ ሉህ በተለዋዋጭ መንገድ አልጫነም። እንደገና፣ ይህ እርስዎ ሊደርሱበት የሚችሉትን ተለምዷዊ አቀራረብ ምላሽ (React abstract) ሲሰርዝ ይህ ሙሉ በሙሉ ለመረዳት የሚቻል ነው። CSSOM በዕለት ተዕለት ሥራዎ ውስጥ የሚያስፈልግዎ ነገር ላይሆን ይችላል። ግን ምናልባት እርስዎ በአንድ ጊዜ እንኳን ከእሱ ጋር መስተጋብር መፍጠር ያስፈልግዎታል። እነዚህ ተሞክሮዎች ይህን ጽሑፍ እንድጽፍ አነሳስተውኛል። በዱር ውስጥ ብዙ ነባር የድረ-ገጽ ባህሪያት እና ቴክኖሎጂዎች አሉ በዕለት ተዕለት ስራዎ ውስጥ በቀጥታ ፈጽሞ ሊነኩዋቸው አይችሉም. ምናልባት እርስዎ ለድር ልማት በጣም አዲስ ነዎት እና ስለእነሱ አያውቁም ምክንያቱም እርስዎ በጥልቀት እንዲያውቁት በማይፈልግ የተወሰነ ማዕቀፍ ውስጥ ዘልቀው በመግባት ወይም በጭራሽ። እኔ በተለይ ስለ ኤክስኤምኤል እየተናገርኩ ነው፣ ብዙዎቻችን የምናውቀው ጥንታዊ ቋንቋ ከኤችቲኤምኤል ፈጽሞ የማይመሳሰል ነው። ይህንን ያነሳሁት በቅርብ የWHATWG ውይይት ምክንያት XSLT ፕሮግራሚንግ በመባል የሚታወቀው የኤክስኤምኤል ቁልል ጉልህ ክፍል ከአሳሾች መወገድ እንዳለበት ይጠቁማል። ይህ ልክ ለዓመታት ያለን የቆየ ቴክኖሎጂ ሲሆን ቡድኔ እንደነበረው የCSSOM ሁኔታ ለተግባራዊ ነገር ሊያገለግል ይችላል። ከዚህ በፊት ከXSLT ጋር ሰርተዋል? ወደዚህ የቆየ ቴክኖሎጂ በጥልቀት ከተደገፍን እና ባህሪያቱን ከኤክስኤምኤል አውድ ውጪ ዛሬ የገሃዱ ዓለም ችግሮችን ለመቅረፍ እንጠቀምባቸዋለን። XPath፡ ማዕከላዊ ኤፒአይ ከቀጥታ የኤክስኤምኤል እይታ ውጭ በጣም ጠቃሚ የሆነው በጣም አስፈላጊው የኤክስኤምኤል ቴክኖሎጂ ኤክስፓት ሲሆን አንድ ስርወ አካል ባለው የማርከፕ ዛፍ ውስጥ ማንኛውንም መስቀለኛ መንገድ ወይም ባህሪ እንድታገኝ የሚያስችል የጥያቄ ቋንቋ ነው። ለXSLT ግላዊ ፍቅር አለኝ፣ ነገር ግን ያ በ XPath ላይም የተመሰረተ ነው፣ እና የግል ፍቅር በደረጃ አስፈላጊነት ወደ ጎን መተው አለበት። XSLT ን የማስወገድ ክርክር ስለ XPath ምንም አይጠቅስም, ስለዚህ አሁንም የተፈቀደ ይመስለኛል. ያ ጥሩ ነው ምክንያቱም XPath በዚህ የቴክኖሎጂ ስብስብ ውስጥ በተለይም ከመደበኛው የኤክስኤምኤል አጠቃቀም ውጭ የሆነ ነገር ለማግኘት በሚሞከርበት ጊዜ ማዕከላዊ እና በጣም አስፈላጊ ኤፒአይ ነው። አስፈላጊ ነው, ምክንያቱም የ CSS መራጮች በገጽዎ ውስጥ ያሉትን አብዛኛዎቹን ክፍሎች ለማግኘት ጥቅም ላይ ሊውሉ ቢችሉም ሁሉንም ማግኘት አይችሉም. በተጨማሪም፣ የCSS መምረጫዎች አሁን ባለው በDOM ውስጥ ባለው ቦታ ላይ በመመስረት አንድን አካል ለማግኘት መጠቀም አይችሉም። XPath ይችላል። አሁን፣ ይህን የምታነቡ አንዳንዶቻችሁ XPathን ልታውቁ ትችላላችሁ፣ እና አንዳንዱ ደግሞ ላታውቁት ትችላላችሁ። ኤክስፓት በጣም ትልቅ የቴክኖሎጂ አካባቢ ነው፣ እና ሁሉንም መሰረታዊ ነገሮች በትክክል ማስተማር አልችልም እና እንደዚህ ባለ አንድ መጣጥፍ ውስጥ ጥሩ ነገሮችን ላሳይዎት። እኔ በእርግጥ ያንን ጽሑፍ ለመጻፍ ሞክሬ ነበር፣ ነገር ግን አማካዩ የSmashing Magazine እትም ከ5,000 ቃላት በላይ አይሄድም። እኔ ከዚህ በላይ ነበርኩኝ።2,000 ቃላት በመሠረታዊ ነገሮች ግማሽ ላይ ብቻ። ስለዚህ፣ በ XPath አሪፍ ነገሮችን መስራት እጀምራለሁ እና ይህ ነገር አስደሳች ሆኖ ካገኘህ ለመሠረታዊ ነገሮች ልትጠቀምባቸው የምትችላቸውን አንዳንድ አገናኞች እሰጥሃለሁ። XPath እና CSS በማጣመር ኤክስፓት ኤለመንቶችን ሲጠይቁ የሲኤስኤስ መራጮች የማይችሏቸውን ብዙ ነገሮችን ሊያደርግ ይችላል። ነገር ግን የሲኤስኤስ መምረጫዎች XPath የማይችላቸውን ጥቂት ነገሮች ማለትም የጥያቄ ክፍሎችን በክፍል ስም ሊያደርጉ ይችላሉ።
CSS ኤክስፓት .የእኔ ክፍል /*[(@ክፍል፣ "myClass") ይዟል)]
በዚህ ምሳሌ፣ የCSS መጠይቆች .myClass የክፍል ስም ያካተቱ ክፍሎችን ይጠይቃል። ይህ በእንዲህ እንዳለ፣ የ XPath ምሳሌ “myClass” ከሚለው ሕብረቁምፊ ጋር የባህሪ ክፍል የያዙ ክፍሎችን ይጠይቃል። በሌላ አገላለጽ፣ myClass ያላቸውን ክፍሎች በማንኛውም ባህሪ ይመርጣል፣ የ.myClass ክፍል ስም ያላቸውን ክፍሎች ጨምሮ — እንዲሁም በሕብረቁምፊው ውስጥ “myClass” ያላቸውን እንደ .myClass2። XPath በዚያ መልኩ ሰፊ ነው። ስለዚህ, አይደለም. CSS ን ልንጥል እና ሁሉንም ኤለመንቶችን በXPath በኩል መምረጥ እንድንጀምር እየጠቆምኩ አይደለም። ነጥቡ ይህ አይደለም. ነጥቡ ኤክስፓት ሲኤስኤስ የማይችላቸውን እና አሁንም በጣም ጠቃሚ ሊሆኑ የሚችሉ ነገሮችን ሊያደርግ ይችላል፣ ምንም እንኳን በአሳሽ ቁልል ውስጥ የቆየ ቴክኖሎጂ ቢሆንም በመጀመሪያ በጨረፍታ ግልጽ ላይሆን ይችላል። ሁለቱን ቴክኖሎጂዎች አንድ ላይ እንጠቀም ስለምንችል ብቻ ሳይሆን በሂደቱ ውስጥ ስለ XPath የሆነ ነገር ስለምንማር፣ በእርስዎ ቁልል ውስጥ ሌላ መሳሪያ እንዲሆን በማድረግ - ምናልባት የማታውቁት ምናልባት እዚያ እንደነበረ! ችግሩ የጃቫስክሪፕት ሰነድ.የግምገማ ዘዴ እና ከCSS APIs ጋር ለጃቫስክሪፕት የምንጠቀማቸው የተለያዩ የጥያቄ መምረጫ ዘዴዎች ተኳሃኝ አይደሉም። ለመጀመር ተኳሃኝ የሆነ የመጠይቅ ኤፒአይ ሠርቻለሁ፣ ምንም እንኳን ባይካድም፣ እዚህ ከምንሰራው ነገር የራቀ ስለሆነ ብዙ አላሰብኩም። እንደገና ጥቅም ላይ ሊውል የሚችል መጠይቅ ገንቢ በጣም ቀላል የሆነ ምሳሌ ይኸውና፡ የብዕር ጥያቄን ይመልከቱXPath [ሹካ] በብራያን ራስሙስሰን። በሰነዱ ነገር ላይ ሁለት ዘዴዎችን ጨምሬአለሁ፡ መጠይቅCSSSelectors (በመሰረቱ querySelectorAll) እና queryXPaths። እነዚህ ሁለቱም የጥያቄ ውጤቶች ነገርን ይመልሳሉ፡-
{ ጥያቄ ዓይነት: አንጓዎች | ሕብረቁምፊ | ቁጥር | ቡሊያን፣ ውጤቶች፡ ማንኛውም[] // ኤችቲኤምኤል ኤለመንቶች፣ xml ክፍሎች፣ ሕብረቁምፊዎች፣ ቁጥሮች፣ ቡሊያንስ፣ ጥያቄCSSSመራጮች፡ (ጥያቄ፡ string፣ ማሻሻያ፡ ቡሊያን) => የጥያቄ ውጤቶች፣ queryXpaths: (ጥያቄ: string, ማሻሻያ: boolean) => የጥያቄ ውጤቶች }
የጥያቄ CSSSelectors እና queryXpaths ተግባራት እርስዎ የሚሰጧቸውን መጠይቅ በውጤቶች ድርድር ውስጥ ባሉ ንጥረ ነገሮች ላይ ያካሂዳሉ፣የእርግጥ የውጤቶች አደራደር የአንጓዎች አይነት እስከሆነ ድረስ። ያለበለዚያ የጥያቄውን ውጤት ከባዶ ድርድር እና ከአንጓዎች አይነት ጋር ይመልሳል። የማሻሻያ ንብረቱ ወደ እውነት ከተዋቀረ ተግባራቶቹ የራሳቸውን የመጠይቅ ውጤቶች ይለውጣሉ። በምንም አይነት ሁኔታ ይህ በምርት አካባቢ ውስጥ ጥቅም ላይ መዋል የለበትም. ይህን የማደርገው ሁለቱን መጠይቅ ኤፒአይዎችን አንድ ላይ መጠቀም የሚያስከትለውን ውጤት ለማሳየት ብቻ ነው። የምሳሌ መጠይቆች አንዳንድ ኃይለኛ ነገሮችን የሚያሳዩ እና በሌሎች አቀራረቦች ምትክ እንዴት ጥቅም ላይ እንደሚውሉ የሚያሳዩ የተለያዩ የ XPath መጠይቆችን ጥቂት ምሳሌዎችን ማሳየት እፈልጋለሁ። የመጀመሪያው ምሳሌ //li/text() ነው። ይህ ሁሉንም የ li ኤለመንቶችን ይጠይቃል እና የጽሑፍ ኖዶቻቸውን ይመልሳል። ስለዚህ፣ የሚከተለውን HTML ብንጠይቅ፡-
- አንድ
- ሁለት
- ሶስት
የተመለሰው ይህ ነው፡-
{"queryType":"xpathEvaluate","ውጤቶች":["አንድ","ሁለት","ሶስት"],"ውጤትType":"ሕብረቁምፊ"}
በሌላ አነጋገር፣ የሚከተለውን ድርድር እናገኛለን፡- ["አንድ""ሁለት""ሦስት"። በተለምዶ፣ የሊ ኤለመንቶች ያንን እንዲያገኙ ይጠይቃሉ፣ የጥያቄውን ውጤት ወደ ድርድር ይቀይሩት፣ ድርድሩን ይሳሉ እና የእያንዳንዱን አካል የጽሑፍ መስቀለኛ መንገድ ይመልሱ። ነገር ግን በ XPath ያንን በበለጠ አጭር ማድረግ እንችላለን፡- document.queryXPaths("//li/text()") .ውጤቶች።
የጽሑፍ መስቀለኛ መንገድ የጽሑፍ መስቀለኛ መንገድ የጽሑፍ ()ን መጠቀም ሲሆን ይህም የተግባር ፊርማ የሚመስል መሆኑን ልብ ይበሉ - እና እሱ ነው። የአንድ ንጥረ ነገር የጽሑፍ መስቀለኛ መንገድ ይመልሳል። በምሳሌአችን፣ በምልክቱ ውስጥ ሶስት የሊ ኤለመንቶች አሉ፣ እያንዳንዱም ጽሑፍ ("አንድ"፣ "ሁለት" እና "ሦስት") ይዟል።
የጽሑፍ() መጠይቅ አንድ ተጨማሪ ምሳሌ እንመልከት። ይህ የእኛ ምልክት ነው ብለን እናስብ፡-
የhref ባህሪ እሴቱን የሚመልስ ጥያቄ እንፃፍ፡- document.queryXPaths("//a[ጽሑፍ() = 'ግባ']/@href").ውጤቶች።
ይህ አሁን ባለው ሰነድ ላይ የ XPath መጠይቅ ነው፣ ልክ እንደ መጨረሻው ምሳሌ፣ ነገር ግን በዚህ ጊዜ "ግባ" የሚለውን ጽሑፍ የያዘውን የአገናኝ (ኤለመንቱ) href ባህሪን እንመልሳለን። ትክክለኛው ተመለሰውጤቱ ["/login.html" ነው። XPath ተግባራት አጠቃላይ እይታ በርካታ የ XPath ተግባራት አሉ፣ እና እርስዎ ምናልባት እነሱን የማታውቋቸው ሊሆኑ ይችላሉ። እኔ እንደማስበው የሚከተሉትን ጨምሮ ስለ ማወቅ የሚገባቸው ብዙ አሉ፡-
የሚጀምረው-በአንድ ጽሑፍ በተለየ የጽሑፍ ምሳሌ ከጀመረ፣ የሚጀምረው በ(@href፣ 'http:') የሚጀምረው የhref ባህሪ በ http: ከሆነ ነው። አንድ ጽሑፍ የተለየ የጽሑፍ ምሳሌ ከያዘ፣ በውስጡ የያዘው (ጽሑፍ()፣ “መጽሔት ሰባሪ”) የጽሑፍ መስቀለኛ መንገድ በማንኛውም ቦታ ውስጥ “መጽሔት መሰባበር” የሚሉትን ቃላት ከያዘ ወደ እውነት ይመለሳል። ቆጣሪ ለጥያቄው ስንት ተዛማጆች እንዳሉ ቆጠራ ይመልሳል። ለምሳሌ፣ ቆጠራ (//*[በ(@href፣ 'http:'] ይጀምራል) በአውድ መስቀለኛ መንገድ ውስጥ ስንት አገናኞች የhref ባህሪ ያላቸው ኤለመንቶች እንዳሉት ቆጠራን ይመልሳል በ http የሚጀምረው። ንዑስ ሕብረቁምፊ እንደ ጃቫ ስክሪፕት ንኡስ ሕብረቁምፊ ይሰራል፣ ሕብረቁምፊውን እንደ ነጋሪ እሴት ካላለፉ በስተቀር። ለምሳሌ፣ ንዑስ ሕብረቁምፊ ("የእኔ ጽሑፍ"፣2፣4) "y t" ይመልሳል። ንዑስ ሕብረቁምፊ-በፊት የሕብረቁምፊውን ክፍል ከሌላ ሕብረቁምፊ በፊት ይመልሳል። ለምሳሌ፡-በፊት("የእኔ ጽሑፍ""")ን ማሰር "የእኔ" ይመልሳል። በተመሳሳይ፣ ንኡስ ሕብረቁምፊ-በፊት("hi"፣ባይ") ባዶ ሕብረቁምፊ ይመልሳል። ንዑስ ሕብረቁምፊ-በኋላ የሕብረቁምፊውን ክፍል ከሌላ ሕብረቁምፊ በኋላ ይመልሳል። ለምሳሌ፡-በኋላ("የእኔ ጽሑፍ፣"") "ጽሁፍ" ይመልሳል። በተመሳሳይ፣ ንኡስ ሕብረቁምፊ-በኋላ("ሃይ"፣ባይ") ባዶ ሕብረቁምፊ ይመልሳል። መደበኛ ቦታን በመምራት እና በመከተል ነጭ ቦታን በመንጠቅ እና የነጭ ቦታ ቁምፊዎችን ቅደም ተከተሎች በአንዲት ቦታ በመተካት ከነጭ ቦታ ጋር የክርክር ሕብረቁምፊውን ይመልሳል። ክርክሩ ሐሰት ከሆነ፣ ካልሆነ ሐሰት ከሆነ የቦሊያን እውነት አይመልስም። እውነት ቡሊያንን እውነት ይመልሳል። ውሸት ቡሊያንን ሐሰት ይመልሳል። concatከጃቫ ስክሪፕት concat ጋር ተመሳሳይ ነገር፣ በሕብረቁምፊ ላይ እንደ ዘዴ ካላስኬዱት በስተቀር። በምትኩ, ለማጣመር የሚፈልጉትን ሁሉንም ገመዶች አስገባ. string-lengthይህ ከጃቫስክሪፕት ህብረቁምፊ-ርዝመት ጋር ተመሳሳይ አይደለም፣ነገር ግን እንደ መከራከሪያ የተሰጠውን የሕብረቁምፊ ርዝመት ይመልሳል። ይህ ሕብረቁምፊ ይወስዳል እና ሁለተኛውን ነጋሪ እሴት ወደ ሶስተኛው ነጋሪ እሴት ይለውጠዋል። ለምሳሌ፣ መተርጎም ("abcdef", "abc", "XYZ") የ XYZdef ውጤቶች.
ከእነዚህ ልዩ የ XPath ተግባራት በተጨማሪ ልክ እንደ ጃቫ ስክሪፕት አቻዎቻቸው - ወይም በመሠረቱ በማንኛውም የፕሮግራም አወጣጥ ቋንቋ - እንደ ወለል ፣ ጣሪያ ፣ ክብ ፣ ድምር እና የመሳሰሉት ያሉ ጠቃሚ ሆነው የሚያገኟቸው ሌሎች በርካታ ተግባራት አሉ። የሚከተለው ማሳያ እያንዳንዱን እነዚህን ተግባራት ያሳያል፡- በብራያን ራስመስሰን የ Pen XPath ቁጥራዊ ተግባራትን ይመልከቱ። ልክ እንደ አብዛኛዎቹ የሕብረቁምፊዎች ማጭበርበር ተግባራት፣ ብዙዎቹ አሃዛዊዎቹ አንድ ግቤት እንደሚወስዱ ልብ ይበሉ። ይህ በእርግጥ ነው፣ ምክንያቱም እነሱ ለመጠየቅ ጥቅም ላይ መዋል ስለሚገባቸው፣ ባለፈው XPath ምሳሌ ላይ እንደተገለጸው፡- //ሊ[ፎቅ (ጽሑፍ ()) > 250]/@val
ከተጠቀሙባቸው, አብዛኛዎቹ ምሳሌዎች እንደሚያደርጉት, ከመንገዱ ጋር በሚዛመደው የመጀመሪያው መስቀለኛ መንገድ ላይ ይጨርሱታል. ጃቫ ስክሪፕት የራሱ የሆነ የልውውጥ ችግሮች ስላሉት ምናልባት ሊያስወግዷቸው የሚገቡ አንዳንድ የልወጣ ተግባራትም አሉ። ነገር ግን አንድን ሕብረቁምፊ ከሌላ ቁጥር ጋር ለማጣራት ወደ ቁጥር ለመቀየር የምትፈልግበት ጊዜ ሊኖር ይችላል። የአንድን ነገር አይነት የሚያዘጋጁ ተግባራት ቡሊያን፣ ቁጥር፣ ሕብረቁምፊ እና መስቀለኛ መንገድ ናቸው። እነዚህ አስፈላጊዎቹ የ XPath የውሂብ አይነቶች ናቸው። እና እርስዎ ሊገምቱት እንደሚችሉት፣ አብዛኛዎቹ እነዚህ ተግባራት የ DOM ኖዶች ባልሆኑ የውሂብ ዓይነቶች ላይ ጥቅም ላይ ሊውሉ ይችላሉ። ለምሳሌ፣ ንኡስ ሕብረቁምፊ-በኋላ አስቀድመን እንደሸፈነው ሕብረቁምፊ ይወስዳል፣ነገር ግን ከ href አይነታ ሕብረቁምፊ ሊሆን ይችላል። እንዲሁም ሕብረቁምፊ ብቻ ሊሆን ይችላል፡-
const testSubstringAfter = document.queryXPaths("ንዑስ ሕብረቁምፊ-በኋላ("ሄሎ ዓለም'፣'")");
በግልጽ፣ ይህ ምሳሌ የውጤቶቹን አሰላለፍ እንደ [“ዓለም”] ይሰጠናል። ይህንን በተግባር ለማሳየት፣ DOM ኖዶች ካልሆኑ ነገሮች ላይ ተግባራትን በመጠቀም የማሳያ ገጽ ሠርቻለሁ፡ የብዕር ጥያቄን ይመልከቱXPath [ሹካ] በብራያን ራስሙስሰን። የትርጓሜውን ተግባር አስገራሚ ገጽታ ልብ ይበሉ, ይህም በሁለተኛው ነጋሪ እሴት ውስጥ ገጸ-ባህሪያት ካለዎት (ማለትም, መተርጎም የሚፈልጉትን የቁምፊዎች ዝርዝር) እና ምንም የሚተረጉም ምንም ተዛማጅ ቁምፊ ከሌለ, ያ ቁምፊ ከውጤቱ ይወገዳል. ስለዚህም ይህ፡-
መተርጎም ('ሄሎ፣ ስሜ ኢኒጎ ሞንቶያ ነው፣ አባቴን ገደልክ፣ ለመሞት ተዘጋጅ'፣'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ፣'*')
ክፍተቶችን ጨምሮ በሕብረቁምፊው ውስጥ ውጤቶች፡- ["****]
ይህ ማለት “a” የሚለው ፊደል ወደ ኮከብ ምልክት (*) እየተተረጎመ ነው ማለት ነው፣ ነገር ግን ሁሉም ሌሎች የዒላማ ሕብረቁምፊዎች ትርጉም የሌላቸው ቁምፊዎች ሙሉ በሙሉ ይወገዳሉ ማለት ነው። የቀረነው ነጭ ቦታ ብቻ ነው።በተተረጎሙት "a" ቁምፊዎች መካከል. ከዚያ እንደገና ይህ ጥያቄ፡-
መተርጎም ('ሄሎ፣ ስሜ ኢኒጎ ሞንቶያ ነው፣ አባቴን ገደልክ፣ ለመሞት ተዘጋጅ'፣'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ፣'፣'**********************************************)))
…ችግር የለውም እና ይህን የሚመስል ውጤት ያስገኛል፡-
"***** ** **** **********************************
በጃቫ ስክሪፕት ውስጥ የ XPath መተርጎም ተግባር የሚሰራውን በትክክል ለመስራት የሚያስችል ቀላል መንገድ አለመኖሩን ሊገርማችሁ ይችላል፣ ምንም እንኳን ለብዙ አጠቃቀሞች ሁሉንም በመደበኛ መግለጫዎች መተካት ይችላሉ። እኔ ያሳየሁትን ተመሳሳይ አካሄድ መጠቀም ትችላላችሁ፣ ነገር ግን የፈለጋችሁት ሕብረቁምፊዎችን መተርጎም ብቻ ከሆነ ያ በጣም ጥሩ ነው። የሚከተለው ማሳያ የጃቫ ስክሪፕት ስሪት ለማቅረብ የ XPathን የትርጉም ተግባር ያጠቃልላል፡ በብሪያን ራስሙሰን የተዘጋጀውን የብዕር ትርጉም ተግባር ይመልከቱ። እንደዚህ አይነት ነገር የት መጠቀም ይቻላል? የሶስት ቦታ ማካካሻ ያለው የቄሳርን ሲፈር ምስጠራን አስቡበት (ለምሳሌ፣ ከ48 ዓ.ዓ. የከፍተኛ-መስመር ምስጠራ)
መተርጎም ("ቄሳር ሩቢኮን ሊሻገር ነው!"፣ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
የግቤት ጽሑፍ "ቄሳር ሩቢኮን ሊሻገር ነው!" በ"Zxbpxo fp mixkkfkd ql zolp qeb Oryfzlk!" ሌላ ፈጣን ምሳሌ ለመስጠት የተለያዩ እድሎችን ለማስረዳት፣ የሕብረቁምፊ ግብዓት የሚወስድ እና ጽሑፉን ለመመለስ የትርጉም ተግባርን የሚጠቀም፣ ሁሉንም umlauts የሚወስዱ ቁምፊዎችን ጨምሮ የብረት ተግባር ሠራሁ። የብዕር ብረት ተግባርን በብራያን ራስሙስሰን ይመልከቱ።
const metal = (str) => { ተመለስ ተርጉም(str "AOUaou","ÄÖÜäöü"); }
እና፣ “Motley Crue rules, rock on dudes!” የሚል ጽሑፍ ከተሰጠው፣ “Mötley Crüe rüles, röck ön düdes!” ሲል ይመልሳል። በግልጽ ለማየት እንደሚቻለው, አንድ ሰው የዚህ ተግባር ሁሉንም አይነት የፓርዲ አጠቃቀሞች ሊኖረው ይችላል. ያ እርስዎ ከሆኑ፣ ይህ የTVTropes መጣጥፍ ብዙ መነሳሻዎችን ሊሰጥዎ ይገባል። CSS ን ከ XPath ጋር መጠቀም የሲኤስኤስ መምረጫዎችን ከ XPath ጋር የምንጠቀምበትን ዋና ምክንያት አስታውስ፡ CSS አንድ ክፍል ምን እንደሆነ በደንብ ይረዳል፣ ነገር ግን በ XPath ማድረግ የምትችለው ምርጡ የክፍል ባህሪን ማነፃፀር ነው። ያ በአብዛኛዎቹ ጉዳዮች ይሠራል። ነገር ግን አንድ ሰው .primaryLinks እና .primaryLinks2 የተሰየሙ ክፍሎችን ከፈጠረ እና እርስዎ የ.primaryLinks ክፍል ለማግኘት XPath እየተጠቀሙበት ወደነበረበት ሁኔታ ውስጥ ከገቡ፣ እንበል፣ ችግር ሊያጋጥሙዎት ይችላሉ። እንደዚህ አይነት ሞኝ ነገር እስካልተገኘ ድረስ ምናልባት XPath ን ትጠቀማለህ። ነገር ግን ሰዎች እነዚያን የጅል ስራዎች በሚያደርጉባቸው ቦታዎች እንደሰራሁ ስገልጽ አዝኛለሁ። CSS እና XPath አብረው የሚጠቀሙበት ሌላ ማሳያ ይኸውና። የሰነዱ መስቀለኛ መንገድ ባልሆነ አውድ ኖድ ላይ ኤክስፓትን ለማስኬድ ኮዱን ስንጠቀም ምን እንደሚፈጠር ያሳያል። ብእርን css እና xpathን አብረው ይመልከቱ [ሹካ] በብራያን ራስመስሰን። የሲኤስኤስ መጠይቁ .ተዛማጅ መጣጥፎች ሀ ነው፣ እሱም ሁለቱን ኤለመንቶችን በዲቪ በተመደበው .ተዛማጅ መጣጥፎች ክፍል ውስጥ። ከዚያ በኋላ ሶስት “መጥፎ” መጠይቆች አሉ፣ ያም ማለት፣ እነዚህን አካላት እንደ አውድ መስቀለኛ መንገድ ይዘን ሲሮጡ የምንፈልገውን የማያደርጉ ጥያቄዎች አሉ። እርስዎ ከምትጠብቁት የተለየ ባህሪ ለምን እንደሚያሳዩ ማስረዳት እችላለሁ። በጥያቄ ውስጥ ያሉት ሶስት መጥፎ መጠይቆች፡-
//ጽሑፍ(): በሰነዱ ውስጥ ያሉትን ሁሉንም ጽሑፎች ይመልሳል። //a/text(): በሰነዱ ውስጥ ያሉትን ሁሉንም ፅሁፎች በአገናኞች ይመልሳል። ./a/text(): ምንም ውጤት አይመለስም።
የእነዚህ ውጤቶች ምክንያት የእርስዎ አውድ ከCSS መጠይቁ የተመለሱ ንጥረ ነገሮች ሲሆኑ፣// ከጠቅላላው ሰነድ ጋር የሚቃረን ነው። ይህ የ XPath ጥንካሬ ነው; CSS ከአንጓ እስከ ቅድመ አያት ከዚያም ወደዚያ ቅድመ አያት ወንድም እህት መሄድ እና ወደዚያ ወንድም እህት ዘር መውረድ አይችልም። ግን XPath ይችላል። ይህ በእንዲህ እንዳለ፣ ./ የአሁን መስቀለኛ መንገድ ልጆችን ይጠይቃል፣ ነጥቡ (.) የአሁኑን መስቀለኛ መንገድ የሚወክልበት፣ እና ወደፊት slash (/) ወደ አንዳንድ የሕፃን ኖድ መሄድን ይወክላል - ባህሪ፣ አካል ወይም ጽሑፍ የሚወሰነው በሚቀጥለው የመንገዱ ክፍል ነው። ነገር ግን ማንም ልጅ በCSS መጠይቅ የተመረጠ አካል የለም፣ ስለዚህ ጥያቄው ምንም አይመልስም። በመጨረሻው ማሳያ ውስጥ ሶስት ጥሩ መጠይቆች አሉ፡-
.//ጽሑፍ(), ./ጽሑፍ(), ቦታን መደበኛ ማድረግ (./text())።
የመደበኛ ቦታ መጠይቁ የ XPath ተግባር አጠቃቀምን ያሳያል፣ነገር ግን በሌሎች መጠይቆች ውስጥ የተካተተውን ችግርም ያስተካክላል። ኤችቲኤምኤል በዚህ መልኩ ተዋቅሯል፡-
በሴሊኒየም ዌብDriver የባህሪ ሙከራዎን በራስ-ሰር ማድረግ
ጥያቄው በጽሑፍ መስቀለኛ መንገድ መጀመሪያ እና መጨረሻ ላይ የመስመር ምግብ ይመልሳል፣እና normalize-space ይህን ያስወግዳል. ማንኛውንም የ XPath ተግባርን መጠቀም ከቦሊያን በግብአት XPath ሌላ ነገርን የሚመልስ ሌሎች ተግባራትን ይመለከታል። የሚከተለው ማሳያ በርካታ ምሳሌዎችን ያሳያል። የብሪያን ራስሙሰን (ፎርክ) የፔን xpath ተግባራት ምሳሌዎችን ይመልከቱ። የመጀመሪያው ምሳሌ ሊጠነቀቅ የሚገባውን ችግር ያሳያል። በተለይም የሚከተለው ኮድ:
document.queryXPaths("ንዑስ ሕብረቁምፊ-በኋላ(//a/@href,'https://')");
…አንድ ሕብረቁምፊ ይመልሳል፡-
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
ምክንያታዊ ነው አይደል? እነዚህ ተግባራት ድርድሮችን አይመልሱም ይልቁንም ነጠላ ሕብረቁምፊዎች ወይም ነጠላ ቁጥሮች። ተግባሩን በየትኛውም ቦታ በበርካታ ውጤቶች ማስኬድ የመጀመሪያውን ውጤት ብቻ ይመልሳል. ሁለተኛው ውጤት በትክክል የምንፈልገውን ያሳያል-
document.queryCSSSelectors("a").queryXPaths("ንዑስ ሕብረቁምፊ-በኋላ(./@href,'https://')");
የሁለት ሕብረቁምፊዎች ድርድር የሚመልስ፡-
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/,"www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
የ XPath ተግባራት ልክ በጃቫስክሪፕት ውስጥ እንዳሉት ተግባራት መክተት ይችላሉ። ስለዚህ፣ የSmashing Magazine URL መዋቅርን ካወቅን፣ የሚከተሉትን ማድረግ እንችላለን (የአብነት ቃል በቃል መጠቀም ይመከራል) መተርጎም( ንዑስ ሕብረቁምፊ( ንዑስ ሕብረቁምፊ-በኋላ(./@href፣ 'www.smashingmagazine.com/') 9) ''/'፣''))
ይህ ምን እንደሚሰራ የሚገልጹ አስተያየቶችን እስከሚፈልግ ድረስ በጣም ውስብስብ እየሆነ መጥቷል፡ ሁሉንም ዩአርኤል ከ href አይነታ ከwww.smashingmagazine.com/ በኋላ ይውሰዱ፣ የመጀመሪያዎቹን ዘጠኝ ቁምፊዎች ያስወግዱ እና የመጨረሻውን ወደፊት slash ለማስወገድ ወደ ፊት slash (/) ገጸ ባህሪን ወደ ምንም ይተርጉሙ። የተገኘው ድርድር፡-
["feature-testing-selenium-webdriver"፣አውቶሜትድ-የሙከራ-ውጤቶች-የተሻሻለ-ተደራሽነት"]
ተጨማሪ የ XPath አጠቃቀም ጉዳዮች XPath በሙከራ ውስጥ በእውነት ሊበራ ይችላል። ምክንያቱን ለማየት አስቸጋሪ አይደለም፣ ምክንያቱም XPath በ DOM ውስጥ ያለውን እያንዳንዱን ኤለመንት፣ በ DOM ውስጥ ካለ ማንኛውም ቦታ ለማግኘት ጥቅም ላይ ሊውል ይችላል፣ ሲኤስኤስ ግን አይችልም። የCSS ክፍሎች በብዙ ዘመናዊ የግንባታ ስርዓቶች ውስጥ ወጥነት እንዳላቸው መቁጠር አይችሉም፣ ነገር ግን በ XPath፣ የDOM መዋቅር ምንም ይሁን ምን የአንድ ንጥረ ነገር ፅሁፍ ይዘት ምን እንደሆነ የበለጠ ጠንካራ ግጥሚያዎችን ማድረግ እንችላለን። የሚቋቋሙ የ XPath ሙከራዎችን እንዲያደርጉ በሚያስችሉ ቴክኒኮች ላይ ምርምር ተደርጓል። አንድ ነገር ስለተቀየረ ወይም ስለተወገደ CSS መራጭ ስለማይሰራ ብቻ ፈተናዎች ጠፍተው ከመውደቅ የከፋ ነገር የለም። XPath በብዙ አመልካች ማውጣት ላይም በጣም ጥሩ ነው። ከአንድ ኤለመንት ጋር ለማዛመድ የ XPath መጠይቆችን ለመጠቀም ከአንድ በላይ መንገዶች አሉ። ከሲኤስኤስ ጋር ተመሳሳይ ነው. ነገር ግን የ XPath መጠይቆች የሚመለሱትን ነገሮች የሚገድብ ይበልጥ በታለመ መንገድ ወደ ነገሮች መሰርሰር ይችላሉ፣ ይህም ብዙ ተዛማጆች ሊኖሩ የሚችሉበት የተለየ ተዛማጅ እንዲያገኙ ያስችልዎታል። ለምሳሌ፣ በዲቪ ውስጥ የሚገኘውን የተወሰነ h2 ኤለመንት ለመመለስ XPath ን ልንጠቀም እንችላለን፣ እሱም ወዲያውኑ የወንድም እህት ዲቪን የሚከተል፣ እሱም በተራው፣ በእሱ ላይ የውሂብ-testID="leader" ባህሪ ያለው የልጅ ምስል አካል ይይዛል፡
ይህን አርእስት አላገኘውም
ይህንን አርእስትም እንዳትገኝ
የመሪው ምስል ራስጌ
ጥያቄው ይህ ነው፡- document.queryXPaths(` //div[ ተከታይ እህት:: div[1] /img[@data-testID='መሪ'] ] /ሰ2/ ጽሑፍ() `);
ያ ሁሉ እንዴት እንደሚሰበሰብ ለማየት ማሳያ እናስቀምጠው፡- የብዕር ኮምፕሌክስ H2 መጠይቁን በብራያን ራስሙስሰን ይመልከቱ። ስለዚህ አዎ. በፈተና ውስጥ ወደ ማንኛውም አካል XPathን በመጠቀም ብዙ ሊሆኑ የሚችሉ መንገዶች አሉ። XSLT 1.0 መቋረጥ የChrome ቡድን የXSLT 1.0 ድጋፍን ከአሳሹ ለማስወገድ ማቀዱን ቀደም ብዬ ተናግሬ ነበር። ያ አስፈላጊ ነው ምክንያቱም XSLT 1.0 ለሰነድ ለውጥ በኤክስኤምኤል ላይ ያተኮረ ፕሮግራሚንግ ስለሚጠቀም በተራው በ XPath 1.0 ላይ የተመሰረተ ነው, ይህም በአብዛኛዎቹ አሳሾች ውስጥ ይገኛል. ያ በሚሆንበት ጊዜ የ XPath ቁልፍ አካል እናጣለን። ነገር ግን ኤክስፓት ፈተናዎችን ለመጻፍ በጣም ጥሩ ከመሆኑ እውነታ አንጻር፣ ኤክስፓት በአጠቃላይ በማንኛውም ጊዜ በቅርቡ ይጠፋል ብዬ አስባለሁ። ይህ አለ፣ አንድ ባህሪ ሲወሰድ ሰዎች ፍላጎት እንዳላቸው አስተውያለሁ። እና በ XSLT 1.0 መቋረጥ ላይ ይህ እውነት ነው። በ Hacker News ላይ የመቀነሱን መቋረጥ በሚቃወሙ ክርክሮች የተሞላ ሙሉ ውይይት እየተካሄደ ነው። ልጥፉ ራሱ ከ XSLT ጋር የብሎግንግ መዋቅር ለመፍጠር ጥሩ ምሳሌ ነው። አንተውይይቱን ለራስህ ማንበብ ትችላለህ፣ ነገር ግን ጃቫ ስክሪፕት ለXLST እንዴት እንደዚህ አይነት ጉዳዮችን ለማስተናገድ እንደ ሽምግልና ጥቅም ላይ ሊውል እንደሚችል ወደ ውስጥ ይገባል። እንዲሁም አሳሾች ሳክሰን ጄኤስን መጠቀም እንዳለባቸው አስተያየቶችን አይቻለሁ፣ ይህም ወደ ጃቫ ስክሪፕት ሳክሰን XSLT፣ XQUERY እና XPath ሞተሮች ወደብ ነው። ያ በጣም ደስ የሚል ሀሳብ ነው፣ በተለይም ሳክሰን-ጄኤስ የእነዚህን ዝርዝር መግለጫዎች አሁን ያለውን ስሪት ሲተገበር ምንም አይነት የ XPath ወይም XSLT ስሪት ከ1.0 በላይ የሚተገበር አሳሽ የለም፣ እና XQueryን የሚተገብር የለም። ከሳክሰን ጄኤስ ጀርባ ያለውን ኩባንያ እና ሌሎች የሳክሰን ሞተር ስሪቶችን ወደ ኖርም ቶቬይ-ዋልሽ ሳክሶኒካ ደረስኩ። እንዲህም አለ። "ማንኛውም አሳሽ ሻጭ ሳክሰን ጄኤስን ዘመናዊ የኤክስኤምኤል ቴክኖሎጂዎችን ወደ አሳሹ ለማዋሃድ እንደ መነሻ ለመውሰድ ፍላጎት ካለው ከእነሱ ጋር ብንወያይ በጣም ደስተኞች ነን።"
ግን ደግሞ አክሏል፡- "አንድ ሰው ሳክሰን ጄኤስን አሁን ባለው መልኩ ወስዶ ወደ አሳሹ ግንባታ ሳይለወጥ ማውጣቱ በጣም ጥሩ አቀራረብ ነው ብሎ ቢያስብ በጣም ይገርመኛል። አሳሽ ሻጭ በተፈጥሮው አሳሹን ስለሚገነቡ 'ከውጭ' ከምንችለው በላይ ውህደቱን በጥልቅ ደረጃ ሊጠጋ ይችላል።" Norm Tovey-Walsh
የ Tovey-Walsh አስተያየቶች ከ XSLT ማቋረጡ ማስታወቂያ አንድ ሳምንት በፊት እንደመጡ ልብ ሊባል የሚገባው ጉዳይ ነው. ማጠቃለያ መቀጠል እችል ነበር። ነገር ግን ይህ የ XPathን ኃይል እንዳሳየ እና ለታላቅ ነገሮች እንዴት እንደሚጠቀሙበት የሚያሳዩ ብዙ ምሳሌዎችን እንደሰጠዎት ተስፋ አደርጋለሁ። በአሳሹ ቁልል ውስጥ ያለው የድሮ ቴክኖሎጂ ዛሬም ብዙ መገልገያ ያለው ፍጹም ምሳሌ ነው፣ ምንም እንኳን መኖሩን በጭራሽ ባያውቁትም ወይም እሱን ለማግኘት ፈፅሞ ባላሰቡበትም። ተጨማሪ ንባብ
"የራስ-ሰር የድር ሙከራዎችን በተፈጥሮ ቋንቋ የመቋቋም አቅምን ማሳደግ" (ኤሲኤም ዲጂታል ላይብረሪ) በ Maroun Ayli፣ Youssef Bakouny፣ Nader Jalloul እና Rima Kilanyይህ ጽሁፍ የመቋቋም ችሎታ ፈተናዎችን ለመፃፍ ብዙ የ XPath ምሳሌዎችን ይሰጣል። XPath (MDN) XPath እንዴት እንደሚሰራ የሚገልጽ ቴክኒካዊ ማብራሪያ ከፈለጉ ይህ ለመጀመር ጥሩ ቦታ ነው። XPath Tutorial (ZVON) ለብዙ ምሳሌዎች እና ግልጽ ማብራሪያዎች ምስጋና ይግባውና ይህ አጋዥ ስልጠና በራሴ ትምህርት ውስጥ በጣም አጋዥ ሆኖ አግኝቼዋለሁ። XPatherይህ በይነተገናኝ መሳሪያ ከኮዱ ጋር በቀጥታ እንዲሰሩ ያስችልዎታል።
