0

HTML と jQuery を使用して、単純な単一ページ アプリケーションの作成を開始しました。私の問題は、すべてのコードがインデックス ファイルにあり、すぐに管理不能になることです。

<!DOCTYPE HTML>
<html>
    <head>
        <title>SPA</title>
        <meta charset='utf-8'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>
    <body>
<!-- Page 1 -->
        <section id="page-1">
            <h1>Page 1</h1>
            <p>This is page 1</p>
            <a href="#" class="page-2-btn">Go to page 2</a>
            <a href="#" class="page-3-btn">Go to page 3</a>
        </section>

<!-- Page 2 -->
        <section id="page-2" style="display:none;">
            <h1>Page 2</h1>
            <p>This is page 2</p>
            <a href="#" class="page-1-btn">Go to page 1</a>
            <a href="#" class="page-3-btn">Go to page 3</a>
        </section>

<!-- Page 3 -->
        <section id="page-3" style="display:none;">
            <h1>Page 3</h1>
            <p>This is page 3</p>
            <a href="#" class="page-1-btn">Go to page 1</a>
            <a href="#" class="page-2-btn">Go to page 2</a>
        </section>

<!-- jQuery navigation code -->
        <script type="text/javascript">

        var animationSpeed = 500;
        var currentPage = "#page-1";

        $(document).ready(function() {

            $(".page-1-btn").click(function() {
                $(currentPage).fadeOut(animationSpeed, function(){
                    $("#page-1").fadeIn(animationSpeed);
                    currentPage = "#page-1";
                });
            });

            $(".page-2-btn").click(function() {
                $(currentPage).fadeOut(animationSpeed, function(){
                    $("#page-2").fadeIn(animationSpeed);
                    currentPage = "#page-2";
                });
            });

            $(".page-3-btn").click(function() {
                $(currentPage).fadeOut(animationSpeed, function(){
                    $("#page-3").fadeIn(animationSpeed);
                    currentPage = "#page-3";
                });
            });

        });

        </script>
    </body>
</html>

コードがよりモジュール化されるようにページを分離する方法はありますか?

HTMLをビューに分離できるjavascript MVCフレームワークに変換することを検討していますが、ページは基本的に静的であり、ナビゲーションがスムーズになるようにスパのみを使用しているため、余分な時間をかける価値があるかどうかはわかりません. また、ほとんどの mvc フレームワークが標準として持っていると思われる履歴をアプリに保持させたくありません。

4

2 に答える 2

1

テンプレートとbackbonejsにunderscorejsを使用できるかもしれません

于 2013-10-04T10:10:20.317 に答える
1

HTML を別々のpageX.htmlファイルに配置jQuery.load()し、それらを使用してメイン ページにロードすることができます。Javascript はロード時に実行されるため、これらの html ファイルに入れることもできます。ユーザーの観点からは、まだ単一ページのアプリケーションです。詳細については、ドキュメントを参照してください。

于 2013-10-04T09:28:12.143 に答える