0

我正在使用 jquery 和多个脚本，这些脚本需要 HTML 文档中的 javascript 才能正常运行（感谢 web 2.0）。我正在使用 ajax 发布、$(document).ready运行函数和其他多个事件等。我正在使用谷歌缩小来帮助加载在 HTML 中运行 javascript 所需的外部 javascript 文件的加载时间。我也无法构建/格式化我的 javascript。

我的问题如下：

  • 如何最小化 HTML 文档中的代码？
  • 即使需要$(document).ready，是否可以将 HTML 文档中的 javascript 链接到外部，如下面的示例？
  • 有什么好的网站或教程可以帮助我正确格式化我的 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>
4

4 回答 4

2

要最小化 HTML 中的 JavaScript，只需将其全部排除在 HTML 之外。

如果您需要在页面上编写脚本，则应该添加一个<script src=""></script>元素。没有理由直接在页面上包含任何原始 javascript。

如果您需要选择一个元素，请充分利用[data-*]属性、选择器和迭代：

$('[data-foo]').each(function () {
    var $this,
        data;
    $this = $(this);
    data = $this.data('foo');
    $this.foo(data);
});
于 2013-08-01T14:46:19.067 回答
1

如何最小化 HTML 文档中的代码？

内联 javascript 代码，例如

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

可以通过使用服务（例如Google Closure Compiler）来缩小。您可以简单地将代码复制并粘贴到 UI 并获得缩小版本。

即使需要$(document).ready，是否可以将 HTML 文档中的 javascript 链接到外部，如下面的示例？

是的，这当然是可能的。您只需要注意加载顺序：

<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 应用程序的性能。

于 2013-08-01T14:50:11.333 回答
0

您不必将 JavaScript 放入 HTML 页面。只需使用<script>标签包含它。

如果你真的想深入增加页面加载时间，你可以使用Minify之类的东西来压缩你的 JS 和 CSS 代码。

于 2013-08-01T14:46:41.253 回答
0

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>
于 2013-08-01T14:57:34.637 回答