javascript - 任何人都可以用一种易于理解的方式从字面上翻译这个 JavaScript 函数吗？

Question

https://codepen.io/zchee/pen/ogzvZZ

上面的 codepen 链接包含一个滚动动画示例，它会在您向下滚动时更改导航的行为和外观，这是使用纯 vanilla JavaScript 完成的。问题是我不明白这个脚本是如何工作的。我有 JavaScript 的基础知识，到目前为止我知道......

1. 有 3 个变量 -- section(选择“section”类)、一个空对象 {} 和函数内部值为 0 的 i。

2. 经过研究，我发现 Array.prototype.forEach.call 与 [ ].forEach(function()) 相同。所以根据我的理解，e是一个参数。从这里开始，我迷路了，因为我不知道section[e.id] = e.offsetTop;

3. 好吧，我理解 window.onscroll = function() {} 但不是 100% 确定为什么我们需要为 scrollPosition 创建一个等于 scrollTop 或 body.scrollTop 的变量？

我对其余的代码迷路了……我很欣赏逐行解释。谢谢。

(function() {
  'use strict';

  var section = document.querySelectorAll(".section");
  var sections = {};
  var i = 0;

  Array.prototype.forEach.call(section, function(e) {
    sections[e.id] = e.offsetTop;
  });

  window.onscroll = function() {
    var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

    for (i in sections) {
      if (sections[i] <= scrollPosition) {
        document.querySelector('.active').setAttribute('class', ' ');
        document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
      }
    }
  };
})();

Answer 1

所以如果你看一下这个函数，你会发现它是一个 Immediately Invoked Function Expression (IIFE)。这只是意味着它是一个在遇到它时立即执行的函数。当函数运行时，它会执行以下操作:

var section = document.querySelectorAll(".section");

这会找到类为 section 的所有节点.这将返回 NodeList .这将代表 <div id="home" class="section"></div>等等

Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});

这是一种迭代具有数组等属性的列表的方法。如果它是一个数组， forEach 将直接调用它(根据下面的@RobG)。这将存储 id每个 section 的属性进入sections用作具有偏移顶部值的查找的对象，即呈现时每个部分距顶部的距离。

window.onscroll = function() {}

每次滚动时都会触发的事件处理程序。

var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

到目前为止，您滚动到距顶部多远。

if (sections[i] <= scrollPosition) {
    document.querySelector('.active').setAttribute('class', ' ');
    document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
  }

这会遍历所有部分，并检查您向下滚动文档的程度是否至少与该部分从顶部开始的内容一样多。如果你有，然后找到当前事件的部分并删除它的类，它不再是事件的。然后去找a标记，代表与该部分关联的菜单链接，并将其类设置为事件。