javascript - 奇怪的 JavaScript 控制台错误

Question

通过 FTP 将 js 文件上传到服务器后，没有执行任何函数，并且出现此错误:

Uncaught SyntaxError: Unexpected identifier 

当我检查代码时，一切都困惑了，所有代码都在一行上，如下所示:

                $(function(){   var $document = $(document),    $element = $('.navbar-fixed-top'),  className = 'hasScrolled';  $document.scroll(function() {   $element.toggleClass(className, $document.scrollTop() >= 50);   }); $('#home').parallax("60%", 0.7);    $('#services').parallax("60%", 0.7);    $('#skills').parallax("60%", 0.2);  $('#testimonials').parallax("60%", 0.3);    }); $(window).load(function() { $('#portfolio-slider').flexslider({ animation: "fade",  directionNav: true, useCSS: false,  controlNav: false,  }); }); var url ='img/icons.svg';   var c=new XMLHttpRequest(); c.open('GET', url, false); c.setRequestHeader('Content-Type', 'text/xml'); c.send();    document.body.insertBefore(c.responseXML.firstChild, document.body.firstChild)  $(document).ready(function() {  $('.portfolio-item').hover(function(){  $(this).find(".caption").fadeIn(500)    },function(){   $(this).find(".caption").fadeOut(500)   })  $( ".search-btn" ).click(function() {   $( "input.filter__search" ).show( "slow" ); e.preventDefault(); }); var touch = Modernizr.touch,    badIE = $('html').hasClass('lt-ie10');  $('.img-holder').imageScroll({  imageAttribute: (touch === true) ? 'image-mobile' : 'image',    parallax: !badIE,   coverRatio: 0.8,    container: ".bg-portfolio", touch: touch    }); $('.tabs-blog').tabslet({   mouseevent: 'click',    attribute: 'href',  animation: true }); $('.tabs-testimonials').tabslet({   mouseevent: 'click',    attribute: 'href',  animation: true,    autorotate: true,   delay: 9000 }); }); $(window).load(function() { $('.flexslider').flexslider({   animation: "fade",  slideshow:false,    directionNav: false }); var mySwiper = $('.swiper-container').swiper({  mode:'horizontal',  loop: false,    freeMode: true, freeModeFluid: true,    grabCursor: true,   autoplay: 5000, autoplayDisableOnInteraction: true, calculateHeight: true,  resizeReInit: true, scrollbar: {    container : '.swiper-scrollbar',    draggable : true,   hide: false,    snapOnRelease: true }   }); }); $(document).ready(function(){   $('.tabs').tabslet({    mouseevent: 'click',    attribute: 'href',  animation: true,    autorotate: true,   delay: 9000 }); $('.venobox').venobox();    }); new Share(".social-share", {    networks: { facebook: { app_id: "abc123"    }   },  ui: {   flyout:  'bottom center',   button_background: 'none',  button_color:'#fff' });

这很奇怪，因为在我的编辑器(Sublime Text 2)中代码组织正确。

这是代码:

    $.scrollIt ({
upKey: 38,
downKey: 40,
scrollTime: 600,
activeClass: 'active',
onPageChange: null,
topOffset: -40
});


$(function(){
var $document = $(document),
$element = $('.navbar-fixed-top'),
className = 'hasScrolled';
$document.scroll(function() {
$element.toggleClass(className, $document.scrollTop() >= 50);
});

$('#home').parallax("60%", 0.7);
$('#services').parallax("60%", 0.7);
$('#skills').parallax("60%", 0.2);
$('#testimonials').parallax("60%", 0.3);
});

$(window).load(function() {
$('#portfolio-slider').flexslider({
animation: "fade",
directionNav: true,
useCSS: false,
controlNav: false,
});
});

var url ='img/icons.svg';
var c=new XMLHttpRequest(); c.open('GET', url, false); c.setRequestHeader('Content-Type', 'text/xml'); c.send();
document.body.insertBefore(c.responseXML.firstChild, document.body.firstChild)

$(document).ready(function() {
$('.portfolio-item').hover(function(){
$(this).find(".caption").fadeIn(500)
},function(){
$(this).find(".caption").fadeOut(500)
})
$( ".search-btn" ).click(function() {
$( "input.filter__search" ).show( "slow" );
e.preventDefault();
});

var touch = Modernizr.touch,
badIE = $('html').hasClass('lt-ie10');
$('.img-holder').imageScroll({
imageAttribute: (touch === true) ? 'image-mobile' : 'image',
parallax: !badIE,
coverRatio: 0.8,
container: ".bg-portfolio",
touch: touch
});

$('.tabs-blog').tabslet({
mouseevent: 'click',
attribute: 'href',
animation: true
});

$('.tabs-testimonials').tabslet({
mouseevent: 'click',
attribute: 'href',
animation: true,
autorotate: true,
delay: 9000
});
});

$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
slideshow:false,
directionNav: false
});
var mySwiper = $('.swiper-container').swiper({
mode:'horizontal',
loop: false,
freeMode: true,
freeModeFluid: true,
grabCursor: true,
autoplay: 5000,
autoplayDisableOnInteraction: true,
calculateHeight: true,
resizeReInit: true,
scrollbar: {
container : '.swiper-scrollbar',
draggable : true,
hide: false,
snapOnRelease: true
}
});
});

$(document).ready(function(){
$('.tabs').tabslet({
mouseevent: 'click',
attribute: 'href',
animation: true,
autorotate: true,
delay: 9000
});

$('.venobox').venobox();
});

new Share(".social-share", {
networks: {
facebook: {
app_id: "abc123"
}
},
ui: {
flyout:  'bottom center',
button_background: 'none',
button_color:'#fff'
});

如果我在 Firefox 上测试它，我会收到此错误:

SyntaxError: missing ; before statement 

而且代码看起来很乱。 有什么问题吗？ JavaScript 有问题吗？与服务器有关吗？因为如果我在 Firefox 上本地测试它，代码看起来就像在文本编辑器中一样(不困惑)并收到不同的错误:

SyntaxError: missing } after property list

更新 将网络服务器上的文件与本地计算机上的文件进行比较后，我注意到网络服务器上的文件缺少以下内容:

    $.scrollIt ({
upKey: 38,
downKey: 40,
scrollTime: 600,
activeClass: 'active',
onPageChange: null,
topOffset: -40
});

怎么会发生这种事？

Answer 1

我怀疑您的错误来自您的代码部分，例如以下部分 - 您忽略了 ; - 请参阅 ????。即使在一行中，JS 仍然可以工作——这就是缩小版本的工作原理。严格遵守分号:

.... document.body.firstChild)????$(document).ready(function() {.....

应该是: .... document.body.firstChild);$(document).ready(function() {.....

.... $(this).find(".caption").fadeOut(500) })????$(".search-btn").click(function () { ...

应该是:

.... $(this).find(".caption").fadeOut(500) });$(".search-btn").click(function () { ...

还有:

.... ui: { flyout: 'bottom center',button_background: 'none',button_color: '#fff' }????);...

应该是:

.... ui: { flyout: 'bottom center',button_background: 'none',button_color: '#fff' }});...

在没有换行符的情况下，告诉 JS 解释器语句结束的地方是 ;

HERE IS ANOTHER EXAMPLE这对我来说很难捕捉到——未捕获的语法错误:意外的标识符

另一个严重错误 --- 末尾缺少 } --- 现在您必须将视差插件添加到 jQuery 中。 ---> Other demo