Свернуть javascript-код в html

Question

Я работаю с jquery и несколькими сценариями, которые требуют правильного функционирования JavaScript в документе HTML (thankyou web 2.0). Я использую ajax для публикации, $(document).ready для запуска функций и других событий и т. Д. Я использую googles minify, чтобы помочь время загрузки внешних файлов javascript, необходимых для запуска javascript в HTML. У меня также возникла проблема с структурированием/форматированием моего javascript.

Мои вопросы заключаются в следующем:

• Как минимизировать код в HTML-документе?
• Возможно ли связать javascript в документе HTML извне , даже если для этого требуется $(document).ready, как в моем примере ниже?
• Что такое хороший сайт или учебник, чтобы помочь мне правильно форматировать мой jquery/javascript, поскольку я хорошо знаю, что это неверно, и помогает ли это время загрузки?

Ниже приведен пример страницы, на которой я запускаю несколько сценариев (не стесняйтесь отформатировать их правильно) и пример того, что я хотел бы правильно связать извне и структуру. Я не прошу кого-либо сделать мою работу для меня, а просто просто привести меня в правильном направлении.

<script type="text/javascript" src="lib/js/jquery.nivo.slider.js"></script> 
<script type="text/javascript" src="lib/js/jquery.fancybox.js"></script> 
<script type="text/javascript" src="lib/js/jquery.jcarousel.min.js"></script> 

<script type="text/javascript"> 

    //nivo 
    $(window).load(function() { 
     $('#slider').nivoSlider({ effect: 'slideInLeft', pauseTime: 5000 }); 
    }); 

    //fancybox 
    $(document).ready(function() { 
     $('.fancybox').fancybox(); 
     $.fancybox.open($("#welcome"), { padding : 0 }); 
    }); 

    //subscribe 
    $("#footer-subscribe-show-hide").click(function() { 
     $("#footer-subscribe").animate({width:'toggle'},300); 
     $(this).show("#subscribe"); 
    }); 

    //responsive 
    $(function() { 
     $('.menu-mobile-drop').click(function() { 
      $('.menu-mobile').toggle(); 
     }); 
    }); 
    $(".menu-wrap").click(function() { 
     $(this).find('img').toggle(); 
    }); 

    //subscriptionAjax 
    $("#subscriber").submit(function(event) { 
     event.preventDefault(); 
     $("#footer-subscribe").fadeOut(); 
     var values = $(this).serialize(); 
     $.ajax({ 
      url: "include/subscribe.php", 
      type: "post", 
      data: values, 
      success: function(){ 
       $("#footer-subscribe") 
       .html(
        "<div class='subscription-success'>You're now subscribed!</div>" 
       ) 
       .fadeIn('slow'); 
      }, 
      error: function(){ 
       alert("failure"); 
       $("#footer-subscribe").html('there is error while submit'); 
      } 
     }); 
    }); 

    //jcarousel 
    function mycarousel_initCallback(carousel) { 
     carousel.clip.hover(function() { 
      carousel.stopAuto(); 
     }, 
     function() { 
      carousel.startAuto(); 
     }); 
    }; 
    jQuery(document).ready(function() { 
     jQuery('#mycarousel').jcarousel({ 
      auto: 8, 
      wrap: 'last', 
      initCallback: mycarousel_initCallback 
     }); 
    }); 

</script> 

Answer 1

Как свести к минимуму код в документе HTML?

Встроенный Java-код, такой как

<script> 
    $(function() { 
     alert("Hello World"); 
    }); 
</script> 

могут быть минимизированы с помощью службы (например, Google Closure Compiler). Вы можете просто скопировать и вставить код в пользовательский интерфейс и получить мини-версию.

Возможно ли связать javascript в документе HTML извне, даже если для этого требуется $(document).ready, как мой пример ниже?

Да, это, безусловно, возможно.Вы просто должны быть осведомлены о порядке загрузки:

<script> 
    $(function() { 
     alert("Hello World"); 
    }); 
</script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

Это не будет работать, потому что вы вызываете функцию document.ready от jQuery до фактического включения библиотеки.

Что такое хороший сайт или учебник, чтобы помочь мне правильно форматировать мой jquery/javascript, поскольку я хорошо знаю, что это неверно, и это помогает загрузить время?

Я буду рекомендовать использовать PageSpeed (доступный как расширение Chrome/Firefox) для анализа потенциальных проблем с производительностью. Это расширение автоматически генерирует полезные предложения (например, порядок загрузки скриптов/таблиц стилей), что, безусловно, увеличит производительность вашего веб-приложения.

Answer 2

Чтобы минимизировать JavaScript в HTML, просто держать все его из HTML.

Если вам требуется что-то, написанное на странице, вы должны добавить элемент <script src=""></script>. Нет причин включать какой-либо необработанный javascript на странице напрямую.

Если вам нужно выбрать элемент, хорошо использовать [data-*] attributes, селекторов и итерации:

$('[data-foo]').each(function() { 
    var $this, 
     data; 
    $this = $(this); 
    data = $this.data('foo'); 
    $this.foo(data); 
}); 

Answer 3

Вы не должны положить JavaScript в вашем HTML-страницы. Просто включите его, используя тег <script>.

Если вы действительно хотите углубиться в увеличение времени загрузки страницы, вы можете использовать что-то вроде Minify, чтобы сжать код JS и CSS.

Answer 4

jQuery предлагает два мощных метода для выполнения кода и присоединения обработчиков событий: $ (document) .ready и $ (window) .load. Событие готовности документа выполняется уже при загрузке HTML-документа и DOM готов, даже если все графики еще не загружены. Если вы хотите подключить свои события к определенным элементам до загрузки окна, то $ (document) .ready - это правильное место.

Подробнее см. Это сообщение..

jQuery events .load(), .ready(), .unload()

Попробуйте это за ответ:

<script type="text/javascript" src="lib/js/jquery.nivo.slider.js"></script> 
<script type="text/javascript" src="lib/js/jquery.fancybox.js"></script> 
<script type="text/javascript" src="lib/js/jquery.jcarousel.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    //nivo 
     $('#slider').nivoSlider({ effect: 'slideInLeft', pauseTime: 5000 }); 
    //fancybox 
     $('.fancybox').fancybox(); 
     $.fancybox.open($("#welcome"), { padding : 0 }); 
    //subscribe 
    $("#footer-subscribe-show-hide").click(function() { 
     $("#footer-subscribe").animate({width:'toggle'},300); 
     $(this).show("#subscribe"); 
    }); 

    $('.menu-mobile-drop').click(function() { 
      $('.menu-mobile').toggle(); 
     }); 

    $(".menu-wrap").click(function() { 
     $(this).find('img').toggle(); 
    }); 

    //subscriptionAjax 
    $("#subscriber").submit(function(event) { 
     event.preventDefault(); 
     $("#footer-subscribe").fadeOut(); 
     var values = $(this).serialize(); 
     $.ajax({ 
      url: "include/subscribe.php", 
      type: "post", 
      data: values, 
      success: function(){ 
       $("#footer-subscribe") 
       .html(
        "<div class='subscription-success'>You're now subscribed!</div>" 
       ) 
       .fadeIn('slow'); 
      }, 
      error: function(){ 
       alert("failure"); 
       $("#footer-subscribe").html('there is error while submit'); 
      } 
     }); 
    }); 

    //jcarousel 
    function mycarousel_initCallback(carousel) { 
     carousel.clip.hover(function() { 
      carousel.stopAuto(); 
     }, 
     function() { 
      carousel.startAuto(); 
     }); 
    }; 

     $('#mycarousel').jcarousel({ 
      auto: 8, 
      wrap: 'last', 
      initCallback: mycarousel_initCallback 
     }); 
    }); 

</script>