javascript - 最小化 html 中的 javascript 代码

Question

我正在使用 jquery 和多个脚本，这些脚本需要 HTML 文档中的 javascript 才能正常运行(谢谢 web 2.0)。我正在使用 ajax 来发布，$(document).ready 来运行函数和其他多个事件等。我正在使用 googles minify 来帮助缩短运行 javascript 所需的外部 javascript 文件的加载时间HTML。我在构建/格式化我的 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);
});