Заказ JavaScript / JQuery

Question

Я собрал весь свой код JavaScript / jQuery в одном документе, и мне любопытно, почему что-то не работает.Я считаю, что если страница читает документ и не распознает элемент, принадлежащий фрагменту кода, все, что ниже, не будет работать.Что это такое?

jQuery().ready(function() {
jQuery('.navigation .submenu > li').bind('mouseover', openSubMenu); 
jQuery('.navigation .submenu > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
    jQuery(this).find('ul').css('visibility', 'visible');
    jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});    
};
function closeSubMenu() {
    jQuery(this).find('ul').css('visibility', 'hidden');
    jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
}); 
};
//About
jQuery('.expand-one').click(function(){
    jQuery('.content-one').slideToggle('fast');
});
jQuery('.expand-one').toggle(function() {
jQuery('.content-one').slideDown('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});
}, function() {
jQuery('.content-one').slideUp('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
});
//Destination
jQuery('.expand-two').click(function(){
    jQuery('.content-two').slideToggle('fast');
});
jQuery('.expand-two').toggle(function() {
jQuery('.content-two').slideDown('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});
}, function() {
jQuery('.content-two').slideUp('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
});
//Winners
jQuery('.expand-three').click(function(){
    jQuery('.content-three').slideToggle('fast');
});
jQuery('.expand-three').toggle(function() {
jQuery('.content-three').slideDown('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});
}, function() {
jQuery('.content-three').slideUp('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
});
jQuery(".myslider").slideshow({
  width      : 643,
  height     : 303,
  control    : false,
  transition : 'swipeleft',
  delay      : 4500,
  pauseOnClick    : false,
  pauseOnHover    : true
});
jQuery(".myslider").hide();
jQuery(function() {
jQuery("ul.tabs").tabs("div.panes > div");
});
    jQuery(".myTable tr:nth-child(even)").addClass('even');
    jQuery(".myTable").tablesorter();
    jQuery(".myTable").bind("sortEnd",function() {
    jQuery(".myTable tr").removeClass('even');
    jQuery(".myTable tr:nth-child(even)").addClass('even');
});
jQuery("#iframe").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'type'              : 'iframe'
});

});

Answer 1

Исключение javascript, которое не обрабатывается явно, остановит последовательное выполнение всего javascript внутри этого элемента сценария, поэтому ни один из следующих javascript не будет выполнен.

Если у вас есть ошибки, вы должны увидеть их в консоли отладки или консоли ошибок и изменить свой код, чтобы обрабатывать их соответствующим образом, а не игнорировать их.

Например, этот код:

document.getElementById("myHeader").style.display = "none";

завершится с ошибкой и выдаст исключение, если объект myHeader не существует, поскольку он пытается сослаться на свойство .style для нулевого объекта. Это вызовет исключение и остановит все дальнейшее выполнение после этой строки кода. Если вы пишете код, который вы хотите иметь возможность изящно обрабатывать, существует ли myHeader или нет, то вы можете сделать это следующим образом:

var myHeader = document.getElementById("myHeader");
if (myHeader) {
    myHeader.style.display = "none";
}

или вы можете перехватить исключения и продолжить после этого:

try {
    document.getElementById("myHeader").style.display = "none";
} catch(e) {}
// continue on

Поскольку вы также пометили свой пост jQuery, это место, где jQuery может быть очень полезен, потому что он проверяет вас. Например, этот код jQuery (который делает то же самое, что и приведенный выше простой javascript), не вызовет никаких ошибок, независимо от того, существует myHeader или нет.

$("#myHeader").hide();

Это потому, что jQuery уже проверяет, существует ли myHeader, и не будет вызывать какие-либо методы, если он не существует.

Answer 2

Обязательно разместите весь свой javascript внизу DOM. Убедитесь, что JavaScript работает только на $(document).ready и правильно перехватывает ошибки. Один разрыв в коде может сломать все это. Даже в, казалось бы, не связанном javascript.

Answer 3

Он прекратит выполнение, если вы столкнулись с ошибкой в ​​вашем коде.Если элемент не существует, он, вероятно, отправляет неожиданную undefined часть вашего кода, которая, вероятно, выдает ошибку.

, как предлагается в комментариях, использование headjs может помочь вам найти ошибку, но в противном случае это означает, что вам нужно улучшить проверку ошибок в своем коде.

использовать операторы try catch, генерировать пользовательские ошибки и использовать "операторы существующего элемента", чтобы найтиваши неопределенные элементы