javascript - HTML の JavaScript コードを最小限に抑える

Question

HTMLドキュメントでjavascriptが正しく機能する必要があるjqueryと複数のスクリプトを使用しています（Web 2.0に感謝します）。投稿、$(document).ready関数やその他の複数のイベントの実行などに ajax を使用しています。HTML で JavaScript を実行するために必要な外部 JavaScript ファイルの読み込み時間を短縮するために、googles minify を使用しています。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>

score 1 · Accepted Answer

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 アプリケーションのパフォーマンスを確実に向上させる有用な提案 (スクリプト/スタイルシートの読み込み順序など) を自動的に生成します。

score 0 · Accepted Answer

jQuery には、コードを実行してイベントハンドラーをアタッチするための 2 つの強力なメソッド、$(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>

javascript - HTML の JavaScript コードを最小限に抑える

4 に答える 4

Related

Reference