Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to realize the design pattern application scenario in the web front end. Many people may not know much about it. In order to let everyone know more, Xiaobian summarizes the following contents for everyone. I hope you can gain something according to this article.

1. interpreter mode

For a language, we give its grammatical representation (a grammatical description tool in the language that defines the rules of the language) and define an interpreter by which sentences defined in the language are interpreted.

Definition may sound abstract, for example, our common website multi-language, to achieve multi-language we first have to predetermine the type of language, design the corpus of different languages in advance, and then we will map to different languages according to configuration and unified variable rules.

2. Xpath path of element

XPath is used to navigate through elements and attributes in XML documents. Although XPath is used to find XML nodes, it can also be used to find nodes in HTML documents because HTML and XML are structurally similar. Here we only consider html, the path where the element is located in the html page.

So how do you quickly get the Xpath path of an element? In fact, it is also very simple, we open Google debugging tools:

选中Copy XPath即可复制元素的Xpath路径。格式可能长这样：

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

获取元素Xpath路径的应用场景很多，比如我们经常使用的python爬虫，利用爬虫框架可以通过Xpath路径很方便额控制页面中的某个dom节点，进而获取想要的数据和元素;又比如我们通过发送元素的Xpath路径给后端，后端可以统计某一功能的使用情况和交互数据;又比如分析用户在网站中浏览的热力分布图，路径画像等等。

3.js实现获取元素的Xpath路径

在实现之前，首先我们分析一下Xpath路径的结构，比如我们有一个页面，元素span的结构如下：

Document 我是徐小夕

那么我们的Xpath路径可能长这样：

HTML/BODY|HEAD/DIV/SPAN

从上面可以看出，我们的最右边一个元素都是目标元素，而最左边第一个元素都是最外层容器。要完成这个过程首先我们要通过元素的parentNode来获取当前元素的父元素，直到找到最顶层位置。但我们还需要注意的一点是，每找到上一层我们还要遍历该元素前面的兄弟元素previousSibling，如果这个兄弟元素名字和它后面的元素名字相同，则在元素名上+1.

第一步我们先实现一个遍历同级兄弟元素的方法getSameLevelName：

// 获取兄弟元素名称 function getSameLevelName(node){ // 如果存在兄弟元素 if(node.previousSibling) { let name = '', // 返回的兄弟元素名称字符串 count = 1, // 紧邻兄弟元素中相同名称元素个数 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 { // 重制相同紧邻节点名称节点个数 count = 1; // 追加新的节点名称 name += '|' + sibling.nodeName.toUpperCase() } } sibling = sibling.previousSibling; } return name }else { // 不存在兄弟元素返回'' return '' } }

第二步，遍历文档树。

// XPath解释器 let Interpreter = (function(){ return function(node, wrap){ // 路径数组 let path = [], // 如果不存在容器节点，默认为document wrap = wrap || document; // 如果当前节点等于容器节点 if(node === wrap) { if(wrap.nodeType == 1) { path.push(wrap.nodeName.toUpperCase()) } return path } // 如果当前节点的父节点不等于容器节点 if(node[xss_clean] !== wrap){ // 对当前节点的父节点执行遍历操作 path = arguments.callee(node[xss_clean], wrap) } // 如果当前节点的父元素节点与容器节点相同 else { wrap.nodeType == 1 && path.push(wrap.nodeName.toUpperCase()) } // 获取元素的兄弟元素的名称统计 let siblingsNames = getSameLevelName(node) if(node.nodeType == 1){ path.push(node.nodeName.toUpperCase() + sublingsNames) } // 返回最终的路径数组结果 return path } })()

有了这两个方法，我们就可以轻松获取元素的XPath路径啦，比如：

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

这样会返回开篇的一样的数据结构了.如：HTML/BODY|HEAD/DIV/SPAN

看完上述内容，你们对web前端中设计模式应用场景怎么实现有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注行业资讯频道，感谢大家的支持。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.