一段神奇的监视 DOM 的代码[每日前端夜话0xE4]

 1(function SpyOn() {
 2
 3  const _id = 'spyon-container',
 4        _posBuffer = 3;
 5
 6  function init() {
 7    document.body.addEventListener('mousemove', glide);
 8    document.body.addEventListener('mouseover', show);
 9    document.body.addEventListener('mouseleave', hide);
10  }
11
12  function hide(e) {
13    document.getElementById(_id).style.display = 'none';
14  }
15
16  function show(e) {
17    const spyContainer = document.getElementById(_id);
18    if (!spyContainer) {
19      create();
20      return;
21    }
22    if (spyContainer.style.display !== 'block') {
23      spyContainer.style.display = 'block';
24    }
25  }
26
27  function glide(e) {
28    const spyContainer = document.getElementById(_id);
29    if (!spyContainer) {
30      create();
31      return;
32    }
33    const left = e.clientX + getScrollPos().left + _posBuffer;
34    const top = e.clientY + getScrollPos().top + _posBuffer;
35    spyContainer.innerHTML = showAttributes(e.target);
36    if (left + spyContainer.offsetWidth > window.innerWidth) {
37      spyContainer.style.left = left - spyContainer.offsetWidth + 'px';
38    } else {
39      spyContainer.style.left = left + 'px';
40    }
41    spyContainer.style.top = top + 'px';
42  }
43
44  function getScrollPos() {
45    const ieEdge = document.all ? false : true;
46    if (!ieEdge) {
47      return {
48        left : document.body.scrollLeft,
49        top : document.body.scrollTop
50      };
51    } else {
52      return {
53        left : document.documentElement.scrollLeft,
54        top : document.documentElement.scrollTop
55      };
56    }
57  }
58
59  function showAttributes(el) {
60    const nodeName = `<span style="font-weight:bold;">${el.nodeName.toLowerCase()}</span><br/>`;
61    const attrArr = Array.from(el.attributes);
62    const attributes = attrArr.reduce((attrs, attr) => {
63      attrs += `<span style="color:#ffffcc;">${attr.nodeName}</span>="${attr.nodeValue}"<br/>`;
64      return attrs;
65    }, '');
66    return nodeName + attributes;
67  }
68
69  function create() {
70    const div = document.createElement('div');
71    div.id = _id;
72    div.setAttribute('style', `
73      position: absolute;
74      left: 0;
75      top: 0;
76      width: auto;
77      height: auto;
78      padding: 10px;
79      box-sizing: border-box;
80      color: #fff;
81      background-color: #444;
82      z-index: 100000;
83      font-size: 12px;
84      border-radius: 5px;
85      line-height: 20px;
86      max-width: 45%;
87      `
88    );
89    document.body.appendChild(div);
90  }
91
92  init();
93
94})();