解释器模式（Interpreter）
对于一种语言，给出其文法表示形式，并定义一种解释器，通过使用这种解释器来解释语言中定义的句子。
需求：描述带有点击事件的DOM元素在页面中的位置
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>语言翻译-解释器模式</title>
</head>
<style>
* {
margin: 15px;
border: 3px solid #333;
}
*:nth-child(2n) {
border-color: red;
}
*:nth-child(2n + 1) {
border-color: orange;
}
</style>
<body>
<div>
<div>
<div>
<button onclick="Interpreter(this)">【HTML > HEAD|BODY > DIV > DIV > DIV > BUTTON】</button>
</div>
<div>
<button onclick="Interpreter(this)">【HTML > HEAD|BODY > DIV > DIV > DIV|DIV > BUTTON】</button>
</div>
</div>
</div>
<ul>
<li>
<button onclick="Interpreter(this)">【HTML > HEAD|BODY > DIV|UL > LI > BUTTON】</button>
</li>
<li>
<button onclick="Interpreter(this)">【HTML > HEAD|BODY > DIV|UL > LI|LI > BUTTON】</button>
</li>
<li>
<button onclick="Interpreter(this)">【HTML > HEAD|BODY > DIV|UL > LI|LI|LI > BUTTON】</button>
</li>
</ul>
<div>
<button onclick="Interpreter(this)">【HTML > HEAD|BODY > DIV|UL|DIV > BUTTON】</button>
<button onclick="Interpreter(this)">【HTML > HEAD|BODY > DIV|UL|DIV > BUTTON|BUTTON】</button>
<p onclick="Interpreter(this)" style="text-align: center;">【HTML > HEAD|BODY > DIV|UL|DIV > BUTTON|BUTTON|P】</p>
</div>
<script src="./index.js"></script>
</body>
</html>
// XPath 解释器
const Interpreter = (function () {
/**
* 获取兄弟元素的nodeName
* @param {HTMLElement} node DOM元素
*/
function getSublingName(node) {
let names = [];
while (node) {
if (node.nodeType === 1)
names = [node.nodeName, ...names];
node = node.previousSibling;
}
console.log(names.join('|'));
return names.join('|');
}
/**
* 解释器方法
*/
return function (node) {
let path = [];
while (node) {
if (node.nodeType === 1) {
path = [getSublingName(node), ...path]
}
node = node.parentNode;
}
console.log(path.join('>'));
return path.join('>');
};
}());
