溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

web前端中設(shè)計(jì)模式應(yīng)用場(chǎng)景怎么實(shí)現(xiàn)

發(fā)布時(shí)間：2021-09-17 13:43:11 來(lái)源：億速云 閱讀：186 作者：柒染 欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)web前端中設(shè)計(jì)模式應(yīng)用場(chǎng)景怎么實(shí)現(xiàn)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

web前端中設(shè)計(jì)模式應(yīng)用場(chǎng)景怎么實(shí)現(xiàn)

1.解釋器模式

對(duì)于一種語(yǔ)言，我們給出其文法表示形式(一種語(yǔ)言中的語(yǔ)法描述工具，用來(lái)定義語(yǔ)言的規(guī)則)，并定義一種解釋器，通過(guò)這種解釋器來(lái)解釋語(yǔ)言中定義的句子。

定義聽(tīng)起來(lái)可能比較抽象，舉個(gè)例子比如我們常見(jiàn)的網(wǎng)站多語(yǔ)言，要實(shí)現(xiàn)多語(yǔ)言我們首先要預(yù)定語(yǔ)言的類(lèi)型，提前設(shè)計(jì)不同語(yǔ)言的語(yǔ)料庫(kù)，然后我們會(huì)根據(jù)配置和統(tǒng)一的變量規(guī)則來(lái)映射到不同語(yǔ)言。

2.元素的Xpath路徑

XPath 用于在 XML 文檔中通過(guò)元素和屬性進(jìn)行導(dǎo)航。雖然XPath  是用來(lái)查找XML節(jié)點(diǎn)，但同樣可以用來(lái)查找HTML文檔中的節(jié)點(diǎn)，因?yàn)镠TML和XML結(jié)構(gòu)類(lèi)似。這里我們只考慮html，即元素在html頁(yè)面中所處的路徑。

那么如何快速獲取元素的Xpath路徑呢?其實(shí)也很簡(jiǎn)單，我們打開(kāi)谷歌調(diào)試工具：

web前端中設(shè)計(jì)模式應(yīng)用場(chǎng)景怎么實(shí)現(xiàn)

web前端中設(shè)計(jì)模式應(yīng)用場(chǎng)景怎么實(shí)現(xiàn)

選中Copy XPath即可復(fù)制元素的Xpath路徑。格式可能長(zhǎng)這樣：

//*[@id="juejin"]/div[2]/main/div/div[1]/article/div[1]

獲取元素Xpath路徑的應(yīng)用場(chǎng)景很多，比如我們經(jīng)常使用的python爬蟲(chóng)，利用爬蟲(chóng)框架可以通過(guò)Xpath路徑很方便額控制頁(yè)面中的某個(gè)dom節(jié)點(diǎn)，進(jìn)而獲取想要的數(shù)據(jù)和元素;又比如我們通過(guò)發(fā)送元素的Xpath路徑給后端，后端可以統(tǒng)計(jì)某一功能的使用情況和交互數(shù)據(jù);又比如分析用戶(hù)在網(wǎng)站中瀏覽的熱力分布圖，路徑畫(huà)像等等。

3.js實(shí)現(xiàn)獲取元素的Xpath路徑

在實(shí)現(xiàn)之前，首先我們分析一下Xpath路徑的結(jié)構(gòu)，比如我們有一個(gè)頁(yè)面，元素span的結(jié)構(gòu)如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <span>我是徐小夕</span> </div> </body> </html>

那么我們的Xpath路徑可能長(zhǎng)這樣：

HTML/BODY|HEAD/DIV/SPAN

從上面可以看出，我們的最右邊一個(gè)元素都是目標(biāo)元素，而最左邊第一個(gè)元素都是最外層容器。要完成這個(gè)過(guò)程首先我們要通過(guò)元素的parentNode來(lái)獲取當(dāng)前元素的父元素，直到找到最頂層位置。但我們還需要注意的一點(diǎn)是，每找到上一層我們還要遍歷該元素前面的兄弟元素previousSibling，如果這個(gè)兄弟元素名字和它后面的元素名字相同，則在元素名上+1.

第一步我們先實(shí)現(xiàn)一個(gè)遍歷同級(jí)兄弟元素的方法getSameLevelName：

// 獲取兄弟元素名稱(chēng) function getSameLevelName(node){     // 如果存在兄弟元素     if(node.previousSibling) {         let name = '',   // 返回的兄弟元素名稱(chēng)字符串            count = 1,    // 緊鄰兄弟元素中相同名稱(chēng)元素個(gè)數(shù)            nodeName = node.nodeName,            sibling = node.previousSibling;         while(sibling){             if(sibling.nodeType == 1 && sibling.nodeType === node.nodeType && sibling.nodeName){                 if(nodeName == sibling.nodeName){                     name += ++count;                 }else {                     // 重制相同緊鄰節(jié)點(diǎn)名稱(chēng)節(jié)點(diǎn)個(gè)數(shù)                     count = 1;                     // 追加新的節(jié)點(diǎn)名稱(chēng)                     name += '|' + sibling.nodeName.toUpperCase()                 }             }             sibling = sibling.previousSibling;         }         return name     }else {         // 不存在兄弟元素返回''         return ''     } }

第二步，遍歷文檔樹(shù)。

// XPath解釋器 let Interpreter = (function(){   return function(node, wrap){   // 路徑數(shù)組   let path = [],   // 如果不存在容器節(jié)點(diǎn)，默認(rèn)為document   wrap = wrap || document;   // 如果當(dāng)前節(jié)點(diǎn)等于容器節(jié)點(diǎn)   if(node === wrap) {     if(wrap.nodeType == 1) {       path.push(wrap.nodeName.toUpperCase())     }     return path   }   // 如果當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)不等于容器節(jié)點(diǎn)   if(node.parentNode !== wrap){     // 對(duì)當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)執(zhí)行遍歷操作     path = arguments.callee(node.parentNode, wrap)   }   // 如果當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn)與容器節(jié)點(diǎn)相同   else {     wrap.nodeType == 1 && path.push(wrap.nodeName.toUpperCase())   }   // 獲取元素的兄弟元素的名稱(chēng)統(tǒng)計(jì)   let siblingsNames = getSameLevelName(node)   if(node.nodeType == 1){     path.push(node.nodeName.toUpperCase() + sublingsNames)   }   // 返回最終的路徑數(shù)組結(jié)果   return path } })()

有了這兩個(gè)方法，我們就可以輕松獲取元素的XPath路徑啦，比如：

let path = Interpreter(document.querySelector('span')) console.log(path.join('/'))

這樣會(huì)返回開(kāi)篇的一樣的數(shù)據(jù)結(jié)構(gòu)了.如：HTML/BODY|HEAD/DIV/SPAN

看完上述內(nèi)容，你們對(duì)web前端中設(shè)計(jì)模式應(yīng)用場(chǎng)景怎么實(shí)現(xiàn)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手