JavaScript 代码未按预期在网页上运行

Question

我正在尝试将 JS 文件链接到我的 html 页面。我使用 Gulp 来处理我的 html、scss 和 js 文件，在构建时将它们分发到 dist 文件夹中。

这是我的 Gulp 代码的一部分:

// Optimizing CSS and JavaScript 
gulp.task('useref', function() {

  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'));
    
});

我的 Gulp 文件中的构建顺序是:

gulp.task('build', function(callback) {
  runSequence(
    'clean:dist',
    'sass',
    ['useref', 'images', 'fonts', 'sassdoc'],
    callback
  )
})

我的 js 文件中有一些控制台日志确实得到了处理。

console.log('This is the Main.js file. It should be the 3rd and final file');

但同一文件中没有以下内容:我在同一个 main.js 文件中有一些 JS 代码，将导航 div 设置为位置:top 0;向下滚动。但这个js代码永远不会被利用。这是我从 @Commercial Suicide 的帮助中获得的 js 代码，它确实在 Stack Overflow 上作为代码片段运行。

var body = document.getElementsByTagName('body')[0],
   nav = document.getElementById('nav');

window.addEventListener('scroll', function() { 
 if (body.scrollTop > 0) {
   nav.className += " no-indent"
 } else {
   nav.classList.remove("no-indent");
 }
}, true)

在我的 scss 中，我的 nav div 中有 nav id，并且 nav div 上也有 no-ident 类，它具有以下 css:

.no-indent { 
top: 0 !important;
}

我的 html 文件中的 js 文件的链接设置在 body 标记的底部:

<script src="js/main.js"></script>

js 文件位于 js 文件夹中 html 文件的上方。

这就是我的分发文件夹中经过处理和缩小的 js 的样子:

!function() {
}(), console.log("This is the Main.js file. It should be the 3rd and final file");
var body = document.getElementsByTagName("body")[0],
    nav = document.getElementById("nav");
window.addEventListener("scroll", function() {
    body.scrollTop > 0 ? nav.className += " no-indent" : nav.classList.remove("no-indent")
}, !0);

Answer 1

首先，我认为这与 Gulp 无关，因为您提到处理缩小的 JS 文件的控制台行。

我创建了一个 JSFiddle您的脚本经过少量调整就可以正常工作。即使在本地尝试过，仍然有效。但是您仍然应该考虑事件限制。

如果问题仍然存在，我猜这与您的运行时环境有关。另一个浏览器可能会有所帮助，以检查是否是导致问题的原因。其次，您的 HTML 文件的其余部分有效吗？

关于您的脚本的小注释。滚动事件被多次触发。这将在 nav.className += "no-indent" 行生成不必要的类声明。 _“建议限制该事件”_ Scroll event, developer.mozilla.org

这里有一个关于事件限制和反跳的很好的解释 right here