最小化HTML中的JavaScript代碼

Question

我正在使用jquery和多個腳本，這些腳本需要HTML文檔中的javascript才能正常運行（謝謝web 2.0）。 我正在使用ajax發布， $(document).ready以運行函數和其他多個事件等。我正在使用Google縮小以幫助在HTML中運行javascript所需的外部javascript文件的加載時間。 我在構造/格式化JavaScript時也遇到了麻煩。

我的問題如下：

• 如何最小化HTML文檔中的代碼？
• 是否可以將HTML文檔中的javascript外部鏈接，即使它需要$(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中的JavaScript，只需將其全部排除在HTML外即可。

如果需要在頁面上編寫腳本的內容，則應添加<script src=""></script>元素。 沒有理由在頁面上直接包含任何原始javascript。

如果需要選擇一個元素，請充分利用[data-*]屬性 ，選擇器和迭代：

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

Answer 2

如何最小化HTML文檔中的代碼？

內聯javascript代碼，例如

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

可以通過使用服務（例如Google Closure Compiler ）來縮小。 您可以簡單地將代碼復制並粘貼到UI並獲取縮小版本。

是否可以將HTML文檔中的javascript外部鏈接，即使它需要$(document).ready ，例如下面的示例？

是的，那肯定是可能的。 您只需要了解加載順序：

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

這將不起作用，因為在實際包含庫之前，您是從jQuery調用document.ready函數。

有什么好的網站或教程可以幫助我正確格式化jquery / javascript，因為我很清楚這是不正確的，這有助於加載時間嗎？

我建議使用PageSpeed （可作為Chrome / Firefox擴展程序）來分析潛在的性能問題。 該擴展會自動生成有用的建議（例如，腳本/樣式表的加載順序），這些建議肯定會提高Web應用程序的性能。

Answer 3

您不必將JavaScript放入HTML頁面。 只需使用<script>標記將其包括在內。

如果您真的想進一步增加頁面加載時間，可以使用Minify之類的方法來壓縮JS和CSS代碼。

Answer 4

jQuery提供了兩種強大的方法來執行代碼和附加事件處理程序：$（document）.ready和$（window）.load。 加載HTML文檔並且DOM就緒時，文檔就緒事件已經執行，即使尚未加載所有圖形也是如此。 如果要在窗口加載之前為某些元素掛起事件，則$（document）.ready是正確的位置。

更詳細的信息請參考這篇文章。 。

jQuery事件.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>