0

Phonegap の複数の HTML ページに対して JS ライブラリのロードを 1 回だけアーカイブするにはどうすればよいですか。

私はこのプロジェクトを持っています:

./index.html

./FoderA/index.html

./FoderB/index.html
....

各 index.html では cordova2.2.0.js を使用していますが、パフォーマンスが少し低下します。./index.htmlアプリの起動時などに、JS ライブラリ (cordova、jquerymobile など) を 1 回読み込むことはできますか?

前もって感謝します。

4

3 に答える 3

1

新しいページに移動すると、すべての JavaScript をリロードする必要があるため、これを回避する方法は、新しいページに移動しないことです。この購入は、Ajax を使用して 2 番目のページをロードし、DOM に追加することで実現できます。Bryce が独自の loadPage 機能を展開しているこの優れた記事をご覧ください。

jQuery Mobileや Dojoなどの他の JavaScript フレームワークでも、これらのフレームワークをロードする必要がありますが、これを行うことができます。

于 2013-01-08T15:31:45.643 に答える
1

このフレームワークを試すことができます。以下は、私のプロジェクトの 1 つからのサンプル index.html です。

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Maze</title>
<script src="Scripts/cordova/cordova-2.2.0.js" type="text/javascript"></script>
<script src="Scripts/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="Scripts/novas/nova.all.js" type="text/javascript"></script>
<script src="Scripts/maze/maze.data.js" type="text/javascript"></script>

</head>

<body>
<div id="themes">
    <link href="themes/nova.ui.core.css" rel="stylesheet" />
    <link href="themes/nova.ui.content.css" rel="stylesheet" />
</div>
<div id="body">
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            nova.application.start("home.html");
        });
    </script>
</div>
</body>
</html>

実際には、他のすべてのページは、ajax 呼び出しを介して div#body に読み込まれます。他のページには <head> や <body> を含める必要はなく、<div> からのみ開始します。

home.html:

<style>
#content {
    width: 100%;
    min-height: 100%;
    position: relative;
}
.content-w1 {
    padding: 15px;
    padding-bottom: 20px;
}
#links {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    line-height: 20px;
}
.content-w1 h1 {
    background-color: #FFFCE5;
    text-align: center;
    margin: 0px;
    padding: 10px 0px;
    color: #30C5F2;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
    border-radius: 5px;
}

</style>

<div id="content">
<div class="content-w1">
    <div class="logo-home"></div>
    <ul class="color-blocks">
        <li>Never</li>
        <li>Lose</li>
        <li>Your</li>
        <li>Hope</li>
        <li>.</li>
    </ul>
    <ul class="menu">
        <li id="linkLevels">Choose Level</li>
        <li id="linkHelp">Help</li>
        <li id="linkQuickStart">
            Quick Start
            <small id="quickstartLevel">Level 1</small>
        </li>
    </ul>
    <div class="challenge">
    </div>
</div>
<div id="links">
    &copy;2012, NovaSoftware.com, 
    <i>v1.0</i>
</div>
</div>
<script language="javascript" type="text/javascript">


nova.application.currentPage.onLoaded(function () {
    function init() {
        if (window.DbService == undefined) {
            return;
        }

        var service = new DbService();
        var quickStart = 1;
        service.init(function () {
            service.getQuickStartLevel(function (level) {
                $("#quickstartLevel").html("Level " + level);
                quickStart = level;
            });
        });

        nova.touch.bindClick("#linkQuickStart", function () {
            alert("linkQuickStart");
            var page = new nova.Page("pages/game.html");
            page.level = quickStart;
            nova.application.gotoPage(page);
        });
        nova.touch.bindClick("#linkLevels", function () {
            nova.application.gotoPage("pages/levels.html");
        });
        //nova.application.gotoPage("pages/levels.html");
    }

    init();
});


</script>
于 2013-01-08T15:45:34.167 に答える
0

Ajax を使用して、すべての js ライブラリと css を DOM にロードする必要があります

于 2013-04-08T20:54:04.950 に答える