Question

我正在使用jquery和多个脚本，这些脚本需要HTML文档中的javascript才能正常运行（thankyou web 2.0）。我正在使用ajax发布，$(document).ready来运行函数和其他多个事件等。我正在使用谷歌缩小来帮助在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-*] attributes，选择器和迭代：

$('[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>

这不起作用，因为您在实际包含库之前从document.ready调用了jQuery函数。

有什么好的网站或教程可以帮助我正确格式化我的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 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>

最小化html中的javascript代码

4 个答案: