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

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)建站的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線，而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無(wú)止境。

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)試工具：

選中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ù);又比如分析用戶在網(wǎng)站中瀏覽的熱力分布圖，路徑畫(huà)像等等。

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

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

         
 我是徐小夕 
  

那么我們的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：

// 獲取兄弟元素名稱 function getSameLevelName(node){     // 如果存在兄弟元素     if(node.previousSibling) {         let name = '',   // 返回的兄弟元素名稱字符串            count = 1,    // 緊鄰兄弟元素中相同名稱元素個(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)名稱節(jié)點(diǎn)個(gè)數(shù)                     count = 1;                     // 追加新的節(jié)點(diǎn)名稱                     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())   }   // 獲取元素的兄弟元素的名稱統(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。