日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端:探秘設計模式應用場景

1.解釋器模式

創(chuàng)新互聯(lián)是一家專業(yè)提供融安企業(yè)網(wǎng)站建設,專注與成都做網(wǎng)站、成都網(wǎng)站建設、H5響應式網(wǎng)站、小程序制作等業(yè)務。10年已為融安眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

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

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

2.元素的Xpath路徑

XPath 用于在 XML 文檔中通過元素和屬性進行導航。雖然XPath 是用來查找XML節(jié)點，但同樣可以用來查找HTML文檔中的節(jié)點，因為HTML和XML結構類似。這里我們只考慮html，即元素在html頁面中所處的路徑。

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

選中Copy XPath即可復制元素的Xpath路徑。格式可能長這樣：

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

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

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

在實現(xiàn)之前，首先我們分析一下Xpath路徑的結構，比如我們有一個頁面，元素span的結構如下：

   
 
 
 
    
    
  
  
  
  1.  
    2. 
    
  
  
  
  2.  
    3. 
    
  
  
  
  3.  
    4. 
    
  
  
  
  4.  
    5. 
    
  
  
  
  5.  
    6. 
    
  
  
  
  6.  
    7. 
    
  
  
  
  7. Document 
    8. 
    
  
  
  
  8.  
    9. 
    
  
  
  
  9.  
    10. 
    
  
  
  
  10.  
    11. 
    
  
  
  
  11. 我是徐小夕 
    12.
 
  •  
  •  

    •  

    那么我們的Xpath路徑可能長這樣：

      
 
 
 
      
   
  
  
  
    1. HTML/BODY|HEAD/DIV/SPAN 
      2.

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

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

      
 
 
 
      
   
  
  
  
    1. // 獲取兄弟元素名稱 
      2. 
   
  
  
  
    2. function getSameLevelName(node){ 
      3. 
   
  
  
  
    3.     // 如果存在兄弟元素 
      4. 
   
  
  
  
    4.     if(node.previousSibling) { 
      5. 
   
  
  
  
    5.         let name = '',   // 返回的兄弟元素名稱字符串 
      6. 
   
  
  
  
    6.            count = 1,    // 緊鄰兄弟元素中相同名稱元素個數(shù) 
      7. 
   
  
  
  
    7.            nodeName = node.nodeName, 
      8. 
   
  
  
  
    8.            sibling = node.previousSibling; 
      9. 
   
  
  
  
    9.         while(sibling){ 
      10. 
   
  
  
  
    10.             if(sibling.nodeType == 1 && sibling.nodeType === node.nodeType && sibling.nodeName){ 
      11. 
   
  
  
  
    11.                 if(nodeName == sibling.nodeName){ 
      12. 
   
  
  
  
    12.                     name += ++count; 
      13. 
   
  
  
  
    13.                 }else { 
      14. 
   
  
  
  
    14.                     // 重制相同緊鄰節(jié)點名稱節(jié)點個數(shù) 
      15. 
   
  
  
  
    15.                     count = 1; 
      16. 
   
  
  
  
    16.                     // 追加新的節(jié)點名稱 
      17. 
   
  
  
  
    17.                     name += '|' + sibling.nodeName.toUpperCase() 
      18. 
   
  
  
  
    18.                 } 
      19. 
   
  
  
  
    19.             } 
      20. 
   
  
  
  
    20.             sibling = sibling.previousSibling; 
      21. 
   
  
  
  
    21.         } 
      22. 
   
  
  
  
    22.         return name 
      23. 
   
  
  
  
    23.     }else { 
      24. 
   
  
  
  
    24.         // 不存在兄弟元素返回'' 
      25. 
   
  
  
  
    25.         return '' 
      26. 
   
  
  
  
    26.     } 
      27. 
   
  
  
  
    27. } 
      28.

    第二步，遍歷文檔樹。

      
 
 
 
      
   
  
  
  
    1. // XPath解釋器 
      2. 
   
  
  
  
    2. let Interpreter = (function(){ 
      3. 
   
  
  
  
    3.   return function(node, wrap){ 
      4. 
   
  
  
  
    4.   // 路徑數(shù)組 
      5. 
   
  
  
  
    5.   let path = [], 
      6. 
   
  
  
  
    6.   // 如果不存在容器節(jié)點，默認為document 
      7. 
   
  
  
  
    7.   wrap = wrap || document; 
      8. 
   
  
  
  
    8.   // 如果當前節(jié)點等于容器節(jié)點 
      9. 
   
  
  
  
    9.   if(node === wrap) { 
      10. 
   
  
  
  
    10.     if(wrap.nodeType == 1) { 
      11. 
   
  
  
  
    11.       path.push(wrap.nodeName.toUpperCase()) 
      12. 
   
  
  
  
    12.     } 
      13. 
   
  
  
  
    13.     return path 
      14. 
   
  
  
  
    14.   } 
      15. 
   
  
  
  
    15.   // 如果當前節(jié)點的父節(jié)點不等于容器節(jié)點 
      16. 
   
  
  
  
    16.   if(node.parentNode !== wrap){ 
      17. 
   
  
  
  
    17.     // 對當前節(jié)點的父節(jié)點執(zhí)行遍歷操作 
      18. 
   
  
  
  
    18.     path = arguments.callee(node.parentNode, wrap) 
      19. 
   
  
  
  
    19.   } 
      20. 
   
  
  
  
    20.   // 如果當前節(jié)點的父元素節(jié)點與容器節(jié)點相同 
      21. 
   
  
  
  
    21.   else { 
      22. 
   
  
  
  
    22.     wrap.nodeType == 1 && path.push(wrap.nodeName.toUpperCase()) 
      23. 
   
  
  
  
    23.   } 
      24. 
   
  
  
  
    24.   // 獲取元素的兄弟元素的名稱統(tǒng)計 
      25. 
   
  
  
  
    25.   let siblingsNames = getSameLevelName(node) 
      26. 
   
  
  
  
    26.   if(node.nodeType == 1){ 
      27. 
   
  
  
  
    27.     path.push(node.nodeName.toUpperCase() + sublingsNames) 
      28. 
   
  
  
  
    28.   } 
      29. 
   
  
  
  
    29.   // 返回最終的路徑數(shù)組結果 
      30. 
   
  
  
  
    30.   return path 
      31. 
   
  
  
  
    31. } 
      32. 
   
  
  
  
    32. })() 
      33.

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

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

    這樣會返回開篇的一樣的數(shù)據(jù)結構了.如：HTML/BODY|HEAD/DIV/SPAN

    最后

    如果想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知識和實戰(zhàn)，歡迎在公眾號《趣談前端》加入我們一起學習討論，共同探索前端的邊界。

    本文轉(zhuǎn)載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉(zhuǎn)載本文請聯(lián)系趣談前端公眾號。


    標題名稱：前端:探秘設計模式應用場景
    標題路徑：http://www.dlmjj.cn/article/dpsjgec.html