在JS中使用强大的CSS选择器来定位页面元素

2022-12-12 23:08| 来源: 网络整理| 查看: 265

近期由于受到谷歌退出中国市场的影响，就连之前可以正常使用的翻译 API 也无法使用了。无奈之下为不影响本站的加载速率，决定暂时关闭谷歌的在线翻译功能。🙃

接着就发生了奇怪的现象，重新生成站代码发布完成后，自测是没有问题的，但是有网友反馈说站点访问加载不出来内容。听完自己也甚是一惊，难道是服务器出问题啦？

连忙打开手机访问验证了下一切都是正常的，切换到电脑访问（用的是Edge浏览器）也是正常，难道真的是个别现象吗？然后又切换到火狐浏览器进行测试，结果还真是加载不出来内容，通过 F12 也快速定位到了的问题，是因为关闭了谷歌在线翻译功能后，按钮的注册事件失败，影响到了后续 JS 脚本的执行。

看来发版的时候要多测试几款浏览器才行啦

在 hugo-theme-next 主题最新版本中加入了右侧工具按钮的小功能，那自然是避免不了给按钮添加点击事件，来看下之前写的代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 registerToolButtons: function() { document.getElementById('goto-comments').addEventListener('click', () => { window.anime({ targets : document.scrollingElement, duration : 500, easing : 'linear', scrollTop: document.getElementById('comments').getBoundingClientRect().top + window.scrollY }); }); /* 发生问题的代码 */ document.getElementById('goto-gt').addEventListener('click', () => { window.anime({ targets : document.scrollingElement, duration : 500, easing : 'linear', scrollTop: document.getElementById('google_translate_element').getBoundingClientRect().top + window.scrollY }); }); } 起初只是快速添加功能的实现，没有管控住代码的质量，现看看写的也太挫啦，真是失败！

熟悉 JS 代码的小伙伴应该都清楚这里发生了啥，最简单的修复方式就是在注册点击事件前，加个 if 条件判断，当元素不存在时不进行事件注册。只是这样做代码就更挫啦，可清晰的看到此处代码冗余的有点多，另外考虑到后续如果还要再添加按钮的话，难道也是说按 CTRL+C 和 CTRL+V 再来重复写一遍代码！那是坚决不能接受的。😜

于是便想到了使用 CSS 的选择器语法来支持，首先定位到这些按钮的父元素上，然后再逐一对子元素（即按钮本身）进行事件注册，这样当某个按钮被删除后也就无须 if 条件判断，同样也不用调整 JS 代码。顺着这个思路往下走的时候，发现并不是所有按钮的事件都是相同的，得排除掉其它非同类项的按钮。

结合之前编写 SCSS 代码时的经验，是否可以使用 :first-child 这样的选择器进行排除呢？直接在浏览器终端窗口中使用 JS 语法进行了快速验证，得到的答案是可行的。那么接下来就是对原代码进行改造，最终的成果参考如下：

1 2 3 4 5 6 7 8 9 10 11 12 registerToolButtons: function () { const scrollbar_buttons = buttons.querySelectorAll('.tool-buttons div:not(:first-chlid)'); scrollbar_buttons.forEach(button => { let target_id = button.id; if (target_id != '') { target_id = target_id.substring(5); } button.addEventListener('click', () => { this.slidScrollBarAnime(target_id); }); }); }

此时的代码看起来就清爽多啦，同时也兼顾到了后续工具按钮增加的可扩展性。相比于 JS 中使用 ID 或名称来定位页面元素的方式，这种使用 CSS 选择器的模式，操作起来会更的加简便和灵活。好啦，问题也是得到了圆满的解决，此次“事故”也是给自己提了个醒，不仅要注重代码的规范，而且在架构设计上面也要多下点功夫。🤔

看来对于 hugo-theme-next 主题的代码架构评审的工作得加紧啦，毕竟使用的用户也在逐步增长中，得对大家的信赖“负责”才是。😁

【本文地址】

公司简介

联系我们